Blogs

In this blog post, we will create a jqxTabs widget with 3 tabs. The content of each Tab will be loaded dynamically with Ajax. – Add the JavaScript and CSS files.

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>

– Add the HTML structure.

<div id='jqxTabs'>
	<ul>
		<li style="margin-left: 30px;">Node.js</li>
		<li>JavaServer Pages</li>
		<li>Active Server Pages</li>
	</ul>
	<div id="content1">
		Loading...
	</div>
	<div id="content2">
		Loading...
	</div>
	<div id="content3">
		Loading...
	</div>
</div>

– Create the Tabs widget by selecting the ‘jqxTabs’ DIV tag and calling the jqxTabs constructor function.

$('#jqxTabs').jqxTabs({ width: 580, height: 200 });

– Implement the Ajax loading. The loadPage function in the code snippet below accepts 2 parameters – the web page’s url that we will load via Ajax and the index of the tab in the jqxTabs. The jQuery ‘get’ function is used for getting the data from the server. You can read more about the jQuery ‘get’ function here: http://api.jquery.com/jQuery.get. After getting the data, we set the Tab’s content. The loadPage function is called after the initialization of the jqxTabs widget and when a tab is selected. The sample pages that we load are named ‘ajax1.htm, ajax2.htm and ajax3.htm’.

var loadPage = function (url, tabIndex) {
  $.get(url, function (data) {
	$('#content' + tabIndex).html(data);
  });
}
loadPage('pages/ajax1.htm', 1);
$('#jqxTabs').bind('selected', function (event) {
  var pageIndex = event.args.item + 1;
  loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
});