-
Notifications
You must be signed in to change notification settings - Fork 60
/
index.html
210 lines (183 loc) · 11.6 KB
/
index.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
199
200
201
202
203
204
205
206
207
208
209
210
<html>
<head>
<title>Tabs</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.deco-none {
text-decoration: none !important;
}
.red-class {
color: red !important;
}
</style>
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Responsive Tabs</a>
</div>
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Responsive Tabs Example</h1>
<p>This example illustrates how the responsive tabs works. It uses the standard <a href="//getbootstrap.com">Bootstrap</a> responsive CSS and HTML, so it also adapts to your viewport and device. This page is using Bootstrap 3.3.6</p>
<p>To see the difference just resize the width of your window.</p>
</div>
<!-- ====================================== examples ====================================== -->
<div class="page-header">
<h2>Examples</h2>
</div>
<h3>Responsive Tabs</h3>
<h4>Tabs with an assigned <code>id</code>.</h4>
<ol>
<li>First tab initialized as active.</li>
<li>First and third tab have a <code>deco-none</code> class and the first has an additional <code>red-class</code> that are copied to the anchor tags in the accordions.</li>
<li>First two tabs have extra class <code>test-class</code> that are copied to the <code>div.panel-default</code> in the accordions.</li>
</ol>
<ul class="nav nav-tabs responsive" id="myTab">
<li class="test-class active"><a class="deco-none red-class" href="#resp-tab1"><span class="glyphicon glyphicon-cog"></span> Tab 1</a></li>
<li class="test-class"><a href="#resp-tab2"><span class="glyphicon glyphicon-headphones"></span> Tab 2</a></li>
<li><a class="deco-none" href="#resp-tab3"><span class="glyphicon glyphicon-folder-open"></span> Tab 3</a></li>
</ul>
<div class="tab-content responsive">
<div class="tab-pane active" id="resp-tab1">Tab 1 ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. <button class='btn btn-primary js-alert-test'>Test Event Maintained</button></div>
<div class="tab-pane" id="resp-tab2">Tab 2 ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.</div>
<div class="tab-pane" id="resp-tab3">Tab 3 ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.</div>
</div>
<hr>
<h4>Tabs without an assigned <code>id</code>.</h4>
<ol>
<li>Second tab initialized as active.</li>
<li>Tabs are inside a panel.</li>
<li>Fourth tab has panels within it.</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel containing responsive tabs</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs responsive">
<li><a href="#home-test-new">Home</a></li>
<li class="active"><a href="#profile-test-new">Profile</a></li>
<li><a href="#messages-test-new">Messages</a></li>
<li><a href="#fourth-test-new">Fourth</a></li>
</ul>
<div class="tab-content responsive">
<div class="tab-pane active" id="home-test-new">Home ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu posuere tortor. Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla.</div>
<div class="tab-pane" id="profile-test-new">Profile ... Phasellus consectetur aliquet risus, in lacinia erat ullamcorper a. Suspendisse molestie porta metus, at cursus elit. Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae.</div>
<div class="tab-pane" id="messages-test-new">Messages ... Quisque et neque nec velit tincidunt fringilla. Morbi eget nisi molestie, egestas turpis non, pharetra orci. Donec mattis sem ipsum, eu dapibus lacus rutrum in. Fusce blandit mi leo, non feugiat nunc tempus vitae. Mauris hendrerit, leo sit amet mollis bibendum, lacus augue auctor turpis, sed placerat augue libero quis massa.</div>
<div class="tab-pane" id="fourth-test-new">
<p>
Fourth ...
</p>
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Standard Tabs (Non-Responsive)</h3>
<ul class="nav nav-tabs" id="nonResponsiveTabs">
<li class="active"><a href="#nr-tab1">Markup</a></li>
<li><a href="#nr-tab2">Profile2</a></li>
<li><a href="#nr-tab3">Messages2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="nr-tab1">Markup Content ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
<div class="tab-pane" id="nr-tab2">Profile 2 Content ... Ut laoreet fermentum risus sed ullamcorper. Nulla condimentum sagittis quam. Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar.</div>
<div class="tab-pane" id="nr-tab3">Messages 2 Content ... Duis viverra egestas ante, vel blandit elit dictum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus fermentum dui at viverra pulvinar. Donec eu ipsum ut tellus convallis posuere. Sed tempor turpis laoreet dignissim mattis.</div>
</div>
<!-- ====================================== documentation ====================================== -->
<div class="page-header">
<h2>Documentation</h2>
</div>
<h3>How to use</h3>
<h4>Steps</h4>
<ol>
<li>Include bootstrap css and js.</li>
<li>Include responsive-tabs.js.</li>
<li>Setup tabs per the bootstrap <a href="//getbootstrap.com/javascript/#tabs">documents</a>.</li>
<li>Add a <code>responsive</code> class to the <code>ul</code> that is used to create the tabs.</li>
<li>Add a <code>responsive</code> class to the <code>div</code> that is used to create the tab-content.</li>
<li>Call <code>fakewaffle.responsiveTabs(['xs', 'sm']);</code> in your load up script, while passing an array of bootstrap sizes that you want the to be displayed as accordions, e.g. ['xs', 'sm'] which is used by default.</li>
</ol>
<h5>Example Markup</h5>
<div class="alert alert-info">
<strong>Note:</strong> The only difference from the standard bootstrap tab markup to the responsive markup is the addition of the <em class="text-danger">responsive</em>, and calling the <code>fakewaffle.responsiveTabs();</code> function.
</div>
<pre>
<ul class="nav nav-tabs <span class="text-danger">responsive</span>" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content <span class="text-danger">responsive</span>">
<div class="tab-pane active" id="home">...content...</div>
<div class="tab-pane" id="profile">...content...</div>
<div class="tab-pane" id="messages">...content...</div>
</div>
<script type="text/javascript">
(function($) {
fakewaffle.responsiveTabs(['xs', 'sm']);
})(jQuery);
</script></pre>
<h4>Key Features</h4>
<ul>
<li>Uses standard bootstrap tab markup</li>
<li>Accordion is created with jquery</li>
<li>Tabs and Accordion are the fully accessible via keyboard</li>
<li>Supports multiple tabs on a page, with or without being responsive</li>
</ul>
<h4>Additional Items</h4>
<ul>
<li>Make the entire panel heading clickable, see <a href="https://github.com/openam/bootstrap-responsive-tabs/issues/5">Issue #5</a>.</li>
</ul>
<h4>Source</h4>
<p>You may download the source code from <a href="https://github.com/openam/bootstrap-responsive-tabs/archive/master.zip">github</a>.</p>
<h5>Reporting issues</h5>
<p>If you have any issues with this please report in on <a href="https://github.com/openam/bootstrap-responsive-tabs/issues">github</a>.</p>
<h5>Contributing</h5>
<p>If you'd like to contribute to this project, you can fork the project send a pull request.</p>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/responsive-tabs.js"></script>
<script type="text/javascript">
$( 'ul.nav.nav-tabs a' ).click( function ( e ) {
e.preventDefault();
$( this ).tab( 'show' );
} );
( function( $ ) {
// Test for making sure event are maintained
$( '.js-alert-test' ).click( function () {
alert( 'Button Clicked: Event was maintained' );
} );
fakewaffle.responsiveTabs( [ 'xs', 'sm' ] );
} )( jQuery );
</script>
<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-17600125-2', 'openam.github.io');
ga('send', 'pageview');
</script>
</body>
</html>