Context Navigation

source: trunk/prototype/app/plugins/fgmenu/index.html @ 5341

Revision 5341, 13.1 KB checked in by wmerlotto, 12 years ago (diff)
Ticket #2434 - Commit inicial do novo módulo de agenda do Expresso - expressoCalendar

Line
1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
3	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4	<head>
5	<title>Filament Group Lab</title>
6	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
7
8	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
9	<script type="text/javascript" src="fg.menu.js"></script>
10
11	<link type="text/css" href="fg.menu.css" media="screen" rel="stylesheet" />
12	<link type="text/css" href="theme/ui.all.css" media="screen" rel="stylesheet" />
13
14	<!-- styles for this example page only -->
15	<style type="text/css">
16	body { font-size:62.5%; margin:0; padding:0; }
17	#menuLog { font-size:1.4em; margin:20px; }
18	.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
19
20	.fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
21	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
22	a.fg-button { float:left; }
23	button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
24
25	.fg-button-icon-left { padding-left: 2.1em; }
26	.fg-button-icon-right { padding-right: 2.1em; }
27	.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
28	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
29	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; } /* solo icon buttons must have block properties for the text-indent to work */
30
31	.fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
32	</style>
33
34	<!-- style exceptions for IE 6 -->
35	<!--[if IE 6]>
36	<style type="text/css">
37	.fg-menu-ipod .fg-menu li { width: 95%; }
38	.fg-menu-ipod .ui-widget-content { border:0; }
39	</style>
40	<![endif]-->
41
42	<script type="text/javascript">
43	$(function(){
44	// BUTTONS
45	$('.fg-button').hover(
46	function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
47	function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
48	);
49
50	// MENUS
51	$('#flat').menu({
52	content: $('#flat').next().html(), // grab content from this page
53	showSpeed: 400
54	});
55
56	$('#hierarchy').menu({
57	content: $('#hierarchy').next().html(),
58	crumbDefaultText: ' '
59	});
60
61	$('#hierarchybreadcrumb').menu({
62	content: $('#hierarchybreadcrumb').next().html(),
63	backLink: false
64	});
65
66	// or from an external source
67	$.get('menuContent.html', function(data){ // grab content from another page
68	$('#flyout').menu({ content: data, flyOut: true });
69	});
70	});
71	</script>
72
73	<!-- theme switcher button -->
74	<script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
75	<script type="text/javascript"> $(function(){ $('<div style="position: absolute; top: 20px; right: 300px;" />').appendTo('body').themeswitcher(); }); </script>
76	</head>
77
78	<body>
79
80	<p id="menuLog">You chose: <span id="menuSelection"></span></p>
81
82	<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>
83	<div id="search-engines" class="hidden">
84	<ul>
85	<li><a href="#">Google</a></li>
86	<li><a href="#">Yahoo</a></li>
87	<li><a href="#">MSN</a></li>
88	<li><a href="#">Ask</a></li>
89	<li><a href="#">AOL</a></li>
90	</ul>
91	</div>
92
93	<a tabindex="0" href="menuContent.html" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>flyout menu</a>
94
95	<a tabindex="0" href="#news-items" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchy"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu</a>
96	<div id="news-items" class="hidden">
97	<ul>
98	<li><a href="#">Breaking News</a>
99	<ul>
100	<li><a href="#">Entertainment</a></li>
101	<li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
102	<li><a href="#">A&E</a></li>
103	<li><a href="#">Sports</a>
104	<ul>
105	<li><a href="#">Baseball</a></li>
106	<li><a href="#">Basketball</a></li>
107	<li><a href="#">A really long label would wrap nicely as you can see</a></li>
108	<li><a href="#">Swimming</a>
109	<ul>
110	<li><a href="#">High School</a></li>
111	<li><a href="#">College</a></li>
112	<li><a href="#">Professional</a>
113	<ul>
114	<li><a href="#">Mens Swimming</a>
115	<ul>
116	<li><a href="#">News</a></li>
117	<li><a href="#">Events</a></li>
118	<li><a href="#">Awards</a></li>
119	<li><a href="#">Schedule</a></li>
120	<li><a href="#">Team Members</a></li>
121	<li><a href="#">Fan Site</a></li>
122	</ul>
123	</li>
124	<li><a href="#">Womens Swimming</a>
125	<ul>
126	<li><a href="#">News</a></li>
127	<li><a href="#">Events</a></li>
128	<li><a href="#">Awards</a></li>
129	<li><a href="#">Schedule</a></li>
130	<li><a href="#">Team Members</a></li>
131	<li><a href="#">Fan Site</a></li>
132	</ul>
133	</li>
134	</ul>
135	</li>
136	<li><a href="#">Adult Recreational</a></li>
137	<li><a href="#">Youth Recreational</a></li>
138	<li><a href="#">Senior Recreational</a></li>
139	</ul>
140	</li>
141	<li><a href="#">Tennis</a></li>
142	<li><a href="#">Ice Skating</a></li>
143	<li><a href="#">Javascript Programming</a></li>
144	<li><a href="#">Running</a></li>
145	<li><a href="#">Walking</a></li>
146	</ul>
147	</li>
148	<li><a href="#">Local</a></li>
149	<li><a href="#">Health</a></li>
150	</ul>
151	</li>
152	<li><a href="#">Entertainment</a>
153	<ul>
154	<li><a href="#">Celebrity news</a></li>
155	<li><a href="#">Gossip</a></li>
156	<li><a href="#">Movies</a></li>
157	<li><a href="#">Music</a>
158	<ul>
159	<li><a href="#">Alternative</a></li>
160	<li><a href="#">Country</a></li>
161	<li><a href="#">Dance</a></li>
162	<li><a href="#">Electronica</a></li>
163	<li><a href="#">Metal</a></li>
164	<li><a href="#">Pop</a></li>
165	<li><a href="#">Rock</a>
166	<ul>
167	<li><a href="#">Bands</a>
168	<ul>
169	<li><a href="#">Dokken</a></li>
170	</ul>
171	</li>
172	<li><a href="#">Fan Clubs</a></li>
173	<li><a href="#">Songs</a></li>
174	</ul>
175	</li>
176	</ul>
177	</li>
178	<li><a href="#">Slide shows</a></li>
179	<li><a href="#">Red carpet</a></li>
180	</ul>
181	</li>
182	<li><a href="#">Finance</a>
183	<ul>
184	<li><a href="#">Personal</a>
185	<ul>
186	<li><a href="#">Loans</a></li>
187	<li><a href="#">Savings</a></li>
188	<li><a href="#">Mortgage</a></li>
189	<li><a href="#">Debt</a></li>
190	</ul>
191	</li>
192	<li><a href="#">Business</a></li>
193	</ul>
194	</li>
195	<li><a href="#">Food & Cooking</a>
196	<ul>
197	<li><a href="#">Breakfast</a></li>
198	<li><a href="#">Lunch</a></li>
199	<li><a href="#">Dinner</a></li>
200	<li><a href="#">Dessert</a>
201	<ul>
202	<li><a href="#">Dump Cake</a></li>
203	<li><a href="#">Doritos</a></li>
204	<li><a href="#">Both please.</a></li>
205	</ul>
206	</li>
207	</ul>
208	</li>
209	<li><a href="#">Lifestyle</a></li>
210	<li><a href="#">News</a></li>
211	<li><a href="#">Politics</a></li>
212	<li><a href="#">Sports</a>
213	<ul>
214	<li><a href="#">Baseball</a></li>
215	<li><a href="#">Basketball</a></li>
216	<li><a href="#">Swimming</a>
217	<ul>
218	<li><a href="#">High School</a></li>
219	<li><a href="#">College</a></li>
220	<li><a href="#">Professional</a>
221	<ul>
222	<li><a href="#">Mens Swimming</a>
223	<ul>
224	<li><a href="#">News</a></li>
225	<li><a href="#">Events</a></li>
226	<li><a href="#">Awards</a></li>
227	<li><a href="#">Schedule</a></li>
228	<li><a href="#">Team Members</a></li>
229	<li><a href="#">Fan Site</a></li>
230	</ul>
231	</li>
232	<li><a href="#">Womens Swimming</a>
233	<ul>
234	<li><a href="#">News</a></li>
235	<li><a href="#">Events</a></li>
236	<li><a href="#">Awards</a></li>
237	<li><a href="#">Schedule</a></li>
238	<li><a href="#">Team Members</a></li>
239	<li><a href="#">Fan Site</a></li>
240	</ul>
241	</li>
242	</ul>
243	</li>
244	<li><a href="#">Adult Recreational</a></li>
245	<li><a href="#">Youth Recreational</a></li>
246	<li><a href="#">Senior Recreational</a></li>
247	</ul>
248	</li>
249	<li><a href="#">Tennis</a></li>
250	<li><a href="#">Ice Skating</a></li>
251	<li><a href="#">Javascript Programming</a></li>
252	<li><a href="#">Running</a></li>
253	<li><a href="#">Walking</a></li>
254	</ul>
255	</li>
256	</ul>
257	</div>
258
259	<a tabindex="0" href="#news-items-2" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="hierarchybreadcrumb"><span class="ui-icon ui-icon-triangle-1-s"></span>ipod-style menu w/ breadcrumb</a>
260	<div id="news-items-2" class="hidden">
261	<ul>
262	<li><a href="#">Breaking News</a>
263	<ul>
264	<li><a href="#">Entertainment</a></li>
265	<li><a href="#">Politics</a></li>
266	<li><a href="#">A&E</a></li>
267	<li><a href="#">Sports</a>
268	<ul>
269	<li><a href="#">Baseball</a></li>
270	<li><a href="#">Basketball</a></li>
271	<li><a href="#">A really long label would wrap nicely as you can see</a></li>
272	<li><a href="#">Swimming</a>
273	<ul>
274	<li><a href="#">High School</a></li>
275	<li><a href="#">College</a></li>
276	<li><a href="#">Professional</a>
277	<ul>
278	<li><a href="#">Mens Swimming</a>
279	<ul>
280	<li><a href="#">News</a></li>
281	<li><a href="#">Events</a></li>
282	<li><a href="#">Awards</a></li>
283	<li><a href="#">Schedule</a></li>
284	<li><a href="#">Team Members</a></li>
285	<li><a href="#">Fan Site</a></li>
286	</ul>
287	</li>
288	<li><a href="#">Womens Swimming</a>
289	<ul>
290	<li><a href="#">News</a></li>
291	<li><a href="#">Events</a></li>
292	<li><a href="#">Awards</a></li>
293	<li><a href="#">Schedule</a></li>
294	<li><a href="#">Team Members</a></li>
295	<li><a href="#">Fan Site</a></li>
296	</ul>
297	</li>
298	</ul>
299	</li>
300	<li><a href="#">Adult Recreational</a></li>
301	<li><a href="#">Youth Recreational</a></li>
302	<li><a href="#">Senior Recreational</a></li>
303	</ul>
304	</li>
305	<li><a href="#">Tennis</a></li>
306	<li><a href="#">Ice Skating</a></li>
307	<li><a href="#">Javascript Programming</a></li>
308	<li><a href="#">Running</a></li>
309	<li><a href="#">Walking</a></li>
310	</ul>
311	</li>
312	<li><a href="#">Local</a></li>
313	<li><a href="#">Health</a></li>
314	</ul>
315	</li>
316	<li><a href="#">Entertainment</a>
317	<ul>
318	<li><a href="#">Celebrity news</a></li>
319	<li><a href="#">Gossip</a></li>
320	<li><a href="#">Movies</a></li>
321	<li><a href="#">Music</a>
322	<ul>
323	<li><a href="#">Alternative</a></li>
324	<li><a href="#">Country</a></li>
325	<li><a href="#">Dance</a></li>
326	<li><a href="#">Electronica</a></li>
327	<li><a href="#">Metal</a></li>
328	<li><a href="#">Pop</a></li>
329	<li><a href="#">Rock</a>
330	<ul>
331	<li><a href="#">Bands</a>
332	<ul>
333	<li><a href="#">Dokken</a></li>
334	</ul>
335	</li>
336	<li><a href="#">Fan Clubs</a></li>
337	<li><a href="#">Songs</a></li>
338	</ul>
339	</li>
340	</ul>
341	</li>
342	<li><a href="#">Slide shows</a></li>
343	<li><a href="#">Red carpet</a></li>
344	</ul>
345	</li>
346	<li><a href="#">Finance</a>
347	<ul>
348	<li><a href="#">Personal</a>
349	<ul>
350	<li><a href="#">Loans</a></li>
351	<li><a href="#">Savings</a></li>
352	<li><a href="#">Mortgage</a></li>
353	<li><a href="#">Debt</a></li>
354	</ul>
355	</li>
356	<li><a href="#">Business</a></li>
357	</ul>
358	</li>
359	<li><a href="#">Food & Cooking</a>
360	<ul>
361	<li><a href="#">Breakfast</a></li>
362	<li><a href="#">Lunch</a></li>
363	<li><a href="#">Dinner</a></li>
364	<li><a href="#">Dessert</a>
365	<ul>
366	<li><a href="#">Dump Cake</a></li>
367	<li><a href="#">Doritos</a></li>
368	<li><a href="#">Both please.</a></li>
369	</ul>
370	</li>
371	</ul>
372	</li>
373	<li><a href="#">Lifestyle</a></li>
374	<li><a href="#">News</a></li>
375	<li><a href="#">Politics</a></li>
376	<li><a href="#">Sports</a>
377	<ul>
378	<li><a href="#">Baseball</a></li>
379	<li><a href="#">Basketball</a></li>
380	<li><a href="#">Swimming</a>
381	<ul>
382	<li><a href="#">High School</a></li>
383	<li><a href="#">College</a></li>
384	<li><a href="#">Professional</a>
385	<ul>
386	<li><a href="#">Mens Swimming</a>
387	<ul>
388	<li><a href="#">News</a></li>
389	<li><a href="#">Events</a></li>
390	<li><a href="#">Awards</a></li>
391	<li><a href="#">Schedule</a></li>
392	<li><a href="#">Team Members</a></li>
393	<li><a href="#">Fan Site</a></li>
394	</ul>
395	</li>
396	<li><a href="#">Womens Swimming</a>
397	<ul>
398	<li><a href="#">News</a></li>
399	<li><a href="#">Events</a></li>
400	<li><a href="#">Awards</a></li>
401	<li><a href="#">Schedule</a></li>
402	<li><a href="#">Team Members</a></li>
403	<li><a href="#">Fan Site</a></li>
404	</ul>
405	</li>
406	</ul>
407	</li>
408	<li><a href="#">Adult Recreational</a></li>
409	<li><a href="#">Youth Recreational</a></li>
410	<li><a href="#">Senior Recreational</a></li>
411	</ul>
412	</li>
413	<li><a href="#">Tennis</a></li>
414	<li><a href="#">Ice Skating</a></li>
415	<li><a href="#">Javascript Programming</a></li>
416	<li><a href="#">Running</a></li>
417	<li><a href="#">Walking</a></li>
418	</ul>
419	</li>
420	</ul>
421	</div>
422
423	</body>
424	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: