/
example.html
103 lines (92 loc) · 6.98 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>Tab Manager Stuff</title>
<!-- vendor -->
<script src="jquery/jquery.js"></script>
<script src="underscore/underscore.js"></script>
<script src="backbone/backbone.js"></script>
<script src="backbone/backbone.marionette.js"></script>
<!-- my lib -->
<script src="tabs.js"></script>
<style>
._tab_manager {
font-size: 30px;
padding: 3px;
margin: 3px;
border: 1px solid blue;
}
.tab-normal {
background-color: #000;
color: white;
}
.tab-selected {
background-color: yellow;
color: black;
font-size: 40px;
}
div.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Tab Manager</h1>
<button id="select-contact-tab">Select contact tab!</button>
<button id="remove-news-tab">Remove news tab</button>
<h2>Example tabs</h2>
<div id="tabs-go-here"></div>
<div id="about" class="hidden">
<p>Morbi pulvinar posuere leo, sed euismod sem lobortis et. In nec magna id augue tempus adipiscing sit amet sed turpis. In imperdiet turpis ac tellus dignissim ullamcorper. Suspendisse consectetur eleifend gravida. Praesent dolor urna, sodales non dignissim et, interdum non odio. Sed tempus dignissim posuere. Curabitur pulvinar auctor arcu, nec tristique nisi tincidunt id. Nulla facilisi. Pellentesque ac enim ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Praesent et sapien nibh, eget porttitor tortor. Donec facilisis mi sed neque venenatis placerat. Phasellus non velit in dui suscipit porta. Sed pellentesque libero euismod turpis rhoncus vitae consectetur enim laoreet. Suspendisse eget enim nec dolor aliquet vehicula. Fusce rutrum, est eu adipiscing consequat, orci libero viverra sem, vitae hendrerit nulla nisl in sapien. Nunc sit amet nisi at mi vestibulum tristique. </p>
</div>
<div id="news" class="hidden">
<p>Donec sagittis, felis non molestie viverra, odio lacus interdum velit, suscipit hendrerit purus dolor in nunc. Quisque feugiat lorem et risus rutrum ullamcorper. Proin ut eros in metus placerat vulputate. Proin ac massa fermentum est pharetra congue nec non libero. Vestibulum eget purus orci, in mattis nisl. In ornare tempor lectus, vel faucibus orci posuere vitae. Donec dignissim nibh facilisis nisi consequat elementum. Sed lacinia mauris hendrerit enim ullamcorper nec rutrum felis sodales. Donec vestibulum laoreet tortor, et rhoncus mi porta eu. Sed eu convallis nisl. Donec tempus magna ac est rhoncus semper. Vestibulum pellentesque dui vitae nisi fringilla sit amet sagittis arcu iaculis. Vestibulum vitae nibh justo, non ullamcorper tellus. In hac habitasse platea dictumst.</p>
<p>Quisque suscipit elementum odio, in fermentum neque cursus non. Donec et mi odio. Quisque tempor mattis lectus, a lobortis sapien porta malesuada. Aliquam nisl massa, pretium eu vestibulum et, dictum sed augue. Nulla nec dictum magna. Duis sodales semper mollis. Proin eu ipsum libero. Donec massa purus, lobortis non feugiat in, fringilla non felis. In tempus, turpis sit amet ultrices consectetur, diam nulla vulputate leo, ut molestie massa libero non elit. Nunc dapibus elementum suscipit. In et velit massa. Donec varius fermentum iaculis. Vestibulum in nulla tincidunt tellus hendrerit ornare et eget elit. Vestibulum odio nisl, vestibulum fringilla ultricies at, sagittis condimentum magna. Fusce vulputate erat in enim feugiat eu eleifend urna elementum. In tristique tincidunt massa ut vulputate. </p>
</div>
<div id="contact" class="hidden">
<p>Integer quis ligula ut orci tincidunt lobortis id blandit orci. Duis ut massa nec est mattis suscipit. Duis sit amet odio odio, ac rutrum lectus. Nam posuere ante vel purus egestas sit amet tincidunt enim fermentum. Vivamus consectetur dolor sit amet lacus ultricies dignissim. Morbi eu massa ac mi tristique rhoncus ut ut neque. Ut venenatis diam eget mauris dictum iaculis. In tellus enim, lacinia luctus consectetur eget, dapibus sit amet mi. Phasellus ut ipsum est. Aenean vitae enim est. Cras vel velit non ipsum lacinia gravida. Morbi pretium, urna ac adipiscing mollis, mi lorem ullamcorper sapien, et malesuada ante neque nec orci.</p>
<p>Aliquam tempor feugiat elementum. Maecenas interdum sollicitudin odio sed pulvinar. Quisque ornare, lorem at dapibus vehicula, mi neque porttitor mauris, eu aliquam felis nibh ac sapien. Suspendisse potenti. Aliquam semper tristique elit, aliquet mattis leo pulvinar a. Donec a risus quis leo ullamcorper fermentum. Morbi non urna felis. Etiam felis metus, consectetur ac accumsan sed, fringilla sed nisi. Cras arcu nisi, scelerisque eu rutrum a, faucibus quis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis dapibus tellus, in commodo dui posuere at. Curabitur consectetur lorem vel risus laoreet accumsan. Suspendisse vestibulum enim a felis tristique vitae cursus libero volutpat. Curabitur elementum, nunc ac cursus posuere, nisi justo consequat felis, a molestie nisi dolor vehicula est. Nam sit amet imperdiet quam. Sed molestie enim et est rhoncus rutrum. </p>
</div>
<script>
// instance of our tab manager
var tabManager = new TabManager('#tabs-go-here');
// define a function to be called when a tab is selected or un-selected
function fnTabCallback() {
var selector = '#' + this.model.id;
selector = selector.toLowerCase();
$(selector).toggleClass('hidden');
}
// Add some tabs
tabManager.addTab({
id: 'About',
selectCallback: fnTabCallback,
unselectCallback: fnTabCallback,
order: 1
});
tabManager.addTab({
id: 'News',
selectCallback: fnTabCallback,
unselectCallback: fnTabCallback,
order: 2
});
tabManager.addTab({
id: 'Contact',
selectCallback: fnTabCallback,
unselectCallback: fnTabCallback,
order: 3
});
// set a template to control how our tabs should be displayed
tabManager.setTemplate("[<%= order %>] <%= id %>");
// startup the tab manager and have 'News' be selected by default
tabManager.render('News');
// callbacks for some buttons on the page
$('#select-contact-tab').click(function() {
tabManager.selectTab('Contact');
});
$('#remove-news-tab').click(function() {
tabManager.removeTab('News');
});
</script>
</body>
</html>