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.datepicker.js"></script>
12 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ar.js"></script>
13 <script type="text/javascript" src="../ui/i18n/ui.datepicker-bg.js"></script>
14 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ca.js"></script>
15 <script type="text/javascript" src="../ui/i18n/ui.datepicker-cs.js"></script>
16 <script type="text/javascript" src="../ui/i18n/ui.datepicker-da.js"></script>
17 <script type="text/javascript" src="../ui/i18n/ui.datepicker-de.js"></script>
18 <script type="text/javascript" src="../ui/i18n/ui.datepicker-el.js"></script>
19 <script type="text/javascript" src="../ui/i18n/ui.datepicker-eo.js"></script>
20 <script type="text/javascript" src="../ui/i18n/ui.datepicker-es.js"></script>
21 <script type="text/javascript" src="../ui/i18n/ui.datepicker-fa.js"></script>
22 <script type="text/javascript" src="../ui/i18n/ui.datepicker-fi.js"></script>
23 <script type="text/javascript" src="../ui/i18n/ui.datepicker-fr.js"></script>
24 <script type="text/javascript" src="../ui/i18n/ui.datepicker-he.js"></script>
25 <script type="text/javascript" src="../ui/i18n/ui.datepicker-hr.js"></script>
26 <script type="text/javascript" src="../ui/i18n/ui.datepicker-hu.js"></script>
27 <script type="text/javascript" src="../ui/i18n/ui.datepicker-hy.js"></script>
28 <script type="text/javascript" src="../ui/i18n/ui.datepicker-id.js"></script>
29 <script type="text/javascript" src="../ui/i18n/ui.datepicker-is.js"></script>
30 <script type="text/javascript" src="../ui/i18n/ui.datepicker-it.js"></script>
31 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ja.js"></script>
32 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ko.js"></script>
33 <script type="text/javascript" src="../ui/i18n/ui.datepicker-lt.js"></script>
34 <script type="text/javascript" src="../ui/i18n/ui.datepicker-lv.js"></script>
35 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ms.js"></script>
36 <script type="text/javascript" src="../ui/i18n/ui.datepicker-nl.js"></script>
37 <script type="text/javascript" src="../ui/i18n/ui.datepicker-no.js"></script>
38 <script type="text/javascript" src="../ui/i18n/ui.datepicker-pl.js"></script>
39 <script type="text/javascript" src="../ui/i18n/ui.datepicker-pt-BR.js"></script>
40 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ro.js"></script>
41 <script type="text/javascript" src="../ui/i18n/ui.datepicker-ru.js"></script>
42 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sk.js"></script>
43 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sl.js"></script>
44 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sq.js"></script>
45 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sr.js"></script>
46 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sr-SR.js"></script>
47 <script type="text/javascript" src="../ui/i18n/ui.datepicker-sv.js"></script>
48 <script type="text/javascript" src="../ui/i18n/ui.datepicker-th.js"></script>
49 <script type="text/javascript" src="../ui/i18n/ui.datepicker-tr.js"></script>
50 <script type="text/javascript" src="../ui/i18n/ui.datepicker-uk.js"></script>
51 <script type="text/javascript" src="../ui/i18n/ui.datepicker-zh-CN.js"></script>
52 <script type="text/javascript" src="../ui/i18n/ui.datepicker-zh-TW.js"></script>
53 <script type="text/javascript">
56 $('.left-nav a').click(function(ev) {
57 window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
59 $('.left-nav a.selected').removeClass('selected');
60 $(this).addClass('selected');
64 if (window.location.hash) {
65 if (window.location.hash.indexOf('|') === -1) {
66 window.location.hash += '|default';
68 var path = window.location.href.replace(/(index\.html)?#/,'');
69 path = path.replace('\|','/') + '.html';
73 function loadPage(path) {
74 var section = path.replace(/\/[^\/]+\.html/,'');
75 var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
77 $('td.normal div.normal')
79 .append('<h4 class="demo-subheader">Functional demo:</h4>')
80 .append('<h3 class="demo-header">'+ header +'</h3>')
81 .append('<div id="demo-config"></div>')
83 .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>')
84 .find('#demo-config-menu')
85 .load(section + '/index.html .demos-nav', function() {
86 $('#demo-config-menu a').each(function() {
87 this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
88 $(this).attr('target', 'demo-frame');
89 $(this).click(function() {
93 $(this).parents('ul').find('li').removeClass('demo-config-on');
94 $(this).parent().addClass('demo-config-on');
95 $('#demo-notes').fadeOut();
97 //Set the hash to the actual page without ".html"
98 window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
100 loadDemo(this.getAttribute('href'));
106 if (window.location.hash) {
107 var demo = window.location.hash.split('|')[1];
108 $('#demo-config-menu a').each(function(){
109 if (this.href.indexOf(demo + '.html') !== -1) {
110 $(this).parents('ul').find('li').removeClass('demo-config-on');
111 $(this).parent().addClass('demo-config-on');
120 .find('#demo-link a')
121 .bind('click', function(ev){
122 window.open(this.href);
132 function loadDemo(path) {
133 var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
134 $.get(path, function(data) {
136 data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
137 data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
138 data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
139 data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
140 data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
141 data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
142 data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
143 data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
145 $('#demo-style').remove();
146 $('#demo-frame').empty().html(data);
147 $('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
148 $('#demo-link a').attr('href', path);
150 updateDemoSource(source);
152 if (/default.html$/.test(path)) {
153 $.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
154 $("#demo-source").after(html);
155 $("#widget-docs").tabs();
156 $(".param-header").click(function() {
157 $(this).parent().toggleClass("param-open").end().next().toggle();
159 $(".docs-list-header").each(function() {
160 var header = $(this);
161 var details = header.next().find(".param-details").hide();
162 $("a:first", header).click(function() {
163 details.show().parent().addClass("param-open");
166 $("a:last", header).click(function() {
167 details.hide().parent().removeClass("param-open");
176 function updateDemoNotes() {
177 var notes = $('#demo-frame .demo-description');
178 if ($('#demo-notes').length == 0) {
179 $('<div id="demo-notes"></div>').insertAfter('#demo-config');
181 $('#demo-notes').hide().empty().html(notes.html());
182 $('#demo-notes').show();
186 function updateDemoSource(source) {
187 if ($('#demo-source').length == 0) {
188 $('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
189 $('#demo-source').find(">a").click(function() {
190 $(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
192 }).end().find(">div").hide();
194 var cleanedSource = source
195 .replace('themes/base/ui.all.css', 'theme/ui.all.css')
196 .replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
197 .replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
199 $('#demo-source code').empty().text(cleanedSource);
202 function resetDemos() {
203 $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
204 $(".ui-dialog-content").remove();
212 <table class="layout-grid" cellspacing="0" cellpadding="0">
214 <td class="left-nav">
215 <dl class="demos-nav">
216 <dt>Interactions</dt>
224 <dd><a href="datepicker/index.html">Datepicker</a></dd>
239 <dt>About jQuery UI</dt>
240 <dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
241 <dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
242 <dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
243 <dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
244 <dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
245 <dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
247 <dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
248 <dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
249 <dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
250 <dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>
258 <h3>Instructions</h3>
260 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.