aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/demos/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/demos/index.html')
-rw-r--r--static/development-bundle/demos/index.html292
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>
© 2015 Mike Crute