bootstrap-drawer
Version:
A Bootstrap add-on to create drawer (off-canvas) styled navigation
198 lines (193 loc) • 10.1 kB
HTML
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bootstrap-drawer documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="example/drawer-docs.css">
<link rel="stylesheet" type="text/css" href="example/github.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59331212-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</head>
<body class="has-offcanvas">
<div id="docDrawer" class="drawer dw-xs-10 dw-sm-6 dw-md-5 fold in" aria-labelledby="docDrawer">
<div class="drawer-controls">
<a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><i class="fa fa-align-justify"></i></a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title"><strong>bootstrap-drawer</strong></h2>
</div>
<div class="drawer-body">
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
</div>
<div class="drawer-heading">
<h3 class="drawer-title">Basics</h2>
</div>
<ul id="doc-nav" class="drawer-fullnav">
<li role="presentation"><a href="index.html">Home / Basic Usage</a></li>
<li role="presentation"><a href="customize.html">Position / Colors</a></li>
<li role="presentation"><a href="javascript.html">data-toggle / Javascript</a></li>
<li role="presentation"><a href="less.html">Using Less</a></li>
</ul>
<div class="drawer-heading">
<h3 class="drawer-title">Other Links</h2>
</div>
<ul class="drawer-fullnav">
<li role="presentation"><a href="http://github.com/clineamb/bootstrap-drawer" target="_blank"><i class="fa fa-github-alt"></i> GitHub Repo</a></li>
<li role="presentation"><a href="http://www.npmjs.com/package/bootstrap-drawer" target="_blank"><i class="fa fa-share-square"></i> npm</a></li>
<li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i> @clineamb</a></li>
<li><a name=""><iframe src="https://ghbtns.com/github-btn.html?user=clineamb&type=follow&count=true" frameborder="0" scrolling="0" width="100%" height="20px"></iframe></a></li>
</ul>
<div class="drawer-footer">
<small>© 2015 Caroline Amaba</small>
</div>
</div>
</div>
<div id="drawer-docs">
<div class="jumbotron page-topper">
<div class="container">
<h1>bootstrap-drawer</h1>
<h4>bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!</h4>
</div>
</div>
<div id="drawer-docs-content" class="container">
<h2 id="component-jquery-api">Component jQuery API</h2>
<p>Bootstrap drawer comes with <code>drawer.js</code> to be added to the <code>bootstrap.js</code> component suite. If you're including separate components, <code>drawer.js</code> depends on <code>transition.js</code> plugin.</p>
<p><code>drawer.js</code> is built similarly to <code>collapse.js</code>.</p>
<hr>
<h3 id="example">Example</h3>
<div class="panel panel-default has-inner-drawer example-container-right">
<div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-contents">
<div class="drawer-heading">
<strong>Button/Link Toggle Example</strong>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
Try the buttons over there to toggle the menu that pops out on the left!
</div>
<div class="col-xs-6">
<p>
<a href="#drawerExample2" data-toggle="drawer" aria-expanded="false" aria-controls="drawerExample2" class="btn btn-primary">Link with href</a>
</p>
<p>
<button class="btn btn-info" type="button" data-toggle="drawer" data-target="#drawerExample2" aria-expanded="false" aria-controls="drawerExample2">
Button with data-target
</button>
</p>
</div>
</div>
</div>
</div>
<h3 id="usage">Usage</h3>
<p>The drawer plugin utilizes a few classes to do all the work:</p>
<ul>
<li><code>.fold</code> hides content</li>
<li><code>.fold.open</code> shows content.</li>
<li><code>.folding</code> is applied during transitions, and removed when it finishes.</li>
</ul>
<p>These classes can be found in <code>less/mixins/drawer-framework.less</code>. They are built in loops with the <code>.dw-SIZE-#</code> classes because they utilize margins based on the column width.</p>
<h4 id="via-data-attributes">Via data attributes</h4>
<p>Just add <code>data-toggle="drawer"</code> and a data-target to the element to automatically assign control of drawer element. The data-target attribute accepts a CSS selector to apply the folding animation to. Be sure to add the class <code>.fold</code> to the collapsible element. If you'd like it to default open, add the additional class <code>.open</code>.</p>
<h4 id="via-javascript">Via JavaScript</h4>
<p>Enable manually with:</p>
<pre><code class="lang-js">$('.drawer').drawer();
</code></pre>
<h4 id="options">Options</h4>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p>
<table class="table table-bordered">
<tr class="active">
<th width="15%">Name</th>
<th width="15%">selector</th>
<th width="15%">default</th>
<th width="45%">description</th>
</tr>
<tr>
<td>parent</td>
<td>selector</td>
<td>false</td>
<td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this drawer is open.</td>
</tr>
<tr>
<td>toggle</td>
<td>boolean</td>
<td>true</td>
<td>Toggle the drawer element on invocation.</td>
</tr>
</table>
<h4 id="methods">Methods</h4>
<h5 id="-drawer-options-">.drawer(options)</h5>
<p>Activates your content as a drawer element. Accepts an optional options <code>object</code>.</p>
<pre><code class="lang-js">$('#myDrawer').drawer({
toggle: false
});
</code></pre>
<h5 id="-drawer-toggle-">.drawer('toggle')</h5>
<p>Toggles a drawer element as folded or open.</p>
<h5 id="-drawer-show-">.drawer('show')</h5>
<p>Shows drawer element as opened.</p>
<h5 id="-drawer-hide-">.drawer('hide')</h5>
<p>Hide a drawer element.</p>
<h4 id="events">Events</h4>
<p>drawer-bootstrap drawer class exposes drawer events (very similarly to how Bootstrap collapse) for hooking
into the drawer functionality.</p>
<table class="table table-bordered">
<tr class="active">
<th width="25%">Event Type</th>
<th width="75%">Description</th>
</tr>
<tr>
<td>show.bs.drawer</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
<td>shown.bs.drawer</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
<td>hide.bs.drawer</td>
<td>This event is fired immediately when the <code>hide</code> method has been called.</td>
</tr>
<tr>
<td>hidden.bs.drawer</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</table>
<pre><code class="lang-js">$('#myDrawer').on('hidden.bs.drawer', function() {
// do something here...
});
</code></pre>
<div id="drawer-docs-footer">
<a href="#docDrawer" data-toggle="drawer" class="btn btn-lg btn-block btn-primary">Open the Drawer</a>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="example/bootstrap.min.js"></script>
<script src="example/highlight.pack.js"></script>
<script src="dist/js/drawer.js"></script>
<script src="example/docs.js"></script>
</body>
</html>