jQuery Tabs with Check Box

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.

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

There are two ways to create tabs with custom content in their header, by using:

jQuery and headerContent property of tab object, this property accepts as value any HTML5 generated content

HTML5 custom attribute called data-element, with its value set to 'content'

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:

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.

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.

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

element, and yet there is no functionality in jQuery which can prevent events for all contained elements, like a button clicks. A solution is to prevent this in your code, by manually handling the events for custom elements inside the tab content panel.
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.