Advanced User Interface Controls and Components
Determines whether close button is visible or not.
A Boolean value. The default is true, stating that close button will become visible in tab strip.
Supported in: v1.0.
In this example we are presenting how to show/hide the close button in TabStrip. By clicking on 'Show Close Button' check box, the close button will be displayed at the far right side of tab strip. In right-to-left layout, the close button is shown to the far left side.
var $tab = null;
$(document).ready(function() {
$tab = $('#tabstrip').tabstrip({
selectedIndex: 1
});
});
function toggleCloseButton(elem){
$tab.tabstrip("option", "showCloseButton", elem.checked);
}
<!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>
<div class="block">
<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>
</div>
<div class="control-panel">
<form name="frm">
<label><input type="checkbox" checked="checked" onclick="toggleCloseButton(this)" /> Show Close Button</label><br />
</form>
</div>
<div style="clear: both; height: 1px;"></div>
</div>
</body>
</html>
.block
{
position: relative;
margin: 0 auto 0 0;
width: 550px;
}
.control-panel
{
float: right;
font-size: 0.8em;
white-space: nowrap;
width: 100px;
}
.widget
{
float: left;
font-size: 0.75em;
width: 400px;
height: 400px;
}