source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/demos/index.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

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