2008-12-30 04:16:51 +00:00
|
|
|
<?php if(!isset($plain)) { ?>
|
|
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<title>jQuery UI Demos</title>
|
2008-12-31 00:38:04 +00:00
|
|
|
<link type="text/css" href="../themes/default/ui.all.css" rel="stylesheet" />
|
2008-12-30 04:16:51 +00:00
|
|
|
<link type="text/css" href="demos.css" rel="stylesheet" />
|
|
|
|
|
<script type="text/javascript" src="../jquery-1.2.6.js"></script>
|
|
|
|
|
<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-30 08:37:44 +00:00
|
|
|
<script type="text/javascript">
|
2008-12-30 11:19:49 +00:00
|
|
|
jQuery(function($) {
|
|
|
|
|
$('.left-nav a').click(function(ev) {
|
2008-12-30 08:37:44 +00:00
|
|
|
var section = this.href.replace('/index.html','');
|
2008-12-30 08:50:02 +00:00
|
|
|
var header = section.replace(/.+\/([^\/]+)/,'$1');
|
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')
|
|
|
|
|
.append('<iframe id="demo-frame" name="demo-frame" width="520" height="314" scrolling="auto" frameborder="0" src="'+ section +'/default.html"></iframe><div id="demo-config-menu"></div>')
|
|
|
|
|
.find('#demo-config-menu')
|
2008-12-30 10:12:02 +00:00
|
|
|
.load(this.href + ' .demos-nav', function() {
|
|
|
|
|
$('#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() {
|
2008-12-30 09:41:48 +00:00
|
|
|
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
|
|
|
|
$(this).parent().addClass('demo-config-on');
|
2008-12-30 18:26:51 +00:00
|
|
|
$('#demo-notes').hide();
|
2008-12-30 09:41:48 +00:00
|
|
|
});
|
2008-12-30 08:37:44 +00:00
|
|
|
});
|
2008-12-31 01:20:50 +00:00
|
|
|
|
2008-12-30 20:14:58 +00:00
|
|
|
$('#demo-frame').load(function() {
|
|
|
|
|
var content = $(this)[0].contentWindow.document || $(this).contents()[0];
|
|
|
|
|
var notes = $('.demo-description', content);
|
2008-12-30 18:26:51 +00:00
|
|
|
if ($('#demo-notes').length == 0) {
|
2008-12-30 20:14:58 +00:00
|
|
|
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
|
2008-12-31 01:20:50 +00:00
|
|
|
}
|
2008-12-30 20:46:08 +00:00
|
|
|
$('#demo-notes').hide().empty().html(notes.html());
|
|
|
|
|
$('#demo-notes').fadeIn();
|
2008-12-30 20:14:58 +00:00
|
|
|
notes.hide();
|
2008-12-30 20:46:08 +00:00
|
|
|
});
|
2008-12-31 01:20:50 +00:00
|
|
|
|
2008-12-30 20:46:08 +00:00
|
|
|
if ($('#demo-frame .demo-description:visible'))
|
|
|
|
|
$('#demo-frame').trigger('load');
|
2008-12-30 08:37:44 +00:00
|
|
|
})
|
|
|
|
|
.end()
|
|
|
|
|
.end()
|
|
|
|
|
;
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
});
|
|
|
|
|
});
|
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>
|
2008-12-31 14:49:55 +00:00
|
|
|
<dd><a href="effects_easing/index.html">Easing</a></dd>
|
|
|
|
|
<dd><a href="effects_general/index.html">General</a></dd>
|
|
|
|
|
<dd><a href="effects/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>
|
|
|
|
|
<?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 } ?>
|
