Mercurial > hg > MPIWGThesaurus

comparison jquery-ui/development-bundle/demos/index.html @ 0:b2e4605f20b2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
beta version
author dwinter
date Thu, 30 Jun 2011 09:07:49 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b2e4605f20b2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>jQuery UI Demos</title>
6 <link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
7 <link rel="stylesheet" href="demos.css">
8 <script src="../jquery-1.5.1.js"></script>
9 <script src="../external/jquery.bgiframe-2.1.2.js"></script>
10 <script src="../ui/jquery.ui.core.js"></script>
11 <script src="../ui/jquery.ui.widget.js"></script>
12 <script src="../ui/jquery.ui.mouse.js"></script>
13 <script src="../ui/jquery.ui.accordion.js"></script>
14 <script src="../ui/jquery.ui.autocomplete.js"></script>
15 <script src="../ui/jquery.ui.button.js"></script>
16 <script src="../ui/jquery.ui.datepicker.js"></script>
17 <script src="../ui/jquery.ui.dialog.js"></script>
18 <script src="../ui/jquery.ui.draggable.js"></script>
19 <script src="../ui/jquery.ui.droppable.js"></script>
20 <script src="../ui/jquery.ui.position.js"></script>
21 <script src="../ui/jquery.ui.progressbar.js"></script>
22 <script src="../ui/jquery.ui.resizable.js"></script>
23 <script src="../ui/jquery.ui.selectable.js"></script>
24 <script src="../ui/jquery.ui.slider.js"></script>
25 <script src="../ui/jquery.ui.sortable.js"></script>
26 <script src="../ui/jquery.ui.tabs.js"></script>
27 <script src="../ui/jquery.effects.core.js"></script>
28 <script src="../ui/jquery.effects.blind.js"></script>
29 <script src="../ui/jquery.effects.bounce.js"></script>
30 <script src="../ui/jquery.effects.clip.js"></script>
31 <script src="../ui/jquery.effects.drop.js"></script>
32 <script src="../ui/jquery.effects.explode.js"></script>
33 <script src="../ui/jquery.effects.fold.js"></script>
34 <script src="../ui/jquery.effects.highlight.js"></script>
35 <script src="../ui/jquery.effects.pulsate.js"></script>
36 <script src="../ui/jquery.effects.scale.js"></script>
37 <script src="../ui/jquery.effects.shake.js"></script>
38 <script src="../ui/jquery.effects.slide.js"></script>
39 <script src="../ui/jquery.effects.transfer.js"></script>
40 <script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
41 <script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
42 <script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
43 <script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
44 <script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
45 <script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
46 <script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
47 <script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
48 <script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
49 <script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
50 <script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
51 <script src="../ui/i18n/jquery.ui.datepicker-en-AU.js"></script>
52 <script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
53 <script src="../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>
54 <script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
55 <script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
56 <script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
57 <script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
58 <script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
59 <script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
60 <script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
61 <script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
62 <script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
63 <script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
64 <script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
65 <script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
66 <script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
67 <script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
68 <script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
69 <script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
70 <script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
71 <script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
72 <script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
73 <script src="../ui/i18n/jquery.ui.datepicker-kz.js"></script>
74 <script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
75 <script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
76 <script src="../ui/i18n/jquery.ui.datepicker-ml.js"></script>
77 <script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
78 <script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
79 <script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
80 <script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
81 <script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
82 <script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
83 <script src="../ui/i18n/jquery.ui.datepicker-rm.js"></script>
84 <script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
85 <script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
86 <script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
87 <script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
88 <script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
89 <script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
90 <script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
91 <script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
92 <script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
93 <script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
94 <script src="../ui/i18n/jquery.ui.datepicker-tj.js"></script>
95 <script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
96 <script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
97 <script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
98 <script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
99 <script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
100 <script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
101 <script>
102 $(function() {
103
104 $('.left-nav a').click(function(ev) {
105 window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
106 loadPage(this.href);
107 $('.left-nav a.selected').removeClass('selected');
108 $(this).addClass('selected');
109 ev.preventDefault();
110 });
111
112 if (window.location.hash) {
113 if (window.location.hash.indexOf('|') === -1) {
114 window.location.hash += '|default';
115 }
116 var path = window.location.href.replace(/(index\.html)?#/,'');
117 path = path.replace('\|','/') + '.html';
118 loadPage(path);
119 }
120
121 function loadPage(path) {
122 var section = path.replace(/\/[^\/]+\.html/,'');
123 var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
124
125 $('td.normal div.normal')
126 .empty()
127 .append('<h4 class="demo-subheader">Functional demo:</h4>')
128 .append('<h3 class="demo-header">'+ header +'</h3>')
129 .append('<div id="demo-config"></div>')
130 .find('#demo-config')
131 .append('<div id="demo-frame"></div><div id="demo-config-menu"></div><div id="demo-link"><a class="demoWindowLink" href="#"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a></div>')
132 .find('#demo-config-menu')
133 .load(section + '/index.html .demos-nav', function() {
134 $('#demo-config-menu a').each(function() {
135 this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
136 $(this).attr('target', 'demo-frame');
137 $(this).click(function() {
138
139 resetDemos();
140
141 $(this).parents('ul').find('li').removeClass('demo-config-on');
142 $(this).parent().addClass('demo-config-on');
143 $('#demo-notes').fadeOut();
144
145 //Set the hash to the actual page without ".html"
146 window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
147
148 loadDemo(this.getAttribute('href'));
149
150 return false;
151 });
152 });
153
154 if (window.location.hash) {
155 var demo = window.location.hash.split('|')[1];
156 $('#demo-config-menu a').each(function(){
157 if (this.href.indexOf(demo + '.html') !== -1) {
158 $(this).parents('ul').find('li').removeClass('demo-config-on');
159 $(this).parent().addClass('demo-config-on');
160 loadDemo(this.href);
161 }
162 });
163 }
164
165 updateDemoNotes();
166 })
167 .end()
168 .find('#demo-link a')
169 .bind('click', function(ev){
170 window.open(this.href);
171 ev.preventDefault();
172 })
173 .end()
174 .end()
175 ;
176
177 resetDemos();
178 }
179
180 function loadDemo(path) {
181 var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
182 $.get(path, function(data) {
183 var source = data;
184 data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
185 data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
186 data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
187 data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
188 data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
189 data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
190 data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
191 data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
192
193 $('#demo-style').remove();
194 $('#demo-frame').empty().html(data);
195 $('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
196 $('#demo-link a').attr('href', path);
197 updateDemoNotes();
198 updateDemoSource(source);
199
200 if (/default.html$/.test(path)) {
201 $.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
202 $("#demo-source").after(html);
203 $("#widget-docs").tabs();
204 $(".param-header").click(function() {
205 $(this).parent().toggleClass("param-open").end().next().toggle();
206 });
207 $(".docs-list-header").each(function() {
208 var header = $(this);
209 var details = header.next().find(".param-details").hide();
210 $("a:first", header).click(function() {
211 details.show().parent().addClass("param-open");
212 return false;
213 });
214 $("a:last", header).click(function() {
215 details.hide().parent().removeClass("param-open");
216 return false;
217 });
218 });
219 });
220 }
221 });
222 }
223
224 function updateDemoNotes() {
225 var notes = $('#demo-frame .demo-description');
226 if ($('#demo-notes').length == 0) {
227 $('<div id="demo-notes"></div>').insertAfter('#demo-config');
228 }
229 $('#demo-notes').hide().empty().html(notes.html());
230 $('#demo-notes').show();
231 notes.hide();
232 }
233
234 function updateDemoSource(source) {
235 if ($('#demo-source').length == 0) {
236 $('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
237 $('#demo-source').find(">a").click(function() {
238 $(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
239 return false;
240 }).end().find(">div").hide();
241 }
242 var cleanedSource = source
243 .replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
244 .replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
245 .replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
246
247 $('#demo-source code').empty().text(cleanedSource);
248 }
249
250 function resetDemos() {
251 $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
252 $(".ui-dialog-content").remove();
253 }
254
255 });
256 </script>
257 </head>
258 <body>
259
260 <table class="layout-grid" cellspacing="0" cellpadding="0">
261 <tr>
262 <td class="left-nav">
263 <dl class="demos-nav">
264 <dt>Interactions</dt>
265 <dd><a href="draggable/index.html">Draggable</a></dd>
266 <dd><a href="droppable/index.html">Droppable</a></dd>
267 <dd><a href="resizable/index.html">Resizable</a></dd>
268 <dd><a href="selectable/index.html">Selectable</a></dd>
269 <dd><a href="sortable/index.html">Sortable</a></dd>
270 <dt>Widgets</dt>
271 <dd><a href="accordion/index.html">Accordion</a></dd>
272 <dd><a href="autocomplete/index.html">Autocomplete</a></dd>
273 <dd><a href="button/index.html">Button</a></dd>
274
275 <dd><a href="dialog/index.html">Dialog</a></dd>
276
277
278
279 <dt>Effects</dt>
280 <dd><a href="animate/index.html">Color Animation</a></dd>
281 <dd><a href="toggleClass/index.html">Toggle Class</a></dd>
282 <dd><a href="addClass/index.html">Add Class</a></dd>
283 <dd><a href="removeClass/index.html">Remove Class</a></dd>
284 <dd><a href="switchClass/index.html">Switch Class</a></dd>
285 <dd><a href="effect/index.html">Effect</a></dd>
286 <dd><a href="toggle/index.html">Toggle</a></dd>
287 <dd><a href="hide/index.html">Hide</a></dd>
288 <dd><a href="show/index.html">Show</a></dd>
289 <dt>Utilities</dt>
290 <dd><a href="position/index.html">Position</a></dd>
291 <dt>About jQuery UI</dt>
292 <dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
293 <dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
294 <dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
295 <dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
296 <dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
297 <dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
298 <dt>Theming</dt>
299 <dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
300 <dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
301 <dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
302 <dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>
303
304 </dl>
305 </td>
306 <td class="normal">
307
308 <div class="normal">
309
310 <h3>Instructions</h3>
311 <p>
312 These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
313 </p>
314
315 </div>
316
317 </td>
318 </tr>
319 </table>
320 </body>
321 </html>