-
Notifications
You must be signed in to change notification settings - Fork 25
/
yaml.html
121 lines (108 loc) · 4.38 KB
/
yaml.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Demo: Accessible Tabs & YAML</title>
<!-- Mobile viewport optimisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="./css/yaml-layout.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<ul class="ym-skiplinks">
<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
</ul>
<div class="ym-wrapper">
<div class="ym-wbox">
<header>
<h1>Project Name</h1>
</header>
<nav id="nav">
<div class="ym-hlist" >
<ul>
<li class="active"><strong>Active</strong></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<form class="ym-searchform">
<input class="ym-searchfield" type="search" placeholder="Search..." />
<input class="ym-searchbutton" type="submit" value="Search" />
</form>
</div>
</nav>
<div id="main">
<div class="ym-column linearize-level-1">
<div class="ym-col1">
<div class="ym-cbox">
<h2>Accessible Tabs & YAML</h2>
<p>YAML provides the <em>Accessible Tabs</em> Plugin as an official Add-on, including modern,
printable UI theme.</p>
<div class="jquery_tabs">
<h4>Some blind text</h4>
<div class="tabbody">
<h5>Lorem ipsum ... </h5>
<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
</div>
<h4>Some more blind text</h4>
<div class="tabbody">
<h5>Lorem ipsum ... </h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. </p>
<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
</div>
<h4>anything else</h4>
<div class="tabbody">
<p>Here could be your content</p>
</div>
</div>
<h3>Usage</h3>
<pre>
$(document).ready(function(){
$(".jquery_tabs").accessibleTabs({
clearfixClass: 'ym-clearfix'
});
});
</pre>
<p class="about">
Want to learn more about this? <a href="http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php">jQuery Accessible Tabs - How to make tabs REALLY accessible<br></a>
Or check out <a href="index.html">more Examples</a>
</p>
</div>
</div>
<aside class="ym-col3">
<div class="ym-cbox">
<h2>About YAML</h2>
<p>YAML is a modular CSS framework for truly <em>flexible</em>, <em>accessible</em> and <em>responsive</em> websites.</p>
<p>If you want to know more, visit <a href="http://www.yaml.de">www.yaml.de</a>.</p>
</div>
</aside>
</div>
</div>
<footer>
<p>© Company 2012 – Layout based on <a href="http://www.yaml.de">YAML</a></p>
</footer>
</div>
</div>
<!-- full skip link functionality in webkit browsers -->
<script src="../yaml/core/js/yaml-focusfix.js"></script>
<!-- jQuery & Plugins -->
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".jquery_tabs").accessibleTabs({
clearfixClass:"ym-clearfix"
});
});
</script>
</body>
</html>