|
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.4.3.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-az.js"></script>
|
|
43
|
<script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
|
|
44
|
<script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
|
|
45
|
<script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
|
|
46
|
<script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
|
|
47
|
<script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
|
|
48
|
<script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
|
|
49
|
<script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
|
|
50
|
<script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
|
|
51
|
<script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
|
|
52
|
<script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
|
|
53
|
<script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
|
|
54
|
<script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
|
|
55
|
<script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
|
|
56
|
<script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
|
|
57
|
<script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
|
|
58
|
<script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
|
|
59
|
<script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
|
|
60
|
<script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
|
|
61
|
<script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
|
|
62
|
<script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
|
|
63
|
<script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
|
|
64
|
<script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
|
|
65
|
<script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
|
|
66
|
<script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
|
|
67
|
<script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
|
|
68
|
<script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
|
|
69
|
<script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
|
|
70
|
<script src="../ui/i18n/jquery.ui.datepicker-kz.js"></script>
|
|
71
|
<script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
|
|
72
|
<script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
|
|
73
|
<script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
|
|
74
|
<script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
|
|
75
|
<script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
|
|
76
|
<script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
|
|
77
|
<script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
|
|
78
|
<script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
|
|
79
|
<script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
|
|
80
|
<script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
|
|
81
|
<script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
|
|
82
|
<script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
|
|
83
|
<script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
|
|
84
|
<script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
|
|
85
|
<script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
|
|
86
|
<script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
|
|
87
|
<script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
|
|
88
|
<script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
|
|
89
|
<script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
|
|
90
|
<script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
|
|
91
|
<script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
|
|
92
|
<script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
|
|
93
|
<script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
|
|
94
|
<script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
|
|
95
|
<script>
|
|
96
|
$(function() {
|
|
97
|
|
|
98
|
$('.left-nav a').click(function(ev) {
|
|
99
|
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
|
|
100
|
loadPage(this.href);
|
|
101
|
$('.left-nav a.selected').removeClass('selected');
|
|
102
|
$(this).addClass('selected');
|
|
103
|
ev.preventDefault();
|
|
104
|
});
|
|
105
|
|
|
106
|
if (window.location.hash) {
|
|
107
|
if (window.location.hash.indexOf('|') === -1) {
|
|
108
|
window.location.hash += '|default';
|
|
109
|
}
|
|
110
|
var path = window.location.href.replace(/(index\.html)?#/,'');
|
|
111
|
path = path.replace('\|','/') + '.html';
|
|
112
|
loadPage(path);
|
|
113
|
}
|
|
114
|
|
|
115
|
function loadPage(path) {
|
|
116
|
var section = path.replace(/\/[^\/]+\.html/,'');
|
|
117
|
var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
|
|
118
|
|
|
119
|
$('td.normal div.normal')
|
|
120
|
.empty()
|
|
121
|
.append('<h4 class="demo-subheader">Functional demo:</h4>')
|
|
122
|
.append('<h3 class="demo-header">'+ header +'</h3>')
|
|
123
|
.append('<div id="demo-config"></div>')
|
|
124
|
.find('#demo-config')
|
|
125
|
.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>')
|
|
126
|
.find('#demo-config-menu')
|
|
127
|
.load(section + '/index.html .demos-nav', function() {
|
|
128
|
$('#demo-config-menu a').each(function() {
|
|
129
|
this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
|
|
130
|
$(this).attr('target', 'demo-frame');
|
|
131
|
$(this).click(function() {
|
|
132
|
|
|
133
|
resetDemos();
|
|
134
|
|
|
135
|
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
|
136
|
$(this).parent().addClass('demo-config-on');
|
|
137
|
$('#demo-notes').fadeOut();
|
|
138
|
|
|
139
|
//Set the hash to the actual page without ".html"
|
|
140
|
window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
|
|
141
|
|
|
142
|
loadDemo(this.getAttribute('href'));
|
|
143
|
|
|
144
|
return false;
|
|
145
|
});
|
|
146
|
});
|
|
147
|
|
|
148
|
if (window.location.hash) {
|
|
149
|
var demo = window.location.hash.split('|')[1];
|
|
150
|
$('#demo-config-menu a').each(function(){
|
|
151
|
if (this.href.indexOf(demo + '.html') !== -1) {
|
|
152
|
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
|
153
|
$(this).parent().addClass('demo-config-on');
|
|
154
|
loadDemo(this.href);
|
|
155
|
}
|
|
156
|
});
|
|
157
|
}
|
|
158
|
|
|
159
|
updateDemoNotes();
|
|
160
|
})
|
|
161
|
.end()
|
|
162
|
.find('#demo-link a')
|
|
163
|
.bind('click', function(ev){
|
|
164
|
window.open(this.href);
|
|
165
|
ev.preventDefault();
|
|
166
|
})
|
|
167
|
.end()
|
|
168
|
.end()
|
|
169
|
;
|
|
170
|
|
|
171
|
resetDemos();
|
|
172
|
}
|
|
173
|
|
|
174
|
function loadDemo(path) {
|
|
175
|
var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
|
|
176
|
$.get(path, function(data) {
|
|
177
|
var source = data;
|
|
178
|
data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
|
|
179
|
data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
|
|
180
|
data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
|
|
181
|
data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
|
|
182
|
data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
|
|
183
|
data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
|
|
184
|
data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
|
|
185
|
data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
|
|
186
|
|
|
187
|
$('#demo-style').remove();
|
|
188
|
$('#demo-frame').empty().html(data);
|
|
189
|
$('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
|
|
190
|
$('#demo-link a').attr('href', path);
|
|
191
|
updateDemoNotes();
|
|
192
|
updateDemoSource(source);
|
|
193
|
|
|
194
|
if (/default.html$/.test(path)) {
|
|
195
|
$.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
|
|
196
|
$("#demo-source").after(html);
|
|
197
|
$("#widget-docs").tabs();
|
|
198
|
$(".param-header").click(function() {
|
|
199
|
$(this).parent().toggleClass("param-open").end().next().toggle();
|
|
200
|
});
|
|
201
|
$(".docs-list-header").each(function() {
|
|
202
|
var header = $(this);
|
|
203
|
var details = header.next().find(".param-details").hide();
|
|
204
|
$("a:first", header).click(function() {
|
|
205
|
details.show().parent().addClass("param-open");
|
|
206
|
return false;
|
|
207
|
});
|
|
208
|
$("a:last", header).click(function() {
|
|
209
|
details.hide().parent().removeClass("param-open");
|
|
210
|
return false;
|
|
211
|
});
|
|
212
|
});
|
|
213
|
});
|
|
214
|
}
|
|
215
|
});
|
|
216
|
}
|
|
217
|
|
|
218
|
function updateDemoNotes() {
|
|
219
|
var notes = $('#demo-frame .demo-description');
|
|
220
|
if ($('#demo-notes').length == 0) {
|
|
221
|
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
|
|
222
|
}
|
|
223
|
$('#demo-notes').hide().empty().html(notes.html());
|
|
224
|
$('#demo-notes').show();
|
|
225
|
notes.hide();
|
|
226
|
}
|
|
227
|
|
|
228
|
function updateDemoSource(source) {
|
|
229
|
if ($('#demo-source').length == 0) {
|
|
230
|
$('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
|
|
231
|
$('#demo-source').find(">a").click(function() {
|
|
232
|
$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
|
|
233
|
return false;
|
|
234
|
}).end().find(">div").hide();
|
|
235
|
}
|
|
236
|
var cleanedSource = source
|
|
237
|
.replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
|
|
238
|
.replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
|
|
239
|
.replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
|
|
240
|
|
|
241
|
$('#demo-source code').empty().text(cleanedSource);
|
|
242
|
}
|
|
243
|
|
|
244
|
function resetDemos() {
|
|
245
|
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
|
|
246
|
$(".ui-dialog-content").remove();
|
|
247
|
}
|
|
248
|
|
|
249
|
});
|
|
250
|
</script>
|
|
251
|
</head>
|
|
252
|
<body>
|
|
253
|
|
|
254
|
<table class="layout-grid" cellspacing="0" cellpadding="0">
|
|
255
|
<tr>
|
|
256
|
<td class="left-nav">
|
|
257
|
<dl class="demos-nav">
|
|
258
|
<dt>Interactions</dt>
|
|
259
|
<dd><a href="draggable/index.html">Draggable</a></dd>
|
|
260
|
<dd><a href="droppable/index.html">Droppable</a></dd>
|
|
261
|
<dd><a href="resizable/index.html">Resizable</a></dd>
|
|
262
|
<dd><a href="selectable/index.html">Selectable</a></dd>
|
|
263
|
<dd><a href="sortable/index.html">Sortable</a></dd>
|
|
264
|
<dt>Widgets</dt>
|
|
265
|
<dd><a href="accordion/index.html">Accordion</a></dd>
|
|
266
|
<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
|
|
267
|
<dd><a href="button/index.html">Button</a></dd>
|
|
268
|
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
|
269
|
<dd><a href="dialog/index.html">Dialog</a></dd>
|
|
270
|
<dd><a href="progressbar/index.html">Progressbar</a></dd>
|
|
271
|
<dd><a href="slider/index.html">Slider</a></dd>
|
|
272
|
<dd><a href="tabs/index.html">Tabs</a></dd>
|
|
273
|
<dt>Effects</dt>
|
|
274
|
<dd><a href="animate/index.html">Color Animation</a></dd>
|
|
275
|
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
|
|
276
|
<dd><a href="addClass/index.html">Add Class</a></dd>
|
|
277
|
<dd><a href="removeClass/index.html">Remove Class</a></dd>
|
|
278
|
<dd><a href="switchClass/index.html">Switch Class</a></dd>
|
|
279
|
<dd><a href="effect/index.html">Effect</a></dd>
|
|
280
|
<dd><a href="toggle/index.html">Toggle</a></dd>
|
|
281
|
<dd><a href="hide/index.html">Hide</a></dd>
|
|
282
|
<dd><a href="show/index.html">Show</a></dd>
|
|
283
|
<dt>Utilities</dt>
|
|
284
|
<dd><a href="position/index.html">Position</a></dd>
|
|
285
|
<dt>About jQuery UI</dt>
|
|
286
|
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
|
|
287
|
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
|
|
288
|
<dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
|
|
289
|
<dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
|
|
290
|
<dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
|
|
291
|
<dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
|
|
292
|
<dt>Theming</dt>
|
|
293
|
<dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
|
|
294
|
<dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
|
|
295
|
<dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
|
|
296
|
<dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>
|
|
297
|
|
|
298
|
</dl>
|
|
299
|
</td>
|
|
300
|
<td class="normal">
|
|
301
|
|
|
302
|
<div class="normal">
|
|
303
|
|
|
304
|
<h3>Instructions</h3>
|
|
305
|
<p>
|
|
306
|
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.
|
|
307
|
</p>
|
|
308
|
|
|
309
|
</div>
|
|
310
|
|
|
311
|
</td>
|
|
312
|
</tr>
|
|
313
|
</table>
|
|
314
|
</body>
|
|
315
|
</html>
|