LIDOR SYSTEMS

Advanced User Interface Controls and Components

jQuery Tabs with Multi Line Text

Created: 14 July 2014

By default TabStrip widget display tabs with their title in single line. Although you can add an icon to each tab, in some cases you may need to present additional info or to arrange the content of tab headers in different layouts. In following sections we will show you how to create tabs with content in multiple lines.

Tabs with Multiline Text

Each tab has a headerContent property which can accept any custom HTML5 code. You can arrange the content of tab header in any layout you want. For example:/p>

Tabs with Multi-Line Text in TabStrip jQuery
TabStrip is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

As it is shown on image above, each tab header contains text in two lines. For this purpose we are using the following template:

$(document).ready(function() {

// Create an instance of TabStrip widget

var $tabCtrl = $('#tabstrip').tabstrip({

alignment: "center",

tabSpacing: 2

});

 

// Create a template for tab header

var generateTab = function(index){

var tabHeader = getTabContent(index);

 

var tab = {

headerContent: "<div class='custom-header'>" + tabHeader.title + "<br/>" +

"<span>" + tabHeader.subtitle + "</span>" +

"</div>"

}

 

return tab;

}

 

var getTabContent = function(index){

var tabHeader = {}

 

switch (index){

case 0:

tabHeader = { title: "CONTACTS", subtitle: "customer list", image: "../images/users.png" }

break;

case 1:

tabHeader = { title: "MAIL", subtitle: "all messages", image: "../images/message.png" }

break;

case 2:

tabHeader = { title: "CALENDAR", subtitle: "scheduled tasks", image: "../images/calendar.png" }

break;

case 3:

tabHeader = { title: "SETTINGS", subtitle: "available tools", image: "../images/settings.png" }

break;

default:

tabHeader = { title: "TAB", subtitle: "subtitle" }

break;

}

 

return tabHeader;

}

 

// 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");

});

<!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">

.custom-header

{

margin: 0;

padding: 5px;

text-align: center;

font-size: 0.875em;

}

.custom-header span

{

color: #484848;

font-size: 0.875em;

vertical-align: middle;

}

.widget

{

width: 500px;

height: 300px;

}

</style>

In our example we are creating only 4 tabs, but you can add as many tabs you want. When there is no space to show all tabs, the navigation buttons will appear which allows you to scroll among them.

Tabs with Image and Text

Instead of showing tabs with text in two lines, we can easily modify our template and show an image in the first line of tab header. For example:

Tabs with Text and Image Text in TabStrip jQuery

Our template in this case looks like this:

// Create a template for tab header

var generateTab = function(index){

var tabHeader = getTabContent(index);

 

var tab = {

headerContent: "<div class='custom-header'>" +

"<img src='" + tabHeader.image + "' /><br/>"

"<span>" + tabHeader.subtitle.toLowerCase() + "</span>" +

"</div>"

}

 

return tab;

}

<style type="text/css">

.custom-header

{

padding: 2px 5px 10px 5px;

}

</style>

You can place any HTML element in tab header; its size will automatically adjust to accommodate its content.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.