Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference

insertSlideBarBefore(slide, refSlideBar)

Inserts a new slide at position before specified slide in SlideBar widget.


slideObjectThe slide to add to the collection
refSlideBar ObjectA reference slide before which the newly added slide will be positioned

Return Value

This method does not return a value.

Version Information

Supported in: v1.0.


In this example we are showing how to use insertSlideBarBefore method to place a new slide before currently selected slide used as a reference.

$(document).ready(function() {

// Create an instance of SlideBar widget

var $bar = $('#slidebar').slidebar();


// Get the number of slides in SlideBar

var getSlideBarCount = function(){

return $bar.slidebar("getList").length + 1;



// Create a new slide

var createNewSlideBar = function(){

return { text: "SlideBar" + getSlideBarCount() };



// Get the currently selected (visible) slide

var getCurrentSelection = function(){

return $bar.slidebar("option", "selectedSlideBar");



// Inserts a new slide before currently selected slide

$bar.slidebar("insertSlideBarBefore", createNewSlideBar(), getCurrentSelection());


<!DOCTYPE html>



<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>



<button type="button" onclick="add()" />Add Slide</button>

<div id="slidebar" class="widget"></div>





background-color: white;

border: thin solid gray;

height: auto;;




width: 300px;

height: 200px;

text-align: center;


.slide span


display: inline-block;

font-size: 2em;

margin: 25% auto;

vertical-align: middle;



See Also