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