forked from ralyodio/tabbed-navigation
/
index.htm
132 lines (118 loc) · 3.99 KB
/
index.htm
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
<!doctype html>
<html lang="en">
<head>
<title>jQuery Plugin: Tabbed Navigation - jQuery.tabbed()</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="img/favicon.png" type="image/png" />
<link href="jquery.tabbed.css" rel="stylesheet" type="text/css" media="screen" />
<!--[if IE]>
<link href="jquery.tabbed.ie.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->
<style>
html, html * { margin: 0; padding: 0; }
.clfx:after { content: '.'; display: block; visibility: hidden; overflow: hidden; clear: both; font-size: 0; height: 0; }
header, article, section, footer, nav { display: block; }
html { background: #222; }
body { background: #fff; font: 14px/1.2 arial, helvetica, sans-serif; margin: 1% auto; width: 600px; padding: 20px; border-radius: 10px; border: 1px solid #000; box-shadow: 0px 3px 60px #000; }
p { margin: 10px auto; }
ol { margin-left: 40px; }
h2 { margin: 10px 0; }
#example { width: 400px; margin: 50px; }
footer { margin-top: 20px; }
.tabbed { margin: 40px 0; }
</style>
</head>
<body>
<h1>jQuery.tabbed() navigation plugin</h1>
<p>jQuery.tabbed() navigation is a light-weight jQuery plugin for handling tabbed navigation with minimal markup.</p>
<section id="example">
<h1>Static</h1>
<div class="tabbed">
<ul class="tabs">
<li><a href="#foo">Foo</a></li>
<li><a href="#bar">Bar</a></li>
<li><a href="#baz">Baz</a></li>
</ul>
<div class="contents">
<div class="content" id="foo">Foo static content</div>
<div class="content" id="bar">Bar static content</div>
<div class="content" id="baz">Baz static content</div>
</div>
</div>
<h1>Ajax</h1>
<div class="tabbed">
<ul class="tabs">
<li><a href="ajax/content.php?tab=foo">Foo</a></li>
<li><a href="ajax/content.php?tab=bar">Bar</a></li>
<li><a href="ajax/content.php?tab=baz">Baz</a></li>
</ul>
<div class="contents">
<div class="content" id="foo"></div>
<div class="content" id="bar"></div>
<div class="content" id="baz"></div>
</div>
</div>
<h1>Mixed</h1>
<div class="tabbed">
<ul class="tabs">
<li><a href="#foo">Foo</a></li>
<li><a href="ajax/content.php?tab=bar">Bar</a></li>
<li><a href="ajax/content.php?tab=baz">Baz</a></li>
<li><a href="#biz">Biz</a></li>
</ul>
<div class="contents">
<div class="content" id="foo">Foo static content</div>
<div class="content" id="bar"></div>
<div class="content" id="baz"></div>
<div class="content" id="biz">Biz static content</div>
</div>
</div>
</section>
<p>View source to see examples.</p>
<p>Follow the project or read the documentation on <a href="https://github.com/chovy/tabbed-navigation">github.com/chovy/tabbed-navigation</a></p>
<h2>Files</h2>
<ol id="files">
<li>jquery.tabbed.js</li>
<li>jquery.tabbed.css</li>
<li>jquery.tabbed.ie.css</li>
</ol>
<h2>Download</h2>
<p><a href="http://github.com/downloads/chovy/tabbed-navigation/jquery.tabbed-1.0.2.tgz">jquery.tabbed-1.0.2.tgz</a></p>
<h2>Requirements</h2>
<p><a href="http://jquery.com">jQuery</a>: Tested with jQuery 1.4, 1.6.2, 1.7.1, Firefox 10, Safari 5.1, Chrome 17, Opera 11, IE 7/8/9.</p>
<h2>Todo list</h2>
<ol id="todo">
<li>Show spinner when loading via ajax</li>
<li>Link to open tab via hash #foo</li>
<li>Tab themes</li>
<li><strike>Load tab contents via ajax</strike></li>
</ol>
<footer>
<small>Copyright © 2012 Anthony Ettinger</small>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.tabbed.js"></script>
<script>
var log = function(){
var w = window;
return {
add: function(m) { w.console && w.console.log(m) },
js: function() { w.console && w.console.profile() },
jsEnd: function() { w.console && w.console.profileEnd() },
prof: function(code) {
if ( w.console ) {
console.profile();
try { code() } catch(err) { };
console.profileEnd();
}
}
}
}();
</script>
<script>
$(function(){
$(".tabbed").tabbed();
});
</script>
</body>
</html>