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