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 Weba 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.

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.

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

});

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.