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: 09 September 2014
Normally tabs in TabStrip widget are aligned in one line, close to one another and connected with their content panel. You can modify this appearance and create a new layout for tab strip where tabs will look and act like radio buttons. The below demonstration shows how this look like in action, and the following sections give explanation how to create this in your web applications using jQuery and CSS3 styles.
To make tab appear like radio button we will modify existing CSS styles. Each part of TabStrip widget has a corresponding CSS style which you can modify in your code. Here are some of these classes:
At first let’s make all tabs look wider:
<style type="text/css">
.i-ui-tabstrip-tab-header
{
padding: 2px 12px;
}
</style>
Because we want all tabs to behave like radio buttons, we need to set the border for selected tab (which by default is hidden). All other tabs already have their borders set. We are setting the color of bottom border for selected tab to match the color for other border sides. Depending on the theme currently used, a different color needs to be set. In our case we are using the green theme
<style type="text/css">
.i-ui-tabstrip-tab-selected-top
{
border-bottom-color: gray;
}
</style>
So far we have all tabs set with borders on each side, but because there is no space between them, some tabs look like that they have a border with double width. To change this we need to use CSS selectors so that middle tabs don’t have a border on their right side, and their border corners are all squared. As for first and last tab, we want to have borders with round corners:
<style type="text/css">
.i-ui-tabstrip-tab-header:not(:first-child):not(:last-child)
{
border-radius: 0 0 0 0;
border-right-color: transparent;
}
.i-ui-tabstrip-tab-header:first-child
{
border-radius: 7px 0 0 7px;
border-right-color: transparent;
}
.i-ui-tabstrip-tab-header:last-child
{
border-radius: 0 7px 7px 0;
}
</style>
Finally we want to have a distance between the content panel and our tabs, so their appearance is more like buttons. Because all content panels are represented with a <div> tag, we are using a child CSS selector to apply changes only to content panels:
<style type="text/css">
.i-ui-tabstrip > div:not(.i-ui-tabstrip-nav-buttons)
{
margin: 10px 0 0 0;
border-radius: 7px;
}
</style>
In our case the distance between tabs and their content panel is set to 10 pixels.
Now that we have set the look of tabs to be similar to radio buttons, we need to add some tabs to our TabStrip. At first we need to create an instance of TabStrip widget using jQuery. We will set all tabs to align in center of tab strip and with no space between them:
<style type="text/css">
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip({
alignment: "center",
tabSpacing: 0
});
});
</style>
<!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-green.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: 350px;
height: 250px;
}
</style>
In our example each tab header will contain only an image, and their content panel will show random text. You can easily add additional content if you want, either using jQuery or HTML5. In our case we will create the content of TabStrip using jQuery.
// Create a tab to look like button with image in its header and with content panel showing text
var getTabContent = function(index){
var tab = {}
switch (index){
case 0:
tab = {
image: "../images/users.png",
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 1:
tab = {
image: "../images/message.png",
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 2:
tab = {
image: "../images/calendar.png",
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;
case 3:
tab = {
image: "../images/settings.png",
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 tab;
}
// Create a template for tab
var generateTab = function(index){
var tabContent = getTabContent(index);
var tab = {
headerContent: "<div class='custom-header'>" +
"<img src='" + tabContent.image + "' width='24px' height='24px' />" +
"</div>",
content: tabContent.content
}
return tab;
}
And finally, we will use built-in method to suspend and resume the layout of TabStrip. This is not necessary if we want to add several tabs, but for adding many tabs it is good to maintain high performance, so that DOM is refreshed only ones:
// To avoid refreshing the DOM every time a new tabs is added
// Suspend the TabStrip layout to increase performance
$tabCtrl.tabstrip("suspendLayout");
// Add tabs to the TabStrip
for (var i = 0; i < 4; i++)
$tabCtrl.tabstrip("addTab", generateTab(i));
// Resume and update the layout of TabStrip
$tabCtrl.tabstrip("resumeLayout");
As it is shown in above demonstration, tabs act and look like radio buttons, and by pressing each tab a corresponding content panel appears.