UNPKG

17.7 kBHTMLView Raw
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery Smart Tab - The flexible jQuery tab control plugin</title>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8 <!-- Include SmartTab CSS -->
9 <link href="./css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
10
11 <!-- Demo Page Style - You don't need -->
12 <style>
13 body {
14 padding-right: 5%;
15 padding-left: 5%;
16 }
17 </style>
18
19</head>
20<body>
21
22 <p>
23 <label>Theme:</label>
24 <select id="theme_selector">
25 <option value="default">Default</option>
26 <option value="classic">Classic</option>
27 <option value="dark">Dark</option>
28 <option value="brick">Brick</option>
29 <option value="round">Round</option>
30 <option value="pills" selected>Pills</option>
31 <option value="github">GitHub</option>
32 <option value="sourceforge">Sourceforge</option>
33 <option value="">No Theme</option>
34 </select>
35
36 &nbsp;&nbsp;&nbsp;&nbsp;
37 <input type="checkbox" id="is_vertical" value="1" />
38 <label for="is_vertical">Vertical</label>
39
40 &nbsp;&nbsp;&nbsp;&nbsp;
41 <input type="checkbox" id="is_justified" value="1" checked />
42 <label for="is_justified">Justified</label>
43
44 &nbsp;&nbsp;&nbsp;&nbsp;
45 <label>Animation:</label>
46 <select id="animation">
47 <option value="none">None</option>
48 <option value="fade">Fade</option>
49 <option value="slide-horizontal">Slide Horizontal</option>
50 <option value="slide-vertical">Slide Vertical</option>
51 <option value="slide-swing">Slide Swing</option>
52 </select>
53
54 &nbsp;&nbsp;&nbsp;&nbsp;
55 <label>Go To:</label>
56 <select id="got_to_tab">
57 <option value="1">1</option>
58 <option value="2">2</option>
59 <option value="3">3</option>
60 <option value="4">4</option>
61 </select>
62 </p>
63 <br />
64
65 <!-- SmartTab html -->
66 <div id="smarttab">
67
68 <ul class="nav">
69 <li>
70 <a class="nav-link" href="#tab-1">
71 <strong>Tab 1</strong> This is tab description
72 </a>
73 </li>
74 <li>
75 <a class="nav-link" href="#tab-2">
76 <strong>Tab 2</strong> This is tab description
77 </a>
78 </li>
79 <li>
80 <a class="nav-link" href="#tab-3">
81 <strong>Tab 3</strong> This is tab description
82 </a>
83 </li>
84 <li>
85 <a class="nav-link" href="#tab-4">
86 <strong>Tab 4</strong> This is tab description
87 </a>
88 </li>
89 </ul>
90
91 <div class="tab-content">
92 <div id="tab-1" class="tab-pane" role="tabpanel">
93 <h3>Tab 1 Content</h3>
94 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
95 </div>
96 <div id="tab-2" class="tab-pane" role="tabpanel">
97 <h3>Tab 2 Content</h3>
98 <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
99 </div>
100 <div id="tab-3" class="tab-pane" role="tabpanel">
101 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
102 </div>
103 <div id="tab-4" class="tab-pane" role="tabpanel">
104 <h3>Tab 4 Content</h3>
105 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
106 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
107 </div>
108 </div>
109 </div>
110
111 <br /><br />
112 <p>
113 <label>Theme:</label>
114 <select id="theme_selector2">
115 <option value="default" selected>Default</option>
116 <option value="classic">Classic</option>
117 <option value="dark">Dark</option>
118 <option value="brick">Brick</option>
119 <option value="round">Round</option>
120 <option value="pills">Pills</option>
121 <option value="github">GitHub</option>
122 <option value="sourceforge">Sourceforge</option>
123 <option value="">No Theme</option>
124 </select>
125
126 &nbsp;&nbsp;&nbsp;&nbsp;
127 <input type="checkbox" id="is_vertical2" value="1" checked />
128 <label for="is_vertical2">Vertical</label>
129
130 &nbsp;&nbsp;&nbsp;&nbsp;
131 <input type="checkbox" id="is_justified2" value="1" checked />
132 <label for="is_justified2">Justified</label>
133
134 &nbsp;&nbsp;&nbsp;&nbsp;
135 <label>Animation:</label>
136 <select id="animation2">
137 <option value="none">None</option>
138 <option value="fade">Fade</option>
139 <option value="slide-horizontal">Slide Horizontal</option>
140 <option value="slide-vertical">Slide Vertical</option>
141 <option value="slide-swing">Slide Swing</option>
142 </select>
143
144 &nbsp;&nbsp;&nbsp;&nbsp;
145 <label>Go To:</label>
146 <select id="got_to_tab2">
147 <option value="1">1</option>
148 <option value="2">2</option>
149 <option value="3">3</option>
150 <option value="4">4</option>
151 </select>
152 </p>
153 <br />
154
155 <!-- SmartTab html -->
156 <div id="smarttab2">
157
158 <ul class="nav">
159 <li>
160 <a class="nav-link" href="#tab2-1">
161 <strong>Tab 1</strong> This is tab description
162 </a>
163 </li>
164 <li>
165 <a class="nav-link" href="#tab2-2">
166 <strong>Tab 2</strong> This is tab description
167 </a>
168 </li>
169 <li>
170 <a class="nav-link" href="#tab2-3">
171 <strong>Tab 3</strong> This is tab description
172 </a>
173 </li>
174 <li>
175 <a class="nav-link" href="#tab2-4">
176 <strong>Tab 4</strong> This is tab description
177 </a>
178 </li>
179 </ul>
180
181 <div class="tab-content">
182 <div id="tab2-1" class="tab-pane" role="tabpanel">
183 <h3>Nested tab</h3>
184
185
186 <div id="smarttab3">
187
188 <ul class="nav">
189 <li>
190 <a class="nav-link" href="#tab3-1">
191 <strong>Tab 1</strong> This is tab description
192 </a>
193 </li>
194 <li>
195 <a class="nav-link" href="#tab3-2">
196 <strong>Tab 2</strong> This is tab description
197 </a>
198 </li>
199 <li>
200 <a class="nav-link" href="#tab3-3">
201 <strong>Tab 3</strong> This is tab description
202 </a>
203 </li>
204 <li>
205 <a class="nav-link" href="#tab3-4">
206 <strong>Tab 4</strong> This is tab description
207 </a>
208 </li>
209 </ul>
210
211 <div class="tab-content">
212 <div id="tab3-1" class="tab-pane" role="tabpanel">
213 <h3>Tab 1 Content</h3>
214 </div>
215 <div id="tab3-2" class="tab-pane" role="tabpanel">
216 <h3>Tab 2 Content</h3>
217 </div>
218 <div id="tab3-3" class="tab-pane" role="tabpanel">
219 <h3>Tab 3 Content</h3>
220 </div>
221 <div id="tab3-4" class="tab-pane" role="tabpanel">
222 <h3>Tab 4 Content</h3>
223 </div>
224 </div>
225 </div>
226
227
228 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
229 </div>
230 <div id="tab2-2" class="tab-pane" role="tabpanel">
231 <h3>Tab 2 Content</h3>
232 <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
233 </div>
234 <div id="tab2-3" class="tab-pane" role="tabpanel">
235 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
236 </div>
237 <div id="tab2-4" class="tab-pane" role="tabpanel">
238 <h3>Tab 4 Content</h3>
239 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
240 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
241 </div>
242 </div>
243 </div>
244
245 <!-- Include jQuery -->
246 <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
247
248 <!-- Include SmartTab JavaScript source -->
249 <script type="text/javascript" src="./js/jquery.smartTab.min.js"></script>
250
251 <script type="text/javascript">
252 $(document).ready(function() {
253
254 // SmartTab initialize
255 $('#smarttab').smartTab({
256 theme: 'pills'
257 });
258 $('#smarttab2').smartTab({
259 theme: 'round',
260 orientation: 'vertical'
261 });
262
263 $('#smarttab3').smartTab();
264
265
266 // Demo Button Events
267 $("#got_to_tab").on("change", function() {
268 // Go to tab
269 var tab_index = $(this).val() - 1;
270 $('#smarttab').smartTab("goToTab", tab_index);
271 return true;
272 });
273
274 $("#is_vertical").on("click", function() {
275 // Change Orientation
276 var options = {
277 orientation: ($(this).prop("checked") == true) ? 'vertical' : 'horizontal'
278 };
279 $('#smarttab').smartTab("setOptions", options);
280 return true;
281 });
282
283 $("#is_justified").on("click", function() {
284 // Change Justify
285 var options = {
286 justified: $(this).prop("checked")
287 };
288
289 $('#smarttab').smartTab("setOptions", options);
290 return true;
291 });
292
293 $("#animation").on("change", function() {
294 // Change theme
295 var options = {
296 transition: {
297 animation: $(this).val()
298 },
299 };
300 $('#smarttab').smartTab("setOptions", options);
301 return true;
302 });
303
304 $("#theme_selector").on("change", function() {
305 // Change theme
306 var options = {
307 theme: $(this).val()
308 };
309 $('#smarttab').smartTab("setOptions", options);
310 return true;
311 });
312
313 // Set selected theme on page refresh
314 $("#theme_selector").change();
315
316 // Demo Button Events 2
317 $("#got_to_tab2").on("change", function() {
318 // Go to tab
319 var tab_index = $(this).val() - 1;
320 $('#smarttab2').smartTab("goToTab", tab_index);
321 return true;
322 });
323
324 $("#is_vertical2").on("click", function() {
325 // Change Orientation
326 var options = {
327 orientation: ($(this).prop("checked") == true) ? 'vertical' : 'horizontal'
328 };
329 $('#smarttab2').smartTab("setOptions", options);
330 return true;
331 });
332
333 $("#is_justified2").on("click", function() {
334 // Change Justify
335 var options = {
336 justified: $(this).prop("checked")
337 };
338
339 $('#smarttab2').smartTab("setOptions", options);
340 return true;
341 });
342
343 $("#animation2").on("change", function() {
344 // Change theme
345 var options = {
346 transition: {
347 animation: $(this).val()
348 },
349 };
350 $('#smarttab2').smartTab("setOptions", options);
351 return true;
352 });
353
354 $("#theme_selector2").on("change", function() {
355 // Change theme
356 var options = {
357 theme: $(this).val()
358 };
359 $('#smarttab2').smartTab("setOptions", options);
360 return true;
361 });
362
363 });
364 </script>
365</body>
366</html>