Advanced User Interface Controls and Components
Occurs after a tab is removed from the TabStrip.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the tab |
This event can be handled by binding the 'tabremoved' event to the TabStrip widget object.
Supported in: v1.0.
An example explaining how to create a handle to the tabremoved event in TabStrip widget. Whenever the 'Remove Tab' button is clicked the currently selected tab will be removed from the TabStrip, after which console log will display a message stating that tabremoved event is fired.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip();
// Get the tab that is currently selected in TabStrip
var getCurrentSelection = function(){
return $tab.tabstrip("option", "selectedTab");
}
// When 'Remove Tab' button is clicked, it removes the currently selected tab from the TabStrip
var remove = function(){
$tab.tabstrip("removeTab", getCurrentSelection());
}
// Create a handler to the tabremoved event
$tab.on({
"tabremoved": function(e){
console.log("tabremoved event was fired for tab: " + e.object.text);
});
});
<!DOCTYPE html>
<html>
<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>
<button type="button" onclick="remove()" />Remove Tab</button>
<div id="tabstrip" class="widget">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
<li><span>Tab 3</span></li>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}
A sample which demonstrates how you can add/remove tabs in TabStrip widget using several different methods.