jQWidgets Forums

Tagged: accordion collapsible list navigationbar

This topic contains 4 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 1 month ago.

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

Author

Multiple levels Posts
May 13, 2012 at 12:13 am Multiple levels #4107

Kynao
Participant

Can jqxNavigationBar become a little more sophisticated by having multiple levels ?

I send you an image illustration by using the support email but still try to explain by text :

Actually jqxNavigationBar http://www.jqwidgets.com/jquery-widgets-demo/#demos/jqxnavigationbar/defaultfunctionality.htm
is an accordion having one level of entry.

While the idea is not to reproduce the different levels of a treeview hierarchy, we could usefully have 3 of them by using backgroud color and/or indentation to make the distinction between entries.

This is useful when a treeview is not needed or wanted for building collapsible lists with a few levels.

May 14, 2012 at 5:37 am Multiple levels #4129
Peter Stoev
Keymaster
Hi Kynao,

Here’s how to crate nested Navigation Bars:

1. Create Navigation Bar
2. Inside of the content of its items, add another Navigation Bar.
```
<!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.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            // Create jqxNavigationBar
            $("#jqxNavigationBar").jqxNavigationBar({ width: 350, height: 350, sizeMode: 'fitAvailableHeight', theme: theme });
            $("#jqxNavigationBar2").jqxNavigationBar({ width: 300, height: 250, sizeMode: 'fitAvailableHeight', theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="float: left;">
        <div style='overflow: hidden;' id='jqxNavigationBar'>
            <div>Header 1</div>          
            <div>
                <div style="margin: 20px;" id="jqxNavigationBar2">
                    <div>Sub Header 1</div>
                    <div>Sub Content 1</div>
                    <div>Sub Header 2</div>
                    <div>Sub Content 2</div>
                </div>
               </div>          
            <div>Header 2</div>          
            <div>Content 2</div>          
        </div>
    </div>
</body>
</html>
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
May 14, 2012 at 9:17 pm Multiple levels #4145

Kynao
Participant

Excellent, thanks you Peter

April 11, 2013 at 10:04 pm Multiple levels #19087

d_l
Member

I followed the helpful advice in this post .. nesting jqxNavigationBar inside a content div in a parent jqxNavigatorBar.
The parent jqxNavigationBar is itself in a panel in a parent jqxDockPanel.

I had problems with no jqxNavigationBar rendering.
On retracing steps I found that to make it work I had to delete the attribute

sizeMode: ‘fitAvailableHeight’

I don’t know why this attribute doesn’t work inside jqxDockPanel panel. Version jqxwidgets 2.8.

This post is just for information since the nesting jqxNavigationBar seems to be working now in first tes.

April 12, 2013 at 7:25 am Multiple levels #19105

Peter Stoev
Keymaster

Hi d_l,

That post is from 1 year ago. There are multiple changes since then and some of them are breaking. Before using code from previous versions, I suggest you to take a look at the widget’s API Documentation and also the Release History.

Best Regards,
Peter Stoev

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

Posts

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

You must be logged in to reply to this topic.