jQuery UI Widgets › Forums › Navigation › Expander › jqxExpander Add Icon
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.
-
AuthorjqxExpander Add Icon Posts
-
Hello.
I wish to add additional icons in the header.
I could not find any references or question being asked before.What would be a good way to accomplish this?
Thank you.
Hello jqwidgetsdev,
Additional icons can be added to the jqxExpander header div, which is completely customizable, i.e.:
<div id='jqxexpander'> <!--Header--> <div> Header <img src="myIcon.png" /></div> <!--Content--> <div> Content </div> </div>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar.
One more help please. I am trying to add a second icon, but what is the way to make this icon aligned right?
<!--Header--> <div id='jqxExpander'> <div style="float: left;"><img src="myIcon.png" /></div> <div style="margin-left: 4px; float: left;">Header</div> <div style="float: right;"><img src="Reload.png" /></div> </div>Thank you.
Hi jqwidgetsdev,
Here is an example:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxExpander $("#jqxExpander").jqxExpander({ width: '350px' }); }); </script> </head> <body class='default'> <div id='jqxWidget' style="float: left;"> <div id='jqxExpander'> <div style="position: relative;"> <div style="float: left;"> <img src="../../jqwidgets/styles/images/star.png" /></div> <div style="margin-left: 4px; float: left;"> Header</div> <div style="position: absolute; right: -250px;"> <img src="../../jqwidgets/styles/images/star.png" /> </div> </div> <div> <ul> <li>1961 First packet-switching papers</li> <li>1966 Merit Network founded</li> <li>1966 ARPANET planning starts</li> <li>1969 ARPANET carries its first packets</li> <li>1970 Mark I network at NPL (UK)</li> <li>1970 Network Information Center (NIC)</li> <li>1971 Merit Network's packet-switched network operational</li> <li>1971 Tymnet packet-switched network</li> <li>1972 Internet Assigned Numbers Authority (IANA) established</li> <li>1973 CYCLADES network demonstrated</li> <li>1974 Telenet packet-switched network</li> <li>1976 X.25 protocol approved</li> <li>1979 Internet Activities Board (IAB)</li> <li>1980 USENET news using UUCP</li> <li>1980 Ethernet standard introduced</li> <li>1981 BITNET established</li> </ul> </div> </div> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar.
One more question please. Since you are using absolute positioning for the new icon to be added, if the expander is in a splitter what is the correct way to have the icon at the same position, irrespective of the size of the splitter? Can you please show me?
<div style="position: absolute; right: -250px;"> <img src="../../jqwidgets/styles/images/star.png" /> </div>As always, thank you for support.
Best regards.
Hi jqwidgetsdev,
It does not matter if the expander is in a splitter. The icon is positioned based on the position of the first of its relatively positioned ancestors, in this case – the jqxExpander header div. You can read more about CSS positioning here: http://www.w3schools.com/css/css_positioning.asp.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.