Advanced User Interface Controls and Components
Sets the position of the scroll tab in TabStrip.
| Param | Type | Details |
|---|---|---|
| pos | Object | A number that represents the new position of TabStrip scrollbar |
This method does not return a value.
Supported in: v1.0.
In this example we are showing how to use setScrollPos method to change through code the vertical or horizontal scroll position in TabStrip. In our example the scroll position will be set to 100 pixels, meaning that the few tabs at beginning of tab strip will be scrolled to the left and will disappear from current view of TabStrip.
$(document).ready(function() {
// Create an instance of TabStrip widget
var $tab = $('#tabstrip').tabstrip();
// Sets the scroll position in TabStrip to 100 pixels.
$tab.tabstrip("setScrollPos", 100);
});
<!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 id="tabstrip" class="widget">
<li><span>Tab 1</span></li>
<li><span>Tab 2</span></li>
<li><span>Tab 3</span></li>
<li><span>Tab 4</span></li>
<li><span>Tab 5</span></li>
<li><span>Tab 6</span></li>
<li><span>Tab 7</span></li>
<li><span>Tab 8</span></li>
<li><span>Tab 9</span></li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
.widget
{
width: 300px;
height: 300px;
}