jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Put a jqxTree inside a NavigationBar?

Tagged: , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  realtek 10 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Put a jqxTree inside a NavigationBar? Posts
  • April 9, 2014 at 4:45 pm Put a jqxTree inside a NavigationBar? #52807

    realtek
    Participant

    Hi,

    Is it possible to put a jqxTree inside a Navigation Bar? if not, could I put it inside a panel or something first?

    Thanks

    April 10, 2014 at 5:06 am Put a jqxTree inside a NavigationBar? #52831

    Dimitar
    Participant

    Hello realtek,

    Here is an example. Note the use of initContent for initializing other widgets in the navigation bar’s content.

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxnavigationbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
    <!-- TESTING -->
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [{
                label: "Item 1",
                expanded: true,
                items: [{
                    label: "Item 1.1"
                }, {
                    label: "Item 1.2",
                    selected: true
                }]
            }, {
                label: "Item 2"
            }, {
                label: "Item 3"
            }, {
                label: "Item 4",
                items: [{
                    label: "Item 4.1"
                }, {
                    label: "Item 4.2"
                }]
            }, {
                label: "Item 5"
            }, {
                label: "Item 6"
            }, {
                label: "Item 7"
            }];

            $("#jqxnavigationbar").jqxNavigationBar({ width: 300, height: 300, initContent: function (index) {
                if (index == 1) {
                    $('#jqxTree').jqxTree({ source: source, height: '100%', width: '100%' });
                };
            }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxnavigationbar'>
        <div>
            Pages</div>
        <div>
            <div id='jqxlistbox'>
            </div>
            <form id="addPageForm" action="./">
            <input type="text" id="addPageInput" />
            </form>
        </div>
        <div>
            Tree</div>
        <div>
            <div id='jqxTree' style="border: none;">
            </div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Dimitar

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

    April 11, 2014 at 10:56 am Put a jqxTree inside a NavigationBar? #52939

    realtek
    Participant

    Thank you Dimitar, perfect!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.