-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
188 lines (186 loc) · 9.75 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet/less" href="less/core.less" />
<script src="js/vendor/less/less-1.3.0.min.js" type="text/javascript"></script>
<script data-main="js/core" src="js/vendor/require/require.js"></script>
</head>
</head>
<body>
<div class="navbar">
<div class="innernav">
<ul class="nav">
<li><a href="" data-trigger="dropdown" aria-owns="dropdown1">Simple dropdowns</a></li>
<li><a href="" data-trigger="dropdown" aria-owns="dropdown2">Regular dropdowns</a></li>
<li><a href="" data-trigger="inlinedialog" aria-owns="sticky" data-align="left" data-valign="below">Sticky dropdowns</a></li>
<li><a href="" data-trigger="dropdown" aria-owns="dropdown4">Hovers</a></li>
<li><a href="" data-trigger="dropdown" aria-owns="dropdown5">Keyboard navigation</a></li>
</ul>
<div class="pull-right">
<ul class="nav">
<li><a href="" data-trigger="dropdown" aria-owns="dropdown3" data-align="right">Alternate alignment</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="main">
<h1>Important: Before we get started</h1>
<p>You can't help but have noticed how unattractive this page is. This is purposful. Atlas is designed to be used with your existing styles. It doesn't force you to use its own beautiful and manicured styles. You can just drop this into your site and start using it without it interfering with you existing css. As it has none.</p>
<p>Actually, that last paragraph was a bit of a lie. There are in fact 4 classes that are required by Atlas: A hidden class, an invisible class, a disabled class and an active class. These can be defined in the settings file, but by default they are:
<ul>
<li>atlas-hide</li>
<li>atlas-invisible</li>
<li>atlas-active</li>
<li>atlas-disabled</li>
</ul>
<p>You can find out a bit more about the settings in the settings tab below</p>
<h1>Tabs tabbing</h1>
<p>Tabs are a staple of any web application they allow associated data to sit on the screen without taking up too much space. This is a standard vertical tab, the buttons on the left change the content on the right</p>
<div id="tabs" data-trigger="tab">
<ul class="tab-menu" data-trigger="menu">
<li><a href="" aria-owns="settings">Configuration settings</a></li>
<li><a href="" aria-owns="panel1">Helptips</a></li>
<li><a href="" aria-owns="panel2">Popovers</a></li>
<li><a href="" aria-owns="panel3">Dialogs</a></li>
</ul>
<div class="tab-panel" id="settings">
<h2>Settings</h2>
<p>Atlas can be configured, to some excent anyway. The configuration options aim to make the api fit into any existing site or application where there may be conflicts with names, classes, events or plugins. All of the settings for Atlas are placed within the settigns.js file which can be found in the js/ folder.</p>
<p>Configuration can be split into 3 parts. Attribute configuration, class configuration and plugin configuration.</p>
<h3>Attribute configuration</h3>
<p>By default Atlas uses the the data-trigger and aria-owns attributes to configure plugins in the markup. These can be altered by changing the pluginAttribute and panelAttribute settings.</p>
<h3>Class configuration</h3>
<p>There are four classes used in Atlas; the classes are used for hidden, invisible, active and disabled items. To configure these classes you'll need to update the appropriate settings. These are: hiddenClass, invisibleClass, activeClass and disabledClass</p>
<h3>Plugin configuration</h3>
<p>Each of the plugins in Atlas is a jQuery plugin, it is not unlikely that there may be some conflict between the Atlas plugins and other existing plugins. To address this issue Atlas provides a way for each plugin to be renamed. Inside the settings file there is a section for pluginIdentifiers containing a name for each plugin. Updating the right hand side of this will change the names and events for the relevent plugin</p>
</div>
<div class="tab-panel atlas-hide" id="panel1">
<h2>Helptips</h2>
<p>Helptips are those things that you click when you need help with stuff.
The can appear pretty much anywhere and can container pretty much anything.</p>
<p>By default a <a href="" data-trigger="helptip" aria-owns="helptip1">helptip</a> appears
like this but that can be changed...</p>
<p>This next <a href="" data-trigger="helptip" aria-owns="helptip2" data-align="center" data-valign="above">helptip</a> appears in a completely different place!</p>
</div>
<div class="tab-panel atlas-hide" id="panel2">
<h2>Popovers</h2>
<p>Popovers are really very similar to Helptips. The biggest difference is in the way that they are displayed to the user. Whereas the Helptip relies on a click to show, the popover only requies that the use hover over the element</p>
<p>A basic popover might look like this <a href="" data-trigger="popover" aria-owns="popover1">Hover me</a></p>
<p>But you can use other elements and different positioning too</p>
<img src="http://freeimagesarchive.com/data/media/26/7_cat.jpg" data-trigger="popover" aria-owns="popover2" data-align="center" data-valign="middle" />
</div>
<div class="tab-panel atlas-hide" id="panel3">
<h2>Dialogs</h2>
<p>Dialogs are usually big panels with whole reams of functionality, but they can be as simple as a box with some information and a button to close</p>
<p>This is an example of a simple dialog <a href="" data-trigger="dialog" aria-owns="dialog1">Open me</a></p>
</div>
</div>
<p>But tabs can also be aligned above the panels, below them, to the right, in fact the tabs don't strictly need to be near the panels that they display at all! This is another common layout with tabs on top</p>
<div id="tabs2" data-trigger="tab">
<ul class="tab-menu-hz" data-trigger="menubar">
<li><a href="" aria-owns="panel4">Vertical</a></li>
<li><a href="" aria-owns="panel5">Tabs are</a></li>
<li><a href="" aria-owns="panel6">Awesome</a></li>
</ul>
<div class="tab-panel-hz" id="panel4"><p>Vertical tabs work in the same way as normal tabs. You just need to apply the appropriate styles</div>
<div class="tab-panel-hz atlas-hide" id="panel5"><p>There really is no difference between verical and horizontal panels. The markup pattern remains the same!</div>
<div class="tab-panel-hz atlas-hide" id="panel6">
<p>MOAR panels!</p>
</div>
</div>
</div>
<p>The end</p>
</div>
<div class="navbar">
<div class="innernav">
<ul class="nav">
<li><a href="">more things</a></li>
<li><a href="" data-trigger="dropdown" aria-owns="dropdown6" data-align="center" data-valign="above">More dropdown alignments</a></li>
</ul>
</div>
</div>
<div id="dropdown1" class="atlas-hide dropdown">
<p>The simplist form of dropdown probably just contains text and is aligned to the bottom left of its trigger</p>
</div>
<div id="dropdown2" class="dropdown atlas-hide">
<ul class="menu">
<li><a href="">This is</a></li>
<li><a href="">Probably</a></li>
<li><a href="">The most common kind</a></li>
<li><a href="">Of</a></li>
<li><a href="">Dropdown</a></li>
</ul>
</div>
<div id="sticky" class="dropdown atlas-hide">
<div class="pad">
<h2>Aloha!</h2>
<p>But you aren't restricted to just lists inside dropdowns.</p>
<p>This one is sticky, so it won't go away until you submit the form. Oh yeah, you can have forms in here too</p>
<form>
<input type="text"><br />
<input type="submit" />
</form>
</div>
</div>
<div id="dropdown3" class="dropdown atlas-hide">
<ul class="menu right">
<li><a href="http://www.google.com">Dropdowns</a></li>
<li><a href="">Can also</a></li>
<li><a href="">Be aligned to</a></li>
<li><a href="">Different</a></li>
<li><a href="">Edges</a></li>
</ul>
</div>
<div id="dropdown4" class="dropdown atlas-hide">
<ul class="menu">
<li><a href="">Menus</a></li>
<li><a href="">Will generally</a></li>
<li><a href="">Have some</a></li>
<li><a href="">Hover</a></li>
<li><a href="">State</a></li>
</ul>
</div>
<div id="dropdown5" class="dropdown atlas-hide">
<ul class="menu" data-trigger="menu" aria-flowto="secondary">
<li><a href="">But with a </a></li>
<li><a href="">Little magic</a></li>
<li><a href="">You can do nice things</a></li>
<li><a href="">With</a></li>
<li><a href="">Keyboard navigation</a></li>
</ul>
<ul class="menu" id="secondary" data-trigger="menu">
<li><a href="">You</a></li>
<li><a href="">Can even have</a></li>
<li><a href="">Multiple menus</a></li>
<li><a href="">With chained</a></li>
<li><a href="">Keyboard nav</a></li>
</ul>
</div>
<div id="dropdown6" class="triangle-border atlas-hide">
<p>And of course, dropdowns don't <em>have</em> to drop down...</p>
<ul class="menu">
<li><a href="">This is</a></li>
<li><a href="">probably more</a></li>
<li><a href="">of a</a></li>
<li><a href="">Dropup</a></li>
<li><a href="">Though</a></li>
</ul>
</div>
<div id="helptip1" class="atlas-hide helptip">
<p>The contents of a helptip can be pretty much anything you want</p>
</div>
<div id="helptip2" class="atlas-hide helptip">
<p>This tip is placed above and in the middle of the text it relates to, but it could appear anywhere</p>
</div>
<div id="popover1" class="atlas-hide popover">
<p>A simple popover</p>
</div>
<div id="popover2" class="atlas-hide popover">
<p>Ahhh, what a cute cat!</p>
</div>
<div id="dialog1" class="atlas-hide dialog">
<p>Congratulations on clicking me. Now close me by <a href="" data-trigger="dialog">Clicking here</a></p>
</div>
</body>
</html>