2010-03-12 03:18:34 +00:00
<!DOCTYPE html>
2008-12-30 04:16:51 +00:00
< html lang = "en" >
< head >
2010-10-13 19:49:00 +00:00
< meta charset = "utf-8" >
2008-12-30 04:16:51 +00:00
< title > jQuery UI Demos< / title >
2010-10-13 19:49:00 +00:00
< link rel = "stylesheet" href = "../themes/base/jquery.ui.all.css" >
< link rel = "stylesheet" href = "demos.css" >
2011-03-03 02:00:50 +00:00
< script src = "../jquery-1.5.1.js" > < / script >
2010-10-20 03:05:13 +00:00
< script src = "../external/jquery.bgiframe-2.1.2.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/jquery.ui.core.js" > < / script >
< script src = "../ui/jquery.ui.widget.js" > < / script >
< script src = "../ui/jquery.ui.mouse.js" > < / script >
< script src = "../ui/jquery.ui.accordion.js" > < / script >
< script src = "../ui/jquery.ui.autocomplete.js" > < / script >
< script src = "../ui/jquery.ui.button.js" > < / script >
< script src = "../ui/jquery.ui.datepicker.js" > < / script >
< script src = "../ui/jquery.ui.dialog.js" > < / script >
< script src = "../ui/jquery.ui.draggable.js" > < / script >
< script src = "../ui/jquery.ui.droppable.js" > < / script >
< script src = "../ui/jquery.ui.position.js" > < / script >
< script src = "../ui/jquery.ui.progressbar.js" > < / script >
< script src = "../ui/jquery.ui.resizable.js" > < / script >
< script src = "../ui/jquery.ui.selectable.js" > < / script >
< script src = "../ui/jquery.ui.slider.js" > < / script >
< script src = "../ui/jquery.ui.sortable.js" > < / script >
< script src = "../ui/jquery.ui.tabs.js" > < / script >
< script src = "../ui/jquery.effects.core.js" > < / script >
< script src = "../ui/jquery.effects.blind.js" > < / script >
< script src = "../ui/jquery.effects.bounce.js" > < / script >
< script src = "../ui/jquery.effects.clip.js" > < / script >
< script src = "../ui/jquery.effects.drop.js" > < / script >
< script src = "../ui/jquery.effects.explode.js" > < / script >
< script src = "../ui/jquery.effects.fold.js" > < / script >
< script src = "../ui/jquery.effects.highlight.js" > < / script >
< script src = "../ui/jquery.effects.pulsate.js" > < / script >
< script src = "../ui/jquery.effects.scale.js" > < / script >
< script src = "../ui/jquery.effects.shake.js" > < / script >
< script src = "../ui/jquery.effects.slide.js" > < / script >
< script src = "../ui/jquery.effects.transfer.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-af.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ar.js" > < / script >
2011-01-19 15:15:15 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-ar-DZ.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-az.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-bs.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-bg.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ca.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-cs.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-da.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-de.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-el.js" > < / script >
2011-01-17 14:26:30 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-en-AU.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-en-GB.js" > < / script >
2011-01-17 14:26:30 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-en-NZ.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-eo.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-es.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-et.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-eu.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-fa.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-fi.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-fo.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-fr.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-fr-CH.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-gl.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-he.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-hr.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-hu.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-hy.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-id.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-is.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-it.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ja.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ko.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-kz.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-lt.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-lv.js" > < / script >
2011-01-17 14:44:53 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-ml.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-ms.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-nl.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-no.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-pl.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-pt.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-pt-BR.js" > < / script >
2011-01-17 14:44:53 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-rm.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-ro.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ru.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sk.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sl.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sq.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sr.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sr-SR.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-sv.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-ta.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-th.js" > < / script >
2011-02-25 09:40:36 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-tj.js" > < / script >
2010-10-13 19:49:00 +00:00
< script src = "../ui/i18n/jquery.ui.datepicker-tr.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-uk.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-vi.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-zh-CN.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-zh-HK.js" > < / script >
< script src = "../ui/i18n/jquery.ui.datepicker-zh-TW.js" > < / script >
< script >
$(function() {
2009-01-02 12:10:16 +00:00
2008-12-30 11:19:49 +00:00
$('.left-nav a').click(function(ev) {
2009-01-02 12:10:16 +00:00
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
loadPage(this.href);
2009-01-06 18:03:05 +00:00
$('.left-nav a.selected').removeClass('selected');
$(this).addClass('selected');
2009-01-02 12:10:16 +00:00
ev.preventDefault();
});
if (window.location.hash) {
2009-01-02 12:20:10 +00:00
if (window.location.hash.indexOf('|') === -1) {
window.location.hash += '|default';
}
2009-01-02 13:17:54 +00:00
var path = window.location.href.replace(/(index\.html)?#/,'');
path = path.replace('\|','/') + '.html';
2009-01-02 12:10:16 +00:00
loadPage(path);
}
2009-01-02 13:17:54 +00:00
function loadPage(path) {
2009-01-02 12:10:16 +00:00
var section = path.replace(/\/[^\/]+\.html/,'');
2009-01-18 05:09:33 +00:00
var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
2009-01-02 13:17:54 +00:00
2008-12-30 08:37:44 +00:00
$('td.normal div.normal')
.empty()
2008-12-30 08:50:02 +00:00
.append('< h4 class = "demo-subheader" > Functional demo:< / h4 > ')
.append('< h3 class = "demo-header" > '+ header +'< / h3 > ')
2008-12-30 08:37:44 +00:00
.append('< div id = "demo-config" > < / div > ')
.find('#demo-config')
2009-01-08 06:50:51 +00:00
.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 > ')
2008-12-30 08:37:44 +00:00
.find('#demo-config-menu')
2009-01-02 12:10:16 +00:00
.load(section + '/index.html .demos-nav', function() {
2008-12-30 10:12:02 +00:00
$('#demo-config-menu a').each(function() {
2008-12-30 11:19:49 +00:00
this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
2008-12-30 08:37:44 +00:00
$(this).attr('target', 'demo-frame');
2008-12-30 10:12:02 +00:00
$(this).click(function() {
2009-01-02 12:10:16 +00:00
2009-01-02 13:17:54 +00:00
resetDemos();
2008-12-30 09:41:48 +00:00
$(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on');
2009-01-02 14:54:25 +00:00
$('#demo-notes').fadeOut();
2009-01-02 12:10:16 +00:00
//Set the hash to the actual page without ".html"
window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
loadDemo(this.getAttribute('href'));
return false;
2008-12-30 09:41:48 +00:00
});
2008-12-30 08:37:44 +00:00
});
2008-12-31 01:20:50 +00:00
2009-01-02 12:10:16 +00:00
if (window.location.hash) {
var demo = window.location.hash.split('|')[1];
2009-01-03 14:24:57 +00:00
$('#demo-config-menu a').each(function(){
if (this.href.indexOf(demo + '.html') !== -1) {
$(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on');
loadDemo(this.href);
}
2009-01-02 12:10:16 +00:00
});
}
2008-12-31 01:20:50 +00:00
2009-01-02 12:10:16 +00:00
updateDemoNotes();
2008-12-30 08:37:44 +00:00
})
.end()
2009-01-08 06:50:51 +00:00
.find('#demo-link a')
.bind('click', function(ev){
window.open(this.href);
ev.preventDefault();
})
.end()
2008-12-30 08:37:44 +00:00
.end()
2009-01-02 13:17:54 +00:00
;
resetDemos();
2009-01-02 12:10:16 +00:00
}
function loadDemo(path) {
2009-01-18 01:51:19 +00:00
var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
2009-01-02 12:10:16 +00:00
$.get(path, function(data) {
2009-01-24 11:12:40 +00:00
var source = data;
2009-01-02 12:10:16 +00:00
data = data.replace(/< script . * > . * < \ / s c r i p t > / i g , " " ) ; / / R e m o v e s c r i p t t a g s
data = data.replace(/< \/?link.*>/ig,""); //Remove link tags
data = data.replace(/< \/?html.*>/ig,""); //Remove html tag
data = data.replace(/< \/?body.*>/ig,""); //Remove body tag
data = data.replace(/< \/?head.*>/ig,""); //Remove head tag
data = data.replace(/< \/?!doctype.*>/ig,""); //Remove doctype
data = data.replace(/< title. * > .*< \/title>/ig,""); // Remove title tags
2009-01-18 01:51:19 +00:00
data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
2009-01-02 12:10:16 +00:00
2009-01-20 14:44:28 +00:00
$('#demo-style').remove();
2009-01-02 12:10:16 +00:00
$('#demo-frame').empty().html(data);
2009-01-20 14:44:28 +00:00
$('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
2009-01-08 06:50:51 +00:00
$('#demo-link a').attr('href', path);
2009-01-02 12:10:16 +00:00
updateDemoNotes();
2009-01-24 10:51:03 +00:00
updateDemoSource(source);
2009-01-26 23:45:40 +00:00
if (/default.html$/.test(path)) {
$.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
$("#demo-source").after(html);
$("#widget-docs").tabs();
$(".param-header").click(function() {
$(this).parent().toggleClass("param-open").end().next().toggle();
2009-01-08 21:51:13 +00:00
});
2009-01-26 23:45:40 +00:00
$(".docs-list-header").each(function() {
var header = $(this);
var details = header.next().find(".param-details").hide();
$("a:first", header).click(function() {
details.show().parent().addClass("param-open");
return false;
});
$("a:last", header).click(function() {
details.hide().parent().removeClass("param-open");
return false;
});
2009-01-08 21:51:13 +00:00
});
});
2009-01-26 23:45:40 +00:00
}
});
2009-01-02 12:10:16 +00:00
}
function updateDemoNotes() {
var notes = $('#demo-frame .demo-description');
if ($('#demo-notes').length == 0) {
2009-01-08 06:50:51 +00:00
$('< div id = "demo-notes" > < / div > ').insertAfter('#demo-config');
2009-01-24 10:51:03 +00:00
}
2009-01-02 12:10:16 +00:00
$('#demo-notes').hide().empty().html(notes.html());
2009-01-26 23:45:40 +00:00
$('#demo-notes').show();
2009-01-02 12:10:16 +00:00
notes.hide();
}
2009-01-02 13:17:54 +00:00
2009-01-24 10:51:03 +00:00
function updateDemoSource(source) {
if ($('#demo-source').length == 0) {
$('< div id = "demo-source" > < a href = "#" class = "source-closed" > View Source< / a > < div > < pre > < code > < / code > < / pre > < / div > < / div > ').insertAfter('#demo-notes');
$('#demo-source').find(">a").click(function() {
$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
return false;
}).end().find(">div").hide();
}
2009-01-24 14:05:00 +00:00
var cleanedSource = source
2010-02-16 01:38:23 +00:00
.replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
2009-01-24 14:05:00 +00:00
.replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
.replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
$('#demo-source code').empty().text(cleanedSource);
2009-01-24 10:51:03 +00:00
}
2009-01-02 13:17:54 +00:00
function resetDemos() {
2009-01-02 13:45:18 +00:00
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
$(".ui-dialog-content").remove();
2009-01-02 13:17:54 +00:00
}
2009-01-02 12:10:16 +00:00
2008-12-30 08:37:44 +00:00
});
2008-12-31 01:20:50 +00:00
< / script >
2008-12-30 04:16:51 +00:00
< / head >
< body >
< table class = "layout-grid" cellspacing = "0" cellpadding = "0" >
< tr >
< td class = "left-nav" >
< dl class = "demos-nav" >
< dt > Interactions< / dt >
< dd > < a href = "draggable/index.html" > Draggable< / a > < / dd >
< dd > < a href = "droppable/index.html" > Droppable< / a > < / dd >
< dd > < a href = "resizable/index.html" > Resizable< / a > < / dd >
< dd > < a href = "selectable/index.html" > Selectable< / a > < / dd >
2008-12-31 01:20:50 +00:00
< dd > < a href = "sortable/index.html" > Sortable< / a > < / dd >
2008-12-30 04:16:51 +00:00
< dt > Widgets< / dt >
< dd > < a href = "accordion/index.html" > Accordion< / a > < / dd >
2010-01-14 17:23:11 +00:00
< dd > < a href = "autocomplete/index.html" > Autocomplete< / a > < / dd >
2010-01-07 03:19:50 +00:00
< dd > < a href = "button/index.html" > Button< / a > < / dd >
2008-12-30 04:16:51 +00:00
< dd > < a href = "datepicker/index.html" > Datepicker< / a > < / dd >
< dd > < a href = "dialog/index.html" > Dialog< / a > < / dd >
< dd > < a href = "progressbar/index.html" > Progressbar< / a > < / dd >
< dd > < a href = "slider/index.html" > Slider< / a > < / dd >
< dd > < a href = "tabs/index.html" > Tabs< / a > < / dd >
< dt > Effects< / dt >
2010-03-18 10:50:37 +00:00
< dd > < a href = "animate/index.html" > Color Animation< / a > < / dd >
< dd > < a href = "toggleClass/index.html" > Toggle Class< / a > < / dd >
2009-02-27 18:05:18 +00:00
< dd > < a href = "addClass/index.html" > Add Class< / a > < / dd >
< dd > < a href = "removeClass/index.html" > Remove Class< / a > < / dd >
2009-02-27 11:41:40 +00:00
< dd > < a href = "switchClass/index.html" > Switch Class< / a > < / dd >
2009-03-04 08:17:49 +00:00
< dd > < a href = "effect/index.html" > Effect< / a > < / dd >
2010-03-18 10:48:29 +00:00
< dd > < a href = "toggle/index.html" > Toggle< / a > < / dd >
< dd > < a href = "hide/index.html" > Hide< / a > < / dd >
< dd > < a href = "show/index.html" > Show< / a > < / dd >
2009-08-16 09:08:47 +00:00
< dt > Utilities< / dt >
< dd > < a href = "position/index.html" > Position< / a > < / dd >
2009-01-27 16:10:05 +00:00
< dt > About jQuery UI< / dt >
2009-03-04 23:15:43 +00:00
< dd > < a href = "http://jqueryui.com/docs/Getting_Started" > Getting Started< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Upgrade_Guide" > Upgrade Guide< / a > < / dd >
2009-03-04 07:57:45 +00:00
< dd > < a href = "http://jqueryui.com/docs/Changelog" > Changelog< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Roadmap" > Roadmap< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Subversion" > Subversion Access< / a > < / dd >
2009-03-04 23:15:43 +00:00
< dd > < a href = "http://jqueryui.com/docs/Developer_Guide" > UI Developer Guidelines< / a > < / dd >
2009-01-27 16:10:05 +00:00
< dt > Theming< / dt >
2009-03-04 07:57:45 +00:00
< dd > < a href = "http://jqueryui.com/docs/Theming" > Theming jQuery UI< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Theming/API" > jQuery UI CSS Framework< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Theming/Themeroller" > ThemeRoller application< / a > < / dd >
< dd > < a href = "http://jqueryui.com/docs/Theming/ThemeSwitcher" > Theme Switcher Widget< / a > < / dd >
2009-01-30 14:30:34 +00:00
2008-12-30 04:16:51 +00:00
< / dl >
< / td >
< td class = "normal" >
2008-12-31 01:20:50 +00:00
2008-12-30 04:16:51 +00:00
< div class = "normal" >
2008-12-31 01:20:50 +00:00
2008-12-30 08:37:44 +00:00
< h3 > Instructions< / h3 >
< p >
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.
< / p >
2009-01-08 05:44:34 +00:00
2008-12-30 04:16:51 +00:00
< / div >
2008-12-31 01:20:50 +00:00
2008-12-30 04:16:51 +00:00
< / td >
< / tr >
< / table >
< / body >
< / html >
