Advanced User Interface Controls and Components
Occurs after a slide is removed from the SlideBar.
| Param | Type | Details |
|---|---|---|
| e | Object | An event object which contains the slide |
This event can be handled by binding the 'slideremoved' event to the SlideBar widget object.
Supported in: v1.0.
An example explaining how to create a handle to the slideremoved event in SlideBar widget. Whenever the 'Remove Slide' button is clicked the currently selected slide will be removed from the SlideBar, after which console log will display a message stating that slideremoved event is fired.
$(document).ready(function() {
// Create an instance of SlideBar widget
var $bar = $('#slidebar').slidebar({
slideWidth: 300,
slideHeight: 200
});
// Get the slide that is currently selected in SlideBar
var getCurrentSelection = function(){
return $bar.slidebar("option", "selectedSlide");
}
// When 'Remove Slide' button is clicked, it removes the currently selected slide from the SlideBar
var remove = function(){
$bar.slidebar("removeSlide", getCurrentSelection());
}
// Create a handler to the slideremoved event
$bar.on({
"slideremoved": function(e){
console.log("slideremoved event was fired for slide: " + e.object.text);
});
});
<!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>
<li><div class="slide"><span>Slide 4</span></div></li>
<li><div class="slide"><span>Slide 5</span></div></li>
</ul>
</div>
</div>
</body>
</html>
.widget
{
background-color: white;
border: thin solid gray;
height: auto;;
}
.slide
{
width: 300px;
height: 200px;
text-align: center;
}
.slide span
{
display: inline-block;
font-size: 3em;
margin: 25% auto;
vertical-align: middle;
}
A sample which demonstrates how you can add/remove slides in SlideBar widget using several different methods.