LIDOR SYSTEMS

Advanced User Interface Controls and Components

jQuery Tabs with Close Button

Created: 14 July 2014

Updated: 10 August 2014

The header of each tab in TabStrip widget can contain any custom HTML5 content. To create a button in each tab which when clicked will remove the tab from the tab strip is simple. We will show you how to do this.

Add a Close Button to Each Tab

By default tab header only contains a text which represents the tab title. The IntegralUI TabStrip widget contains a headerContent property which allows you to add any HTML5 element(s) and arrange them in custom layouts.

TabStrip is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

In our case we only need to add an icon which will act as a close button. The button is simply a span element which background is painted with an image which represents the close button. When this element is hovered, a different image is shown. All this is modified from our CSS3 style.

Here is a sample of our template for tab header:

$(document).ready(function() {

// Create an instance of TabStrip widget

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

 

// Create a template for tabs

var generateTab = function(index){

var tab = {

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

"<span>Tab " + index + "</span>" +

"<span class='icons close-button'></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;

}

 

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

.tab-header

{

margin: 0;

padding: 0 2px;

}

.tab-header span

{

vertical-align: middle;

}

.tab-content

{

padding: 2px 5px 5px 5px;

}

.icons

{

background-image: url(../images/remove.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0 0 0 5px;

width: 16px;

height: 16px;

}

.close-button

{

background-position: 0px 0px;

}

.close-button:hover

{

background-position: -16px 0px;

}

.widget

{

width: 300px;

height: 250px;

}

</style>

As it shown on above image, each tab contains a title and a button. This only represents a visual appearance of our tabs, and nothing happens when we click on close buttons. In order to make it work we need to handle the click event, which is explained in next section.

How to Handle the Click Event to Remove a Tab

We will create a function (let’s call it rebindEvents), which will handle the click event for all close buttons. At first we need to find all button elements, we are using the class selector to locate all matching buttons. Then we cycle through each button and to avoid duplicate events, we must clear all present click events, and then attach a new click event.

var tabToRemove = null;

 

// Bind the click event to close button for each tab

var rebindEvents = function(){

var btns = $tabCtrl.find(".icons");

btns.each(function(index){

var currentButton = $(this);

 

currentButton

.off("click")

.on({

"click": function(){

$tabCtrl.tabstrip("removeTabAt", index);

},

"mouseenter": function(e){

tabToRemove = $tabCtrl.tabstrip("getList")[index];

},

"mouseleave": function(e){

tabToRemove = null;

}

});

});

 

// Bind the beforeselect event to prevent selection of tabs when their close button is clicked

$tabCtrl

.off("beforeselect")

.on({

"beforeselect": function(e){

if (e.object === tabToRemove)

return false;

}

});

}

 

rebindEvents();

Whenever a button is clicked, we call the removeTabAt method with index of the button to remove the tab from the TabStrip. Because each tab contains a close button, the index of the button is the same as the index of the tab.

Note In other cases we may need to find another way to locate to which tab the clicked button belongs. This can be done by assigning a key to each tab or using the position of button to locate its parent tab. We may show this in some other article.

We also need to handle the tabremoved event, so whenever a new tab is removed, the click event will become re-attached for each button.

// When tab is removed rebind the click events and update the appearance of TabStrip

$tabCtrl.on("tabremoved", function(e){

rebindEvents();

});

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.