2008-12-30 04:16:51 +00:00
<?php if(!isset($plain)) { ?>
<!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" / >
2009-01-10 12:49:21 +00:00
< link type = "text/css" href = "ui.theme.css" rel = "stylesheet" / >
2008-12-30 04:16:51 +00:00
< link type = "text/css" href = "demos.css" rel = "stylesheet" / >
2009-01-14 23:26:15 +00:00
< script type = "text/javascript" src = "../jquery-1.3.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 >
< 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 >
< 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/,'');
2008-12-30 08:50:02 +00:00
var header = section.replace(/.+\/([^\/]+)/,'$1');
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) {
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
$('#demo-frame').empty().html(data);
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-08 21:51:13 +00:00
if (/default.html$/.test(path)) {
2009-01-17 15:01:08 +00:00
$.get("../documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
2009-01-08 21:51:13 +00:00
$("#demo-notes").after(html);
$("#widget-docs").tabs();
$(".param-header").click(function() {
$(this).parent().toggleClass("param-open").end().next().toggle();
});
$(".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-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-02 12:10:16 +00:00
}
$('#demo-notes').hide().empty().html(notes.html());
2009-01-02 14:54:25 +00:00
$('#demo-notes').fadeIn();
2009-01-02 12:10:16 +00:00
notes.hide();
}
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 >
<?php } ?>
< 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-16 16:36:16 +00:00
< dd > < a href = "effects_movement/index.html" > Movement< / a > < / dd >
< dd > < a href = "effects_feedback/index.html" > Feedback< / a > < / dd >
2008-12-31 22:53:33 +00:00
< dd > < a href = "effects_showhide/index.html" > Show/Hide< / a > < / dd >
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-30 16:27:17 +00:00
<?php if(isset($plain) && $content) { echo $content; } else { ?>
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
2009-01-08 06:50:51 +00:00
<!-- change the class to class="source - open" when code is visible
2009-01-08 05:44:34 +00:00
< div id = "demo-source" >
2009-01-08 06:50:51 +00:00
< a href = "#" class = "source-closed" > View source< / a >
2009-01-08 05:44:34 +00:00
< / div >
2009-01-08 06:50:51 +00:00
-->
2009-01-08 05:44:34 +00:00
2008-12-30 08:37:44 +00:00
<?php } ?>
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 >
<?php if(!isset($plain)) { ?>
< / body >
< / html >
<?php } ?>
