jQuery UI Widgets Forums Navigation Tabs Multiple tabsets on one page?

This topic contains 5 replies, has 2 voices, and was last updated by  Dimitar 10 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Multiple tabsets on one page? #31899

    colingoldberg
    Participant

    Hi,

    Does jqwidgets support multiple ‘tabsets’ on one page? Currently I am trying to place three sets of tabs, as in the following example, and it only seems to activate the first one. Is there a way to activate all of them?

    $(“#tabs_rule_options”).jqxTabs({ height: ‘100%’, width: ‘100%’});
    $(“#tabs_rule_triggers”).jqxTabs({ height: ‘100%’, width: ‘100%’});
    $(“#tabs_rule_actions”).jqxTabs({ height: ‘100%’, width: ‘100%’});

    Does jqwidgets support multiple ‘tabsets’ on one page? Currently I am trying to place three sets of tabs, as in the following example, and it only seems to activate the first one. Is there a way to activate all of them?

    [div id=”tabs_rule_options”]
    [ul]
    [li]Name[/li]
    [li]Evaluation Mode[/li]
    [li]Operating Mode[/li]
    [/ul]
    [div id=”rule_options_tab-0″]
    [p]Name[/p]
    [/div]
    [div id=”rule_options_tab-1″]
    [p]Evaluation Mode[/p]
    [/div]
    [div id=”rule_options_tab-2″]
    [p]Operating Mode[/p]
    [/div]
    [/div]

    [div id=”tabs_rule_triggers”]
    [ul]
    [li]Channel Store[/li]
    [/ul]
    [div id=”rule_triggers_tab-0″]
    [p]Trigger Channel Store[/p]
    [/div]
    [/div]

    [div id=”tabs_rule_actions”]
    [ul]
    [li]Channel Store[/li]
    [/ul]
    [div id=”rule_actions_tab-0″]
    [p]Action Channel Store[/p]
    [/div]
    [/div]

    Any help is appreciated.

    Colin G

    • This topic was modified 10 years, 7 months ago by  colingoldberg.
    Multiple tabsets on one page? #31911

    Dimitar
    Participant

    Hello Colin G,

    Here is how to initialize all the tabs:

    <!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.10.2.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 () {
    $('#tabs_rule_options').jqxTabs({ width: 350, height: 200, position: 'top' });
    $('#tabs_rule_triggers').jqxTabs({ width: 350, height: 200, position: 'top' });
    $('#tabs_rule_actions').jqxTabs({ width: 350, height: 200, position: 'top' });
    });
    </script>
    </head>
    <body class='default'>
    <div id="tabs_rule_options">
    <ul>
    <li>Name</li>
    <li>Evaluation Mode</li>
    <li>Operating Mode</li>
    </ul>
    <div id="rule_options_tab-0">
    <p>
    Name</p>
    </div>
    <div id="rule_options_tab-1">
    <p>
    Evaluation Mode</p>
    </div>
    <div id="rule_options_tab-2">
    <p>
    Operating Mode</p>
    </div>
    </div>
    <div id="tabs_rule_triggers">
    <ul>
    <li>Channel Store</li>
    </ul>
    <div id="rule_triggers_tab-0">
    <p>
    Trigger Channel Store</p>
    </div>
    </div>
    <div id="tabs_rule_actions">
    <ul>
    <li>Channel Store</li>
    </ul>
    <div id="rule_actions_tab-0">
    <p>
    Action Channel Store</p>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Multiple tabsets on one page? #31980

    colingoldberg
    Participant

    The only real difference I see from what I originally posted is the “position: ‘top'” setting, and this is the default value for position anyway.

    What I did not mention before is that I had used a function to contain the initialization, and this seems to be the reason why it did not work for me before (it works when I do not use a function).

    ie. – this did not work

    function initializeTabs(selector) {
    $(selector).jqxTabs({ width: 350, height: 200, position: ‘top’ });
    }

    initializeTabs(‘#tabs_rule_options’);
    initializeTabs(‘#tabs_rule_triggers’);
    initializeTabs(‘#tabs_rule_actions’);

    Colin G

    Multiple tabsets on one page? #32025

    Dimitar
    Participant

    Hi Colin G,

    Please make sure that your code is called within the $(document).ready() function.

    Best Regards,
    Dimitar

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

    Multiple tabsets on one page? #32051

    colingoldberg
    Participant

    Hi Dimitar,

    The context of my code will be within WordPress plugin settings. Given that this is not a ‘standalone’ page, would the $(document).ready() function still apply?

    Colin G

    Multiple tabsets on one page? #32053

    Dimitar
    Participant

    Hi Colin G,

    You can insert $(document).ready() in the head section of your site, in the WordPress file header.php.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.