LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


tabremoving(e)

Occurs before a tab is removed from the TabStrip.

Event Data

ParamTypeDetails
eObjectAn event object which contains the tab

Remarks

This event can be handled by binding the 'tabremoving' event to the TabStrip widget object.

Version Information

Supported in: v1.0.

Example

An example explaining how to create a handle to the tabremoving event in TabStrip widget.

By handling this event you can prevent removing of tabs depending on some custom conditions. By returning a false value, you can cancel this event. Whenever the 'Remove Tab' button is clicked the currently selected tab will be removed from the TabStrip, until only one tabs remains.

$(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 tabremoving event

$tab.on({

"tabremoving": function(e){

var tabCount = $tab.tabstrip("getList").length;

if (tabCount <= 1)

return false;

});

});

<!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;

}

Samples

See Also

Border