Advanced User Interface Controls and Components
Occurs when currently selected slide is about to change.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the group |
This event can be handled by binding the 'slidechanging' event to the SlideBar widget object.
Supported in: v1.0.
In this example we are showing how to create a handle to the slidechanging event in SlideBar widget.
By handling this event you can prevent slide changes depending on some custom conditions or perform some custom action. 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({
"slidechanging": function(e){
// Get the index of the slide that is going to become selected
var slideIndex = $.inArray(e.object, currentList);
// If the index equals 1, abort slide change
if (slideIndex === 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.