jqxTabs Menu

[EminYasarturkParticipant]

Hello everybody,

I have a question. I researched forums but i didn’t my question.

`$(document).ready(function () {
if(window.tabMenu)
{
var newLi = $(“<li />”,{
html : tabInfo // This is coming from window.tabMenu
});
$(“#mainUl”).append(newLi);
var newDiv = $(“<div />”,{
id : ‘content’+i,
html : ‘<img src=”../../../include/images/ajax-loader.gif” />’
});
$(“#jqxTabs”).append(newDiv);
var defaultPage = htmlPage; // This is coming from window.tabMenu
}

$(‘#jqxTabs’).jqxTabs({ width: ‘100%’, height: 500});
$(‘#jqxTabs’).jqxTabs(‘focus’);
var loadPage = function (url, tabIndex) {
$.get(url, function (data) {
$(‘#content’ + tabIndex).html(data);
});
}
loadPage(‘../../’+defaultPage, 1);
$(‘#jqxTabs’).on(‘selected’, function (event) {
var pageIndex = event.args.item + 1;
loadPage(‘../../’+parametricPage,pageIndex); // parametricPage is coming from window.tabMenu
});
});`
<div id=’jqxWidget’>
<div id=’jqxTabs’>
<ul id=”mainUl” style=”margin-left:10px;”>
</div>
</div>

This code create dynamic tabs menu. It is working. I wanna add tab group.

For example I have a 10 tabs. I will show 5 tabs and other tabs(6,7,8,9,10) will be ‘Other’ tab.

Can I group tabs in one tab?

[NadezhdaParticipant]

Hello EminYasarturk,

I would suggest you to initialize jqxDocking in ‘Other’ tab(jqxTabs). If this suggestion does not help you, please, provide us with more information about the second part of tabs(tabs number 6-10). What will be the content of latest tabs?

Best Regards,
Nadezhda

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

[EminYasarturkParticipant]

Hi Nadezhda,

Firstly thank you for your suggestion.

All code is below. I use a parameter which is window.tabMenu. This can be change in other page. My code is working.
According to window.tabMenu, <li> and <div> tags create. Contents of divs are coming from Ajax pages which is describe in window.tabMenu parameter.

I told that i wanna group some tabs. Becase my project will be responsive. When i resize web page , tabs should be in a group. Is it possible

<script>
window.tabMenu = 'Detail:detail.html; Address:address.html;';
	$(document).ready(function () {
		if(window.tabMenu)
		{
			for(i=1;i<=list_len(window.tabMenu,';');i++)
			{
				var newLi = $("<li />",{
					html : list_getat(list_getat(window.tabMenu,i,';'),1,':')
				});
				$("#mainUl").append(newLi);
				var newDiv = $("<div />",{
					id : 'content'+i,
					html : '<img src="../../../include/images/ajax-loader.gif" />'
					});
				$("#jqxTabs").append(newDiv);
				var defaultPage = list_getat(list_getat(window.tabMenu,1,';'),2,':');
			}
			
			$('#jqxTabs').jqxTabs({ width: '100%', height: 500});
			$('#jqxTabs').jqxTabs('focus');
			var loadPage = function (url, tabIndex) {
				$.get(url, function (data) {
					$('#content' + tabIndex).html(data);
				});
			}
			loadPage(defaultPage, 1);
			$('#jqxTabs').on('selected', function (event) {
				var pageIndex = event.args.item + 1;
				loadPage(list_getat(list_getat(window.tabMenu,pageIndex,';'),2,':'),pageIndex);
			});
		}
	});
</script>

<div id='jqxWidget'>
    <div id='jqxTabs'>
	<ul id="mainUl" style="margin-left:10px;"></ul>
    </div>
</div>

[NadezhdaParticipant]

Hi EminYasarturk,

Have you checked the demo Fluid Size? I think it may help you achieve your requirement.

Best Regards,
Nadezhda

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

[Author]

Posts