forked from clineamb/bootstrap-drawer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
javascript.html
198 lines (193 loc) · 9.88 KB
/
javascript.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE 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>