examples/api-usage.html
<!doctype html>
<html>
<head>
<title>Slidebars API Usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Slidebars CSS -->
<link rel="stylesheet" href="slidebars/slidebars.css">
<!-- Example Styles -->
<link rel="stylesheet" href="example-styles.css">
</head>
<body>
<div id="sb-site">
<h1>Slidebars API Usage</h1>
<p>The list items below do not use the standard control classes and are instead mapped to the Slidebars API. You can open a Slidebar, check if the plugin has been initiated, check if a Slidebars is active, and remove them from the DOM entirely.</p>
<p>As of version 0.10, all API methods have been prefixed with '.slidebars'. myVariable.open('left') should now be myVariable.slidebars.open('left').</p>
<ul>
<li class="toggle-left">Toggle left Slidebar</li>
<li class="toggle-right">Toggle right Slidebar</li>
<li class="open-left">Open left Slidebar</li>
<li class="open-right">Open right Slidebar</li>
<li class="close">Close either Slidebar</li>
<li class="test-slidebars-init">Test Slidebars Initialisation</li>
<li class="test-left-slidebar">Test left Slidebar</li>
<li class="test-right-slidebar">Test right Slidebar</li>
<li class="destroy-left-slidebar">Destroy left Slidebar</li>
<li class="destroy-right-slidebar">Destroy right Slidebar</li>
</ul>
<h2>More Examples</h2>
<ul>
<li><a href="control-classes.html">Control Classes</a></li>
<li><a href="api-usage.html">API Usage</a></li>
<li><a href="mobile-only.html">Mobile Only</a></li>
<li><a href="animation-styles.html">Animation Styles</a></li>
<li><a href="optional-widths.html">Optional Widths</a></li>
<li><a href="custom-widths.html">Custom Widths</a></li>
<li><a href="scroll-lock.html">Scroll Lock</a></li>
<li><a href="slidebar-links.html">Slidebar Links</a></li>
<li><a href="static-slidebars.html">Static Slidebars</a></li>
<li><a href="momentum-scrolling.html">Momentum Scrolling</a></li>
<li><a href="left-slidebar-only.html">Left Slidebar Only</a></li>
<li><a href="right-slidebar-only.html">Right Slidebar Only</a></li>
</ul>
</div>
<div class="sb-slidebar sb-left">
<!-- Your left Slidebar content. -->
</div>
<div class="sb-slidebar sb-right">
<!-- Your right Slidebar content. -->
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="slidebars/slidebars.js"></script>
<script>
(function($) {
$(document).ready(function() {
var mySlidebars = new $.slidebars(); // Create new instance of Slidebars
// Event handler
function eventHandler(e) {
e.stopPropagation();
e.preventDefault();
}
// Toggle methods
$('.toggle-left').on('click', function(e) {
eventHandler(e);
mySlidebars.slidebars.toggle('left');
});
$('.toggle-right').on('click', function(e) {
eventHandler(e);
mySlidebars.slidebars.toggle('right');
});
// Open methods
$('.open-left').on('click', function(e) {
eventHandler(e);
mySlidebars.slidebars.open('left');
});
$('.open-right').on('click', function(e) {
eventHandler(e);
mySlidebars.slidebars.open('right');
});
// Close
$('.close').on('click', function(e) {
eventHandler(e);
mySlidebars.slidebars.close();
});
// Test initialisation
$('.test-slidebars-init').on('click', function(e) {
eventHandler(e);
if (mySlidebars.slidebars.init) { // Check if Slidebars has been initiated.
alert('Slidebars has been initialised.');
} else {
alert('Slidebars has not been initialised.');
}
});
// Test Slidebar active states
$('.test-left-slidebar').on('click', function(e) {
eventHandler(e);
if (mySlidebars.slidebars.active('left')) { // Check if left Slidebar is active.
alert('Left Slidebar is open.');
} else {
alert('Left Slidebar is closed.');
}
});
$('.test-right-slidebar').on('click', function(e) {
eventHandler(e);
if (mySlidebars.slidebars.active('right')) { // Check if right Slidebar is active.
alert('Right Slidebar is open.');
} else {
alert('Right Slidebar is closed.');
}
});
// Destroy Slidebars
$('.destroy-left-slidebar').on('click', function() {
mySlidebars.slidebars.destroy('left');
alert('Boom!');
});
$('.destroy-right-slidebar').on('click', function() {
mySlidebars.slidebars.destroy('right');
alert('Boom!');
});
});
}) (jQuery);
</script>
</body>
</html>