jquery/development-bundle/demos/index.html

   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.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">
  54         jQuery(function($) {
  55
  56                 $('.left-nav a').click(function(ev) {
  57                         window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
  58                         loadPage(this.href);
  59                         $('.left-nav a.selected').removeClass('selected');
  60                         $(this).addClass('selected');
  61                         ev.preventDefault();
  62                 });
  63
  64                 if (window.location.hash) {
  65                         if (window.location.hash.indexOf('|') === -1) {
  66                                 window.location.hash += '|default';
  67                         }
  68                         var path = window.location.href.replace(/(index\.html)?#/,'');
  69                         path = path.replace('\|','/') + '.html';
  70                         loadPage(path);
  71                 }
  72
  73                 function loadPage(path) {
  74                         var section = path.replace(/\/[^\/]+\.html/,'');
  75                         var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
  76
  77                         $('td.normal div.normal')
  78                                 .empty()
  79                                 .append('<h4 class="demo-subheader">Functional demo:</h4>')
  80                                 .append('<h3 class="demo-header">'+ header +'</h3>')
  81                                 .append('<div id="demo-config"></div>')
  82                                 .find('#demo-config')
  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() {
  90
  91                                                                         resetDemos();
  92
  93                                                                         $(this).parents('ul').find('li').removeClass('demo-config-on');
  94                                                                         $(this).parent().addClass('demo-config-on');
  95                                                                         $('#demo-notes').fadeOut();
  96
  97                                                                         //Set the hash to the actual page without ".html"
  98                                                                         window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
  99
 100                                                                         loadDemo(this.getAttribute('href'));
 101
 102                                                                         return false;
 103                                                                 });
 104                                                         });
 105
 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');
 112                                                                                 loadDemo(this.href);
 113                                                                         }
 114                                                                 });
 115                                                         }
 116
 117                                                         updateDemoNotes();
 118                                                 })
 119                                         .end()
 120                                         .find('#demo-link a')
 121                                                 .bind('click', function(ev){
 122                                                         window.open(this.href);
 123                                                         ev.preventDefault();
 124                                                 })
 125                                         .end()
 126                                 .end()
 127                         ;
 128
 129                         resetDemos();
 130                 }
 131
 132                 function loadDemo(path) {
 133                         var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
 134                         $.get(path, function(data) {
 135                                 var source = 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 + "/");
 144
 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);
 149                                 updateDemoNotes();
 150                                 updateDemoSource(source);
 151
 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();
 158                                                 });
 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");
 164                                                                 return false;
 165                                                         });
 166                                                         $("a:last", header).click(function() {
 167                                                                 details.hide().parent().removeClass("param-open");
 168                                                                 return false;
 169                                                         });
 170                                                 });
 171                                         });
 172                                 }
 173                         });
 174                 }
 175
 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');
 180                         }
 181                         $('#demo-notes').hide().empty().html(notes.html());
 182                         $('#demo-notes').show();
 183                         notes.hide();
 184                 }
 185
 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();
 191                                         return false;
 192                                 }).end().find(">div").hide();
 193                         }
 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, '');
 198
 199                         $('#demo-source code').empty().text(cleanedSource);
 200                 }
 201
 202                 function resetDemos() {
 203                         $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
 204                         $(".ui-dialog-content").remove();
 205                 }
 206
 207         });
 208         </script>
 209 </head>
 210 <body>
 211
 212 <table class="layout-grid" cellspacing="0" cellpadding="0">
 213         <tr>
 214                 <td class="left-nav">
 215                         <dl class="demos-nav">
 216                                 <dt>Interactions</dt>
 217
 218
 219
 220
 221
 222                                 <dt>Widgets</dt>
 223
 224                                         <dd><a href="datepicker/index.html">Datepicker</a></dd>
 225
 226
 227
 228
 229                                 <dt>Effects</dt>
 230
 231
 232
 233
 234
 235
 236
 237
 238
 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>
 246                                 <dt>Theming</dt>
 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>
 251
 252                         </dl>
 253                 </td>
 254                 <td class="normal">
 255
 256                         <div class="normal">
 257
 258                                         <h3>Instructions</h3>
 259                                         <p>
 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.
 261                                         </p>
 262
 263                         </div>
 264
 265                 </td>
 266         </tr>
 267 </table>
 268 </body>
 269 </html>