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