forked from jellekralt/Responsive-Tabs
/
demo.html
106 lines (94 loc) · 7 KB
/
demo.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery Responsive Tabs</title>
<link type="text/css" rel="stylesheet" href="css/responsive-tabs.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<!--Horizontal Tab-->
<div id="horizontalTab">
<ul>
<li><a href="#tab-1">Responsive Tab-1</a></li>
<li><a href="#tab-2">Responsive Tab-2</a></li>
<li><a href="#tab-3">Responsive Tab-3</a></li>
<li><a href="#tab-4">Responsive Tab-4</a></li>
<li><a href="#tab-5">Responsive Tab-5</a></li>
</ul>
<div id="tab-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu scelerisque eros. Fusce ante orci, hendrerit sit amet metus sit amet, venenatis sodales felis. Morbi vel mi in leo dignissim convallis in a neque. Suspendisse sollicitudin nibh non dapibus condimentum. Etiam sit amet arcu ultricies, porttitor justo eget, scelerisque urna. Praesent non ligula nec ligula euismod condimentum eget sed augue. Ut feugiat, turpis id sollicitudin vestibulum, tellus massa adipiscing nisl, quis cursus nisl arcu vel ipsum.</p>
</div>
<div id="tab-2">
<p>Quisque sodales sodales lacus pharetra bibendum. Etiam commodo non velit ac rhoncus. Mauris euismod purus sem, ac adipiscing quam laoreet et. Praesent vulputate ornare sem vel scelerisque. Ut dictum augue non erat lacinia, sed lobortis elit gravida. Proin ante massa, ornare accumsan ultricies et, posuere sit amet magna. Praesent dignissim, enim sed malesuada luctus, arcu sapien sodales sapien, ut placerat eros nunc vel est. Donec tristique mi turpis, et sodales nibh gravida eu. Etiam odio risus, porttitor non lacus id, rhoncus tempus tortor. Curabitur tincidunt molestie turpis, ut luctus nibh sollicitudin vel. Sed vel luctus nisi, at mattis metus. Aenean ultricies dolor est, a congue ante dapibus varius. Nulla at auctor nunc. Curabitur accumsan feugiat felis ut pretium. Praesent semper semper nisi, eu cursus augue.</p>
</div>
<div id="tab-3">
<p>Mauris facilisis elit ut sem eleifend accumsan molestie sit amet dolor. Pellentesque dapibus arcu eu lorem laoreet, vitae cursus metus mattis. Nullam eget porta enim, eu rutrum magna. Duis quis tincidunt sem, sit amet faucibus magna. Integer commodo, turpis consequat fermentum egestas, leo odio posuere dui, elementum placerat eros erat id augue. Nullam at eros eget urna vestibulum malesuada vitae eu mauris. Aliquam interdum rhoncus velit, quis scelerisque leo viverra non. Suspendisse id feugiat dui. Nulla in aliquet leo. Proin vel magna sed est gravida rhoncus. Mauris lobortis condimentum nibh, vitae bibendum tortor vehicula ac. Curabitur posuere arcu eros.</p>
</div>
<div id="tab-4">
<p>Donec egestas facilisis sapien sit amet euismod. Donec mollis lectus neque, in consectetur magna sodales et. Nam rutrum libero vitae magna sollicitudin aliquet. In tristique ultrices euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pretium congue sodales. Curabitur egestas, metus sed ultrices suscipit, metus nibh vehicula ligula, vel volutpat sapien nibh sed quam. Etiam elementum nisi eu risus congue, ut eleifend lectus ultricies. Vivamus in ligula fermentum, bibendum sapien eget, pretium est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ante non risus rutrum faucibus.</p>
</div>
<div id="tab-5">
<p>Proin dignissim faucibus odio sollicitudin sagittis. Phasellus aliquet, erat vitae mollis consectetur, enim lectus ornare libero, et porta mi dui eu tellus. Morbi lobortis, elit at euismod porta, magna lacus mattis massa, a lacinia ligula risus et lectus. Sed et aliquam ligula. Nunc venenatis orci magna, quis facilisis sem porta non. Nunc sodales arcu in consectetur malesuada. Maecenas varius justo lacus, scelerisque viverra tellus luctus eu. Nam imperdiet ultricies suscipit. Ut urna mauris, eleifend quis lacinia non, mollis id libero. Praesent pharetra viverra ipsum at posuere. Quisque commodo tortor nec hendrerit faucibus. Fusce convallis urna et vehicula tincidunt. Duis sed vehicula justo, eu placerat nisi. Donec facilisis augue non turpis semper, eget condimentum mauris malesuada. Nunc in dignissim mi, sed laoreet felis.</p>
</div>
</div>
<p><button id="start-rotation">Start Rotation</button> <button id="stop-rotation">Stop Rotation</button> </p>
<p>
<button class="select-tab" value="0">1</button>
<button class="select-tab" value="1">2</button>
<button class="select-tab" value="2">3</button>
<button class="select-tab" value="3">4</button>
<button class="select-tab" value="4">5</button>
<p>
<p><button id="enable-tab">Enable Tab 4</button> <button id="disable-tab">Disable Tab 4</button> </p>
<p class="info"></p>
<!-- jQuery with fallback to the 1.* for old IE -->
<!--[if lt IE 9]>
<script src="js/jquery-1.11.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="js/jquery-2.1.0.min.js"></script>
<!--<![endif]-->
<!-- Responsive Tabs JS -->
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $tabs = $('#horizontalTab');
$tabs.responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
},
activateState: function(e, state) {
//console.log(state);
$('.info').html('Switched from <strong>' + state.oldState + '</strong> state to <strong>' + state.newState + '</strong> state!');
}
});
$('#start-rotation').on('click', function() {
$tabs.responsiveTabs('startRotation', 1000);
});
$('#stop-rotation').on('click', function() {
$tabs.responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$tabs.responsiveTabs('active');
});
$('#enable-tab').on('click', function() {
$tabs.responsiveTabs('enable', 3);
});
$('#disable-tab').on('click', function() {
$tabs.responsiveTabs('disable', 3);
});
$('.select-tab').on('click', function() {
$tabs.responsiveTabs('activate', $(this).val());
});
});
</script>
</body>
</html>