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: 16 September 2014
TabStrip widget allows you to create custom tabs where each tab header can contain any custom HTML elements arranged in custom layouts. Beside text, for example you can put checkbox, button, image, progressbar or other common elements. For purpose of this example we will create tabs that contain a checkbox and a label, and whenever checkbox is clicked, the tab will become enabled or disabled.
There are two ways to create tabs with custom content in their header, by using:
In both cases the result is the same, a tab that contains objects arranged in custom layouts. In our example we will use jQuery.
At first we need to create an instance of TabStrip widget. It requires a single <div> element with its id set to tabstrip and a code line where we will create a tabCtrl object that is linked to the element in the DOM:
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tabCtrl = $('#tabstrip').tabstrip();
});
<!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">
.tab-header
{
margin: 0;
padding: 0 2px;
}
.tab-header span
{
vertical-align: middle;
}
.tab-content
{
padding: 2px 5px 5px 5px;
}
input[type="checkbox"]
{
vertical-align: middle;
}
.widget
{
width: 300px;
height: 250px;
}
</style>
// Create the tab content
var generateTab = function(index){
var tab = {
headerContent: "<div class='tab-header'>" +
"<input class='tab-checkbox' type='checkbox' />" +
"<span>Tab " + index + "</span>" +
"</div>",
content: "<div class='tab-content'>" + getTabContent(index) + "</div>"
}
return tab;
}
var getTabContent = function(index){
var content = "";
switch (index){
case 2:
content = "Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum.";
break;
case 3:
content = "Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.";
break;
case 4:
content = "Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio. Mauris dictum, nisi eget consequat elementum, lacus ligula molestie metus, non feugiat orci magna ac sem. Donec turpis.";
break;
default:
content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.";
break;
}
return content;
}
As it can be seen from above code, there are two functions. The first one creates the whole tab object using the headerContent and content properties. The headerContent property holds a HTML generated content which will be displayed in tab header, and the content property holds a small paragraph which will be displayed in tab content panel. You can also put HTML elements inside tab content, but to simplify our example we will leave it just to text
Now that we have our template we can add as many tabs we want to have in our TabStrip. For this purpose we will use the built-in addTab method. We will also use the suspendLayout and resumeLayout methods (which in our case are not necessary), they are useful to maintain high performance of TabStrip widget when larger set of tabs is created.
// Suspend the TabStrip layout to increase performance
$tabCtrl.tabstrip("suspendLayout");
// Add tabs to the TabStrip
for (var i = 1; i <= 4; i++)
$tabCtrl.tabstrip("addTab", generateTab(i));
// Resume and update the layout of TabStrip
$tabCtrl.tabstrip("resumeLayout");
Finally we need to create a handle to change event of each check box element, so that whenever its value is changed a corresponding tab will become enabled or disabled. To locate the check box elements, we will use the jQuery class selector. Because each tab contains a check box, they have the same index value, so we can also easily locate the associated tab object in our TabStrip widget. For this purpose we will use the getCurrentList method, which returns an array of all tab objects currently visible.
Because check boxes are contained inside the tab element, we are also handling the mousedown event and preventing it from further propagation. Otherwise, whenever a checkbox is clicked, it will also select the tab to which it belongs. And we don’t want that, we just need to change the state of tab by changing the check box value.
// Get the list of all tabs present in TabStrip widget
var tabList = $tabCtrl.tabstrip("getCurrentList");
// Create a handle to the change event for all check boxes
$tabCtrl.find(".tab-checkbox").each(function(index){
$checkBox = $(this);
// By default make sure all check boxes are checked
$checkBox.prop('checked', true);
$checkBox.on({
"change": function(e){
var currentValue = $(this).prop('checked');
// Enable or Disable the tab based on value of its checkbox
if (index >= 0 && index < tabList.length){
var tab = tabList[index];
if (tab){
tab.enabled = currentValue;
// Update the TabStrip layout to apply the change
$tabCtrl.tabstrip("updateLayout");
}
}
},
// Handle the mousedown event to prevent further propagation of this event
"mousedown": function(e){
e.stopPropagation();
}
});
});
As it shown in above demonstration, all tabs contain a check box in their headers, which whenever is clicked, it will change the state of its parent tab to enabled or disabled. You may also notice that the current selection in TabStrip also changes. This is because the currently selected tab cannot be disabled and selected at the same time. It can only become disabled, when all visible tabs are also disabled.
When tab is disabled, it cannot process any event like clicks or hovering, also its content panel will appear disabled. This is not truly a disabled content panel, because it is a