Context Navigation

source: ether_statistics/web/resources/js/Wijmo.2.2.2/Wijmo-Complete/development-bundle/samples/knockout/ko_wijmenu.html @ 622

Last change on this file since 622 was 622, checked in by vmipsl, 12 years ago
wijmo
File size: 13.9 KB

Line
1	<!doctype html>
2	<html lang="en">
3	<head>
4	<title>Knockout - Menu</title>
5	<link href="../../../../Wijmo-Open/development-bundle/themes/rocket/jquery-wijmo.css"
6	rel="stylesheet" type="text/css" />
7	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijsuperpanel.css"
8	rel="stylesheet" type="text/css" />
9	<link href="../../../../Wijmo-Open/development-bundle/themes/wijmo/jquery.wijmo.wijmenu.css"
10	rel="stylesheet" type="text/css" />
11	<script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
12	<script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
13	<script src="../../../../Wijmo-Open/development-bundle/external/jquery.mousewheel.min.js"
14	type="text/javascript"></script>
15	<script src="../../../../Wijmo-Open/development-bundle/external/jquery.bgiframe-2.1.3-pre.js"
16	type="text/javascript"></script>
17	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijutil.js"
18	type="text/javascript"></script>
19	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijsuperpanel.js"
20	type="text/javascript"></script>
21	<script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijmenu.js"
22	type="text/javascript"></script>
23	<script src="../../../../Wijmo-Open/development-bundle/external/knockout-2.0.0.js"
24	type="text/javascript"></script>
25	<script src="../../../../Wijmo-Open/development-bundle/external/knockout.wijmo.js"
26	type="text/javascript"></script>
27	<script type="text/javascript">
28	//Create ViewModel
29	var viewModel = function () {
30	var self = this;
31	self.disabled = ko.observable(false);
32	self.checkable = ko.observable(false);
33	//self.mode = ko.observable('sliding');
34	self.orientation = ko.observable('horizontal');
35	self.trigger = ko.observable('.wijmo-wijmenu-item');
36	self.triggerEvent = ko.observable('mouseenter');
37	};
38
39	//Bind ViewModel
40	$(document).ready(function () {
41	var vm = new viewModel();
42	ko.applyBindings(vm, $(".container").get(0));
43	});
44	</script>
45	</head>
46	<body class="demo-single">
47	<div class="container">
48	<div class="header">
49	<h2>
50	Menu</h2>
51	</div>
52	<div class="main demo">
53	<!-- Begin demo markup -->
54	<ul id="menu" data-bind="wijmenu: { disabled: disabled, checkable: checkable, orientation: orientation,
55	trigger: trigger, triggerEvent: triggerEvent }">
56	<li><a href="#">Breaking News</a>
57	<ul>
58	<li>
59	<h3>
60	header</h3>
61	</li>
62	<li><a href="#">Entertainment</a></li>
63	<li><a href="http://www.w3schools.com/tags/html5.asp">Politics</a></li>
64	<li><a href="#">A&E</a></li>
65	<li><a href="#">Sports</a>
66	<ul>
67	<li><a href="#">Baseball</a></li>
68	<li><a href="#">Basketball</a></li>
69	<li><a href="#">A really long label would wrap nicely as you can see</a></li>
70	<li><a href="#">Swimming</a>
71	<ul>
72	<li><a href="#">High School</a></li>
73	<li><a href="#">College</a></li>
74	<li><a href="#">Professional</a>
75	<ul>
76	<li><a href="#">Mens Swimming</a>
77	<ul>
78	<li><a href="#">News</a></li>
79	<li><a href="#">Events</a></li>
80	<li><a href="#">Awards</a></li>
81	<li><a href="#">Schedule</a></li>
82	<li><a href="#">Team Members</a></li>
83	<li><a href="#">Fan Site</a></li>
84	</ul>
85	</li>
86	<li><a href="#">Womens Swimming</a>
87	<ul>
88	<li><a href="#">News</a></li>
89	<li><a href="#">Events</a></li>
90	<li><a href="#">Awards</a></li>
91	<li><a href="#">Schedule</a></li>
92	<li><a href="#">Team Members</a></li>
93	<li><a href="#">Fan Site</a></li>
94	</ul>
95	</li>
96	</ul>
97	</li>
98	<li><a href="#">Adult Recreational</a></li>
99	<li><a href="#">Youth Recreational</a></li>
100	<li><a href="#">Senior Recreational</a></li>
101	</ul>
102	</li>
103	<li><a href="#">Tennis</a></li>
104	<li><a href="#">Ice Skating</a></li>
105	<li><a href="#">Javascript Programming</a></li>
106	<li><a href="#">Running</a></li>
107	<li><a href="#">Walking</a></li>
108	</ul>
109	</li>
110	<li><a href="#">Local</a></li>
111	<li><a href="#">Health</a></li>
112	</ul>
113	</li>
114	<li><a href="#">Entertainment</a>
115	<ul>
116	<li><a href="#">Celebrity news</a></li>
117	<li><a href="#">Gossip</a></li>
118	<li><a href="#">Movies</a></li>
119	<li><a href="#">Music</a>
120	<ul>
121	<li><a href="#">Alternative</a></li>
122	<li><a href="#">Country</a></li>
123	<li><a href="#">Dance</a></li>
124	<li><a href="#">Electronica</a></li>
125	<li><a href="#">Metal</a></li>
126	<li><a href="#">Pop</a></li>
127	<li><a href="#">Rock</a>
128	<ul>
129	<li><a href="#">Bands</a>
130	<ul>
131	<li><a href="#">Dokken</a></li>
132	</ul>
133	</li>
134	<li><a href="#">Fan Clubs</a></li>
135	<li><a href="#">Songs</a></li>
136	</ul>
137	</li>
138	</ul>
139	</li>
140	<li><a href="#">Slide shows</a></li>
141	<li><a href="#">Red carpet</a></li>
142	</ul>
143	</li>
144	<li><a href="#">Finance</a>
145	<ul>
146	<li><a href="#">Personal</a>
147	<ul>
148	<li><a href="#">Loans</a></li>
149	<li><a href="#">Savings</a></li>
150	<li><a href="#">Mortgage</a></li>
151	<li><a href="#">Debt</a></li>
152	</ul>
153	</li>
154	<li><a href="#">Business</a></li>
155	</ul>
156	</li>
157	<li><a href="#">Food & Cooking</a>
158	<ul>
159	<li><a href="#">Breakfast</a></li>
160	<li><a href="#">Lunch</a></li>
161	<li><a href="#">Dinner</a></li>
162	<li><a href="#">Dessert</a>
163	<ul>
164	<li><a href="#">Dump Cake</a></li>
165	<li><a href="#">Doritos</a></li>
166	<li><a href="#">Both please.</a></li>
167	</ul>
168	</li>
169	</ul>
170	</li>
171	<li><a href="#">Lifestyle</a></li>
172	<li><a href="#">News</a></li>
173	<li><a href="#">Politics</a></li>
174	<li><a href="#">Sports</a>
175	<ul>
176	<li><a href="#">Baseball</a></li>
177	<li><a href="#">Basketball</a></li>
178	<li><a href="#">Swimming</a>
179	<ul>
180	<li><a href="#">High School</a></li>
181	<li><a href="#">College</a></li>
182	<li><a href="#">Professional</a>
183	<ul>
184	<li><a href="#">Mens Swimming</a>
185	<ul>
186	<li><a href="#">News</a></li>
187	<li><a href="#">Events</a></li>
188	<li><a href="#">Awards</a></li>
189	<li><a href="#">Schedule</a></li>
190	<li><a href="#">Team Members</a></li>
191	<li><a href="#">Fan Site</a></li>
192	</ul>
193	</li>
194	<li><a href="#">Womens Swimming</a>
195	<ul>
196	<li><a href="#">News</a></li>
197	<li><a href="#">Events</a></li>
198	<li><a href="#">Awards</a></li>
199	<li><a href="#">Schedule</a></li>
200	<li><a href="#">Team Members</a></li>
201	<li><a href="#">Fan Site</a></li>
202	</ul>
203	</li>
204	</ul>
205	</li>
206	<li><a href="#">Adult Recreational</a></li>
207	<li><a href="#">Youth Recreational</a></li>
208	<li><a href="#">Senior Recreational</a></li>
209	</ul>
210	</li>
211	<li><a href="#">Tennis</a></li>
212	<li><a href="#">Ice Skating</a></li>
213	<li><a href="#">Javascript Programming</a></li>
214	<li><a href="#">Running</a></li>
215	<li><a href="#">Walking</a></li>
216	</ul>
217	</li>
218	</ul>
219	<!-- End demo markup -->
220	<div class="demo-options">
221	<!-- Begin options markup -->
222	<ul>
223	<li>
224	<label>
225	<span>disabled:</span></label><input type="checkbox" data-bind="checked: disabled" />
226	</li>
227	<li>
228	<label>
229	<span>checkable:</span></label><input type="checkbox" data-bind="checked: checkable" />
230	</li>
231	<li>
232	<label>
233	<span>orientation:</span></label><select data-bind="value: orientation">
234	<option value="horizontal">horizontal</option>
235	<option value="vertical">vertical</option>
236	</select>
237	</li>
238	<li>
239	<label>
240	<span>trigger:</span></label><input type="text" data-bind="value: trigger" />
241	</li>
242	<li>
243	<label>
244	<span>triggerEvent:</span></label><select data-bind="value: triggerEvent">
245	<option value="click">click</option>
246	<option value="mouseenter">mouseenter</option>
247	<option value="dblclick">dblclick</option>
248	<option value="rtclick">rtclick</option>
249	</select>
250	</li>
251	</ul>
252	<!-- End options markup -->
253	</div>
254	</div>
255	<div class="footer demo-description">
256	<p>
257	Wijmo provides a Knockout Integration Library so that all jQuery UI and Wijmo widgets
258	can be used with Knockout declarative syntax.
259	</p>
260	</div>
261	</div>
262	</body>
263	</html>

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

Download in other formats: