jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Navigation bar Color Change

This topic contains 6 replies, has 3 voices, and was last updated by  Nadezhda 9 years, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Navigation bar Color Change #62141

    shan_vs
    Participant

    Hi,

    Please provide sample to change collapse TAB background color changes in Navigation Bar.

    Thanks

    Regards

    V Shan

    Navigation bar Color Change #62155

    Nadezhda
    Participant

    Hello V Shan,

    Please, find below an example which shows how to change background color of collapsedItem with css.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <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/jqxnavigationbar.js"></script>
        <style>
             #jqxNavigationBar .jqx-fill-state-normal {
                background-color: greenyellow;
            }
        </style>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxNavigationBar.
                $("#jqxNavigationBar").jqxNavigationBar({ width: 300, expandMode: 'multiple', expandedIndexes: [2, 3] });
          
            });
        </script>
    </head>
    <body>
        <div style='width: 300px;' id='jqxWidget'>
            <div id="jqxNavigationBar">
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/mailIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Mail
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Contacts</a></li>
                        <li><a href='#'>Mails</a></li>
                        <li><a href='#'>Notes</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/contactsIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Contacts
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Business Cards</a></li>
                        <li><a href='#'>Address Cards</a></li>
                        <li><a href='#'>Detailed Address Cards</a></li>
                        <li><a href='#'>Phone List</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/tasksIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Tasks
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Simple List</a></li>
                        <li><a href='#'>Detailed List</a></li>
                        <li><a href='#'>Active Tasks</a></li>
                        <li><a href='#'>Phone List</a></li>
                    </ul>
                </div>
                <div>
                    <div style='margin-top: 2px;'>
                        <div style='float: left;'>
                            <img alt='Mail' src='../../images/notesIcon.png' />
                        </div>
                        <div style='margin-left: 4px; float: left;'>
                            Notes
                        </div>
                    </div>
                </div>
                <div>
                    <ul>
                        <li><a href='#'>Icons</a></li>
                        <li><a href='#'>Notes List</a></li>
                        <li><a href='#'>Last Seven Days</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Navigation bar Color Change #62169

    shan_vs
    Participant

    Hi Nadezhda,

    Thanks for your reply. I have three Navigation menu, One is expanded and two is collapsed. If I want to change collapse TAB background color for only one collapsed TAB, How to set this.?

    • This reply was modified 9 years, 6 months ago by  shan_vs.
    Navigation bar Color Change #62198

    Nadezhda
    Participant

    Hello V Shan,

    Here is an example with background color in second collapsedItem:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title></title>
        <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/jqxnavigationbar.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxNavigationBar
                $("#jqxNavigationBar").jqxNavigationBar({ width: 400, height: 420 });
                $('#jqxNavigationBar').on('collapsedItem', function (event) {
                    var collapsedItem = event.args.item;
                    if (collapsedItem == 1) {
                        $("#jqxNavigationBar").children().eq(2).css("background-color", "greenyellow");
                    }               
                });
                $('#jqxNavigationBar').on('expandedItem', function (event) {
                    var collapsedItem = event.args.item;
                    if (collapsedItem == 1) {
                        $("#jqxNavigationBar").children().eq(2).css("background-color", "rgb(232, 232, 232)");
                    }                
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxNavigationBar'>
            <div>
                Early History of the Internet
            </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>
                Merging the networks and creating the Internet
            </div>
            <div>
                <ul>
                    <li>1981 Computer Science Network (CSNET)</li>
                    <li>1982 TCP/IP protocol suite formalized</li>
                    <li>1982 Simple Mail Transfer Protocol (SMTP)</li>
                    <li>1983 Domain Name System (DNS)</li>
                    <li>1983 MILNET split off from ARPANET</li>
                    <li>1986 NSFNET with 56 kbit/s links</li>
                    <li>1986 Internet Engineering Task Force (IETF)</li>
                    <li>1987 UUNET founded</li>
                    <li>1988 NSFNET upgraded to 1.5 Mbit/s (T1)</li>
                    <li>1988 OSI Reference Model released</li>
                    <li>1988 Morris worm</li>
                    <li>1989 Border Gateway Protocol (BGP)</li>
                    <li>1989 PSINet founded, allows commercial traffic</li>
                    <li>1989 Federal Internet Exchanges (FIXes)</li>
                    <li>1990 GOSIP (without TCP/IP)</li>
                    <li>1990 ARPANET decommissioned</li>
                </ul>
            </div>
            <div>
                Popular Internet services
            </div>
            <div>
                <ul>
                    <li>1990 IMDb Internet movie database</li>
                    <li>1995 Amazon.com online retailer</li>
                    <li>1995 eBay online auction and shopping</li>
                    <li>1995 Craigslist classified advertisements</li>
                    <li>1996 Hotmail free web-based e-mail</li>
                    <li>1997 Babel Fish automatic translation</li>
                    <li>1998 Google Search</li>
                    <li>1999 Napster peer-to-peer file sharing</li>
                    <li>2001 Wikipedia, the free encyclopedia</li>
                    <li>2003 LinkedIn business networking</li>
                    <li>2003 Myspace social networking site</li>
                    <li>2003 Skype Internet voice calls</li>
                    <li>2003 iTunes Store</li>
                    <li>2004 Facebook social networking site</li>
                    <li>2004 Podcast media file series</li>
                    <li>2004 Flickr image hosting</li>
                    <li>2005 YouTube video sharing</li>
                    <li>2005 Google Earth virtual globe</li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Navigation bar Color Change #69482

    pepe
    Participant

    good afternoon, I wonder how I can change the corlor the edges of the headers. I tried with css but I can not do.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery Accordion, Expander, Toggle Bar, Expander Bar, Navigation Bar, Accordion, jqxNavigationBar, jqxExpander” />
    <meta name=”description” content=”jqxNavigationBar has a built-in mode which allows you to have multiple expanded
    items. In order to enable this mode, you need to set the ‘expandMode’ property to
    ‘multiple'” />
    <meta charset=”utf-8″ />
    <title id=’Description’>jqxNavigationBar has a built-in mode which allows you to have
    multiple expanded items. In order to enable this mode, you need to set the ‘expandMode’
    property to ‘multiple’ </title>
    <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/jqxnavigationbar.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxNavigationBar.
    $(“#jqxNavigationBar”).jqxNavigationBar({ width: 300, expandMode: ‘multiple’, expandedIndexes: [2, 3]});
    });
    </script>
    </head>
    <body>
    <div style=’width: 300px;’ id=’jqxWidget’>
    <div id=”jqxNavigationBar”>
    <div>
    <div style=’margin-top: 2px;’>
    <div style=’float: left;’>
    Mail</div>
    <div style=’margin-left: 4px; float: left;’>
    Mail</div>
    </div>
    </div>
    <div>

    </div>
    <div>
    <div style=’margin-top: 2px;’>
    <div style=’float: left;’>
    Mail</div>
    <div style=’margin-left: 4px; float: left;’>
    Contacts</div>
    </div>
    </div>
    <div>

    </div>
    <div>
    <div style=’margin-top: 2px;’>
    <div style=’float: left;’>
    Mail</div>
    <div style=’margin-left: 4px; float: left;’>
    Tasks</div>
    </div>
    </div>
    <div>

    </div>
    <div>
    <div style=’margin-top: 2px;’>
    <div style=’float: left;’>
    Mail</div>
    <div style=’margin-left: 4px; float: left;’>
    Notes</div>
    </div>
    </div>
    <div>

    </div>
    </div>
    </div>
    </body>
    </html>

    Navigation bar Color Change #69485

    pepe
    Participant

    sorry I was wrong and not as remove

    Navigation bar Color Change #69505

    Nadezhda
    Participant
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.