TabStrip is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 20 August 2014
When creating web pages which requires tabbed user interface, in most cases tabs are already created with their title and content set in HTML code of your web page. However, there may be cases when we need to open new tabs on the fly or load a set of tabs on demand from a remote data source. In following section we will show you how to bind data to a TabStrip widget in jQuery, using a different JSON files as a remote data source.
At first we need to create our JSON files. Although we can create a complex tabs, showing icon, custom buttons, hyperlinks etc, to simplify our example we will create a small data structure, only showing a tab title and short description as their content.
In our first JSON file we are organizing our tabstrip to show tabs on left side with horizontal orientation. Here is how our data structure looks like:
[
{ "text": "Dairy", "content": "The Dairy content" },
{ "text": "Fruits", "content": "The Fruits content" },
{ "text": "Grains", "content": "The Grains content" },
{ "text": "Meat", "content": "The Meat content" },
{ "text": "Sweets", "content": "The Sweets content" },
{ "text": "Vegetables", "content": "The Vegetables content" },
{ "text": "Water", "content": "The Water content" }
]
As you can see our data is fairly simple. We can add additional fields like id, icon, headerContent, or some custom fields, depending on requirements of our web application.
In our second JSON file we are organizing our tabstrip to show tabs on bottom side with where each tab header contains icon and text shown in two lines. In this case our data structure looks like this:
[
{ "headerContent": "<div class='custom-header'><img src='images/users.png' /><br/><span>CONTACTS</span></div>", "content": "The content of CONTACTS tab" },
{ "headerContent": "<div class='custom-header'><img src='images/message.png' /><br/><span>MAIL</span></div>", "content": "The content of MAIL tab" },
{ "headerContent": "<div class='custom-header'><img src='images/calendar.png' /><br/><span>CALENDAR</span></div>", "content": "The content of CALENDAR tab" },
{ "headerContent": "<div class='custom-header'><img src='images/settings.png' /><br/><span>SETTINGS</span></div>", "content": "The content of SETTINGS tab" }
]
You can replace the value of content field with some custom HTML code with your own custom CSS styles. The TabStrip widget will accept any custom generated content and adjust its layout to accommodate it.
Related: jQuery Tabs with Multi Line Text
Now that we have our data structures created, we can use them to populate our TabStrip widget on demand using the jQuery getJSON method.
$(document).ready(function() {
var $tab = $('#tabstrip').tabstrip();
$.getJSON("data.json", function(data){
// Clear the content of TabStrip
$tab.tabstrip('clearTabs');
// Load data from JSON file into the TabStrip
$.each(data, function(id, tab){
$tab.tabstrip('addTab', tab);
});
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link rel="stylesheet" href="css/integralui.tabstrip.css" />
<link rel="stylesheet" href="css/themes/theme-blue.css" />
<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>
<script type="text/javascript" src="js/jquery.integralui.tabstrip.min.js"></script>
</head>
<body>
<div id="tabstrip" class="widget"></div>
</body>
</html>
<style type="text/css">
.widget
{
width: 300px;
height: 300px;
}
</style>
When data is successfully loaded from JSON file, we are using the addTab method to create and add a new tab object for each object found in our remote data source. More information on using add/remove methods you can find at How to Dynamically Create New Tabs in jQuery article.
As our demonstration above shows, whenever a different data source is chosen, the TabStrip widget is filled with tabs on demand, using the specification in data structures. In the moment our data structures only consists data for the content of TabStrip, changing its properties is done through code.