|
0
|
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>
|
