Multiple tabsets on one page? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: initialization, initialize, jqxTabs, multiple, Tabs, WordPress

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

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

Author

Multiple tabsets on one page? Posts
November 4, 2013 at 9:40 pm 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

November 5, 2013 at 6:29 am 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/
November 5, 2013 at 10:13 pm 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

November 6, 2013 at 8:03 am 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/

November 6, 2013 at 3:11 pm 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

November 6, 2013 at 3:26 pm 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/
Author

Posts

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

You must be logged in to reply to this topic.