jQuery UI Widgets › Forums › Navigation › Tabs › Issue with Tabs inside Tabs
Tagged: jQuery Tabs, nested tabs, tab control, Tabs, TabStrip
This topic contains 6 replies, has 4 voices, and was last updated by stefano969 9 years, 2 months ago.
-
Author
-
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 3Tab 1 Inner
Tab 2 Inner
Tab 3 InnerTab 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.
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 StoevjQWidgets Team
http://www.jqwidgets.comHello!
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.
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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.
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 StoevjQWidgets Team
http://www.jqwidgets.comHi 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> -
AuthorPosts
You must be logged in to reply to this topic.