2008-12-30 04:16:51 +00:00
<!doctype html>
< html lang = "en" >
< head >
2009-01-02 15:59:31 +00:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
2008-12-30 04:16:51 +00:00
< title > jQuery UI Demos< / title >
2009-01-07 02:36:51 +00:00
< link type = "text/css" href = "../themes/base/ui.all.css" rel = "stylesheet" / >
2008-12-30 04:16:51 +00:00
< link type = "text/css" href = "demos.css" rel = "stylesheet" / >
2009-01-22 09:13:28 +00:00
< script type = "text/javascript" src = "../jquery-1.3.1.js" > < / script >
2009-01-28 13:19:32 +00:00
< script type = "text/javascript" src = "../external/bgiframe/jquery.bgiframe.js" > < / script >
2008-12-30 04:16:51 +00:00
< script type = "text/javascript" src = "../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.accordion.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.datepicker.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.dialog.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.draggable.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.droppable.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.progressbar.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.resizable.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.selectable.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.slider.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.sortable.js" > < / script >
< script type = "text/javascript" src = "../ui/ui.tabs.js" > < / script >
2008-12-31 23:11:31 +00:00
< script type = "text/javascript" src = "../ui/effects.core.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.blind.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.bounce.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.clip.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.drop.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.explode.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.fold.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.highlight.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.pulsate.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.scale.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.shake.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.slide.js" > < / script >
< script type = "text/javascript" src = "../ui/effects.transfer.js" > < / script >
2009-01-02 12:10:16 +00:00
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ar.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-bg.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ca.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-cs.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-da.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-de.js" > < / script >
2009-01-18 05:09:33 +00:00
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-el.js" > < / script >
2009-01-02 12:10:16 +00:00
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-eo.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-es.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-fa.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-fi.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-fr.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-he.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-hr.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-hu.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-hy.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-id.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-is.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-it.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ja.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ko.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-lt.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-lv.js" > < / script >
2009-01-18 05:09:33 +00:00
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ms.js" > < / script >
2009-01-02 12:10:16 +00:00
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-nl.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-no.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-pl.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-pt-BR.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ro.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-ru.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-sk.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-sl.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-sq.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-sv.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-th.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-tr.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-uk.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-zh-CN.js" > < / script >
< script type = "text/javascript" src = "../ui/i18n/ui.datepicker-zh-TW.js" > < / script >
2008-12-30 08:37:44 +00:00
< script type = "text/javascript" >
2008-12-30 11:19:49 +00:00
jQuery(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
.replace('themes/base/ui.all.css', 'theme/ui.all.css')
.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 >
< 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 >
2009-01-27 16:10:05 +00:00
< dd > < a href = "http://ui.jquery.com/docs/Effects/Methods" > Effect Methods< / dd >
< dd > < a href = "http://ui.jquery.com/docs/Effects/Types" > Effect Types< / a > < / dd >
< dt > About jQuery UI< / dt >
< dd > < a href = "http://ui.jquery.com/docs/Developer_Guide" > UI Developer Guidelines< / a > < / dd >
< dd > < a href = "http://ui.jquery.com/docs/Changelog" > Changelog< / a > < / dd >
< dd > < a href = "http://ui.jquery.com/docs/Roadmap" > Roadmap< / a > < / dd >
< dd > < a href = "http://ui.jquery.com/docs/Subversion" > Subversion Access< / a > < / dd >
< dt > Theming< / dt >
< dd > < a href = "http://ui.jquery.com/docs/Theming" > Theming jQuery UI< / a > < / dd >
< dd > < a href = "http://ui.jquery.com/docs/Theming/API" > jQuery UI CSS framework< / a > < / dd >
< dd > < a href = "http://ui.jquery.com/docs/Theming/Themeroller" > ThemeRoller application< / a > < / dd >
< dd > < a href = "http://ui.jquery.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 >
