jQWidgets Forums

Tagged: jqxnavigationbar

This topic contains 5 replies, has 3 voices, and was last updated by Prabhakaran R 10 years, 5 months ago.

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

Author

Enbed other jqWidgets into Content Posts

July 17, 2012 at 10:22 pm Enbed other jqWidgets into Content #6068

fgaonet

Member

Instead of enbeding a list into the Content div, I need to enbed a jqxListBox. I tried the following:

Header 1

Header 2

Content 2

while do $(“#qxListBox”).jqxListBox(……), I got an error: “Invalid structure of the Navigation bar!”.

I like to show/hide the ListBox by expand/collapse the “Header 1”. What is the best way to do it?

Thanks,

July 17, 2012 at 10:39 pm Enbed other jqWidgets into Content #6069

fgaonet

Member

I don’t know how to use this text editor. My code can’t be pasted on. Let me try it again:

Instead of enbeding a list into the Content div, I need to enbed a jqxListBox. I tried to replaced the “Content 1″ with another div which has id=”jqxListBox”, as the following: (I am not sure what will show here. Please first help me how to type “less than” and “great than” on this text editor!!)

“

Header 1

Content 2

”

while do $(“#jqxListBox”).jqxListBox(……), I got an error: “Invalid structure of the Navigation bar!”.

I like to show/hide the ListBox by expand/collapse the “Header 1″. What is the best way to do it?

Thanks,

July 17, 2012 at 10:47 pm Enbed other jqWidgets into Content #6070

fgaonet

Member

Instead of enbeding a list into the Content div, I need to enbed a jqxListBox. I tried the following:

<div id='jqxnavigationbar'>
    <!--Header-->
    <div>
        Header 1</div>
    <!--Content-->
    <div>
        <div id='jqxListBox'></div>
    </div>
    <!--Header-->
    <div>
        Header 2</div>
    <!--Content-->
    <div>
        Content 2
    </div>
</div>

while do $(“#qxListBox”).jqxListBox(……), I got an error: “Invalid structure of the Navigation bar!”.

I like to show/hide the ListBox by expand/collapse the “Header 1″. What is the best way to do it?

Thanks,

July 18, 2012 at 11:20 am Enbed other jqWidgets into Content #6107

Peter Stoev

Keymaster

Hi fgaonet,

I prepared a small sample for you with jqxNavigationBar and jqxListBox inside a navigation bar item.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <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" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // Create jqxNavigationBar
            $("#jqxNavigationBar").jqxNavigationBar({ width: 400, height: 420, sizeMode: 'fitAvailableHeight', theme: theme });
            var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];
            // Create a jqxListBox
            $("#jqxListBox").jqxListBox({ selectedIndex: 3, source: source, width: '100%', height: 360, theme: theme });
            $("#jqxNavigationBar").bind('expandedItem', function () {
                $("#jqxListBox").jqxListBox('refresh');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxNavigationBar'>
        <!--Header-->
        <div>
            Header 1</div>
        <!--Content-->
        <div>
            Content 1
        </div>
        <!--Header-->
        <div>
            Header 2</div>
        <!--Content-->
        <div>
            <div id="jqxListBox">
            </div>
        </div>
    </div>
    </div>
</body>
</html>

Hope it helps you.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 18, 2012 at 6:25 pm Enbed other jqWidgets into Content #6120

fgaonet

Member

Peter:

Thank you for your code. It works just as my expected! However, when I make a little modify, I got some unexpected behaviors.

1. I like the ListBox open in the initial, so I added {expandedIndexes: [1],} into your code:

$(“#jqxNavigationBar”).jqxNavigationBar({ width: 400, height: 420, sizeMode: ‘fitAvailableHeight’, expandedIndexes: [1], theme: theme });

When I run it, it is still open the first content, instead of the listbox.

2. I replaced “sizeMode: ‘fitAvailableHeight’,” with “ expandMode: ‘multiple’,”, and it works fine.

3. Now, I added a button under the ListBox. The NavigationBar only show a little part of the ListBox. Here is my changes on your code:

$("#jqxNavigationBar").jqxNavigationBar({ width: 400, height: 420, expandMode: 'multiple', expandedIndexes: [1], theme: theme });
......
            <div id="jqxListBox">
            </div>
            <input type="button" id="btn" />

Any idea?

Thanks again!

December 19, 2014 at 1:51 pm Enbed other jqWidgets into Content #64491

Prabhakaran R

Participant

I couldn’t find gettheme.js in latest release.
Can you please post the updated sample.

Author

Posts

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

You must be logged in to reply to this topic.