jQuery UI Widgets Forums Navigation Expander jqxExpander Add Icon

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 5 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • jqxExpander Add Icon #63184

    jqwidgetsdev
    Participant

    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.

    jqxExpander Add Icon #63190

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxExpander Add Icon #63542

    jqwidgetsdev
    Participant

    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.

    jqxExpander Add Icon #63621

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    jqxExpander Add Icon #63801

    jqwidgetsdev
    Participant

    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.

    jqxExpander Add Icon #63806

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.