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.6.2.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 | <dd><a href="datepicker/index.html">Datepicker</a></dd>
|
---|
275 | <dd><a href="dialog/index.html">Dialog</a></dd>
|
---|
276 | <dd><a href="progressbar/index.html">Progressbar</a></dd>
|
---|
277 | <dd><a href="slider/index.html">Slider</a></dd>
|
---|
278 | <dd><a href="tabs/index.html">Tabs</a></dd>
|
---|
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>
|
---|