jQWidgets Forums

Tagged: jQuery Accordion, jquery navigation bar, jqwidgets accordion, jqwidgets navigationbar

This topic contains 8 replies, has 2 voices, and was last updated by carlo 11 years, 3 months ago.

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

Author

Initial no expand and collapse when clicking an item again Posts

February 1, 2014 at 7:58 pm Initial no expand and collapse when clicking an item again #48789

carlo

Participant

Hi Peter,

I want to display alarm messages with the NavigationBar. An item should only expand to show the alarm details, if the user clicks the item and should collaps if the user clicks again the same item.
So what I need:
1. No initial expanding
2. Collapsing an item by clicking the item again

If this is not possible with the NavigationBar, could you recommend another jqw control ?

Best Regards
Carlo

February 3, 2014 at 4:19 pm Initial no expand and collapse when clicking an item again #48862

Peter Stoev

Keymaster

Hi Carlo,

You can achieve that by setting the expandMode property to ‘toggle’. Example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnavigationbar/toggle.htm?arctic

Best Regards,
Peter Stoev

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

February 3, 2014 at 6:22 pm Initial no expand and collapse when clicking an item again #48867

carlo

Participant

Hi Peter,

I should read the docs more carefully.
We have to remove/add/change itmes on the fly with special formating. May the add/insert/update methods header and content parameter contain html or only plain text?

Best Regards
Carlo

February 4, 2014 at 7:42 am Initial no expand and collapse when clicking an item again #48904

Peter Stoev

Keymaster

Hi Carlo,

It could be HTML String, not just a plain Text.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The sample demonstrates the "toggle" mode of jqxNavigationBar. Click on any item to toggle its state.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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: 430, expandMode: 'toggle' });
            $("#jqxNavigationBar").jqxNavigationBar('add', '<b>Header</b>', '<i>Content</i>');
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="float: left;">
        <div id='jqxNavigationBar'>
            <!--Header-->
            <div>
                Early History of the Internet</div>
            <!--Content-->
            <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>
            <!--Header-->
            <div>
                Merging the networks and creating the Internet</div>
            <!--Content-->
            <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>
            <!--Header-->
            <div>
                Popular Internet services</div>
            <!--Content-->
            <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>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 5, 2014 at 2:46 pm Initial no expand and collapse when clicking an item again #49013

carlo

Participant

Hi Peter,

1. How can we remove all items before adding new ones with ‘add’ ?
2. It is not possible to scroll the navbar on a iPhone without expanding the item where one starts scrolling.

Best regards
Carlo

February 5, 2014 at 5:11 pm Initial no expand and collapse when clicking an item again #49025

Peter Stoev

Keymaster

Hi Carlo,

1. May be it would be better to remove the widget and create it again if you want to remove all of its items. If you want to remove items, you can also use the “remove” method.
2. The NavigationBar does not support scrolling. It can have Expandable Headers and Content, but there’s no scrollbar in this widget.

Best Regards,
Peter Stoev

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

February 5, 2014 at 6:36 pm Initial no expand and collapse when clicking an item again #49028

carlo

Participant

Hi Peter,

which jqw control do you recommend for displaying a dynamic list of alarms ? It should be touch friendly and capable of displaying alarm details on click.

Best Regards,
Carlo

February 5, 2014 at 8:27 pm Initial no expand and collapse when clicking an item again #49033

Peter Stoev

Keymaster

Hi Carlo,

The NavigationBar is touch-friendly. When you touch a Header, the content is either expanded or collapsed. That’s the expected behavior. If you want to display dynamic items, then you will need to dynamically add and remove items. Example: http://jsfiddle.net/XGGtH/

Best Regards,
Peter Stoev

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

February 6, 2014 at 8:11 am Initial no expand and collapse when clicking an item again #49064

carlo

Participant

Hi Peter,

we tried swiping the NavigationBar and the ListMenue. Swiping the NavigationBar on touch devices is not possible.Put 30 items into NavigationBar so you have something to scroll and try to swipe the list up and down. Scrolling does happen, but the list item where you start swiping will be expanded. The ListMenue does a better job in swiping, but does mark multiples list items when swiping.

Best Regards
Carlo

Author

Posts

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

You must be logged in to reply to this topic.