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: 24 March 2014
In general most tabs and their content are created within HTML and remain static. In some cases we may need to open or add a new tab dynamically when it is required. In following sections below we will describe how this can be done using jQuery and TabStrip widget and its built-in methods.
The best way to make TabStrip user friendly and to allow creation and opening of new tabs on demand, is by using the last tab in tab strip and make it like a button. We can delete the title of this tab (like in picture above), or add some image which will state than when this tab gets clicked it will create a new tab (an image showing an empty document for example).
To make a distinction between this tab and all other tabs we will apply a specific key to it, in this case a string “NEW_TAB”.
// Create an instance of TabStrip widget
var $tabCtrl = $('#tabstrip').tabstrip();
// Suspend the TabStrip layout to increase performance
$tabCtrl.tabstrip("suspendLayout");
// Initally we are creating two normal tabs and one empty tab
$tabCtrl.tabstrip("addTab", { text: "Tab1" });
$tabCtrl.tabstrip("addTab", { text: "Tab2" });
// We are creating a tab with empty header and applying a unique key which will be used to process clicks
$tabCtrl.tabstrip("addTab", { headerContent: "<span style='display: inline-block; width:16px'></span>", key: "NEW_TAB" });
// Set selection to the first tab
$tabCtrl.tabstrip("option", "selectedIndex", 0);
// Resume and update the layout of TabStrip
$tabCtrl.tabstrip("resumeLayout");
As it can be seen from above code we are using a custom HTML to set the content of tab header to look like its empty. You can use any HTML tags to customize the appearance of tab header. For this example we have choose the tag displayed as inline-block and without text.
When we have set the visual appearance of this, let’s call it ‘open new tab’, we need to handle the ‘tabclick’ event and add a javascript code which will create a new tab, select it and place it just before this tab. In this way whenever ‘open new tab’ gets clicked, it will add a new tab and mark it as currently selected.
// To add a new tab whenever an empty tab is clicked we are handling the 'tabclick' event
$tabCtrl.on("tabclick", function(e){
if (e.object && e.object.key === "NEW_TAB"){
var newTab = { text: "Tab" + getTabCount() }
$tabCtrl.tabstrip("insertTabBefore", newTab, e.object);
// Set selection to the new tab
$tabCtrl.tabstrip("option", "selectedTab", newTab);
// Make sure the new tab is visible by scrolling to the end of tab strip
$tabCtrl.tabstrip("setScrollPos", 9999);
}
});
getTabCount = function(){
return $tabCtrl.tabstrip("getList").length;
}
As above code shows we are using:
All tabs by default are free to become selected and open their content. In some cases we may need to prevent tab from opening and showing its content. Like in our above example, we have created a tab which will act only as a button, without any content and used only to create and open new tabs.
To prevent selection and opening of our designated ‘open new tab’, we need to handle the ‘beforeselect’ event. This will allow only clicks on its tab header to be processed:
// Prevent selection of ‘open new tab’
$tabCtrl.on("beforeselect", function(e){
if (e.object && e.object.key === "NEW_TAB")
return false;
});
We are using the unique key to check whether this tab is our designated ‘open new tab’. If it is, the event will return false to cancel further operations and events from calling, like ‘afterselect’ event.
In similar way we can handle other events like ’tabremoving’ which will prevent removal of this tab, while still allowing all other tabs to be removed.
You can checkout this online sample which demonstrates creation of new tabs on demand.