Advanced User Interface Controls and Components
Occurs after slide button is clicked.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the button index |
This event can be handled by binding the 'buttonclicking' event to the SlideBar widget object. Button clicks allows you to interrupt current animation and switch to the slide with index equal to the button position.
Supported in: v1.0.
In this example we are showing how to create a handle to the buttonclicking event in SlideBar widget.
By handling this event you can prevent change of current selection depending on some custom conditions. In our example when second button is clicked, the second slide will never appear.
$(document).ready(function() {
// Create an instance of SlideBar widget
var $bar = $('#slidebar').slidebar({
slideWidth: 500,
slideHeight: 300
});
$bar.on({
"buttonclicking": function(e){
// If the index equals 1, abort slide change
if (e.object.index === 1)
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.slidebar.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.slidebar.min.js"></script>
</head>
<body>
<div id="slidebar" class="widget">
<div>
<ul>
<li><div class="slide"><span>Slide 1</span></div></li>
<li><div class="slide"><span>Slide 2</span></div></li>
<li><div class="slide"><span>Slide 3</span></div></li>
</ul>
</div>
</div>
</body>
</html>
.widget
{
background-color: white;
border: thin solid gray;
height: auto;;
}
.slide
{
width: 500px;
height: 300px;
text-align: center;
}
.slide span
{
display: inline-block;
font-size: 3em;
margin: 25% auto;
vertical-align: middle;
}
A sample which demonstrates how to handle different events in SlideBar widget.