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