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 'buttonclicked' 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 buttonclicked event in SlideBar widget.
$(document).ready(function() {
// Create an instance of SlideBar widget
var $bar = $('#slidebar').slidebar({
slideWidth: 500,
slideHeight: 300
});
$bar.on({
"buttonclicked": function(e){
console.log("buttonclicked event was fired for button at position: " + e.object.index);
});
});
<!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.