jQuery UI Widgets Forums Navigation Tabs Issue with Tabs inside Tabs

This topic contains 6 replies, has 4 voices, and was last updated by  stefano969 9 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Issue with Tabs inside Tabs #2898

    Hi,

    I’m facing an issue when I place a tab control inside another tab control.
    I want subscribe to ‘selected’ event of the outer tab, which works fine.
    But, the event is triggered even if any of the inner tab is selected.

    Here is my code :
    ———————————————————————————————————-

    Tab 1
    Tab 2
    Tab 3

    Tab 1 Inner
    Tab 2 Inner
    Tab 3 Inner

    Tab 1 Inner Content

    Tab 2 Inner Content

    Tab 3 Inner Content

    Tab 2 Content

    Tab 3 Content

    function loadInnerTabs() {
    $(‘#jqxTabsInner’).jqxTabs({
    width: 400,
    theme: ‘darkblue’
    });
    }
    function loadMainTabs() {
    $(‘#jqxtabs’).jqxTabs({
    width: 600,
    theme: ‘darkblue’
    });
    $(‘#jqxtabs’).bind(‘selected’, function (event) {
    //alert(event.args.sender);
    var selectedItem = $(‘#jqxtabs’).jqxTabs(‘selectedItem’);
    var clickedItem = event.args.item;
    switch (clickedItem) {
    case 0:
    alert(‘Tab 1 selected!’);
    break;
    case 1:
    alert(‘Tab 2 selected!’);
    break;
    }
    });
    }
    loadMainTabs();
    loadInnerTabs();

    ———————————————————————————————————-

    Please help.

    Issue with Tabs inside Tabs #2917

    Peter Stoev
    Keymaster

    Hi Dattaram,

    This is expected behavior because by using the ‘$(“#jqxtabs’).bind method, you are actually binding to the ‘selected’ event of the DOM element with id = ‘jqxtabs’ and its sub-elements i.e by calling this line $(“#jqxtabs’).bind, you will trigger the ‘selected’ event in all inner jqxTabs. The solution is to check the ‘Id’ of the target element when the callback function is called.

    Here’s the solution:

    <!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.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    // Create jqxTabs.
    $('#Tab').jqxTabs({ width: 580, height: 200 });
    $('#subTab').jqxTabs({ width: 480, height: 100 });
    $('#Tab').bind('selected', function (event) {
    if (event.target.id == 'Tab') {
    // Do Something.
    }
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='Tab'>
    <ul>
    <li style="margin-left: 30px;">Tab 1</li>
    <li>Tab 2</li>
    </ul>
    <div>
    <div style="margin: 10px;" id="subTab">
    <ul>
    <li style="margin-left: 30px;">Sub Tab 1</li>
    <li>Sub Tab 2</li>
    </ul>
    <div>
    Sub Tab Content 1
    </div>
    <div>
    Sub Tab Content 2
    </div>
    </div>
    </div>
    <div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Issue with Tabs inside Tabs #57525

    bargavi
    Participant

    Hello!

    While creating tabs inside main tab. Am facing problem like, content in the main tab is displayed in all the next tabs. And nothing is displayed in the main tab in which i created inner tabs. So, can you help me out from this.

    Issue with Tabs inside Tabs #57529

    Peter Stoev
    Keymaster

    Hi bargavi,

    For adding widgets inside jqxTabs, please look at the Integration with other widgets demo – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?arctic

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Issue with Tabs inside Tabs #57610

    bargavi
    Participant

    Hi Peter,

    Thanks for the example. I want an example where there are inner tabs in a tab. That is there will be main tabs and will have inner tabs and the innertabs will have other components.

    Thanks in advance.

    Bargavi.

    Issue with Tabs inside Tabs #57612

    Peter Stoev
    Keymaster

    Hi bargavi,

    The process of adding an inner tab is the same as adding a Grid or Chart as shown in the sample I pointed you out.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Issue with Tabs inside Tabs #78596

    stefano969
    Participant

    Hi i have a problem with tabs inside tabs, because the subtab identified by id subtab1 it does not be displayed as a jqxtabs.

    This is my code:

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../jquery-1.11.0.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxtabs.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    // Create jqxTabs.
    $(‘#tab’).jqxTabs({ width: 1100, height: 800 });
    $(‘#subtab0’).jqxTabs({ width: 480, height: 100 });
    $(‘#subtab1′).jqxTabs({ width: 480, height: 100 });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”tab”>

    • tab1
    • tab2
    • tab3

    <div>content tab1</div>
    <div>
    <div id=”subtab0″>

    • subtab0_1
    • subtab0_2
    • subtab0_3

    <div>content subtab0_1</div>
    <div>content subtab0_2</div>
    <div>content subtab0_3</div>
    </div>
    </div>
    <div>
    <div id=”subtab1″>

    • subtab1_1
    • subtab1_2
    • subtab1_3

    <div>content subtab1_1</div>
    <div>content subtab1_2</div>
    <div>content subtab1_3</div>
    </div>
    </div>
    </div>
    </body>
    </html>

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

You must be logged in to reply to this topic.