jquery-ui/demos/index.html
2008-12-30 09:41:48 +00:00

122 lines
4.6 KiB
HTML

<?php if(!isset($plain)) { ?>
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Demos</title>
<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>
<script type="text/javascript">
jQuery(function($){
$('.left-nav a').click(function(ev){
var section = this.href.replace('/index.html','');
var header = section.replace(/.+\/([^\/]+)/,'$1');
$('td.normal div.normal')
.empty()
.append('<h4 class="demo-subheader">Functional demo:</h4>')
.append('<h3 class="demo-header">'+ header +'</h3>')
.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')
.load(this.href + ' #container', function(){
$('#demo-config-menu a').each(function(){
this.setAttribute('href', section + '/' + this.getAttribute('href'));
$(this).attr('target', 'demo-frame');
$(this).click(function(){
$(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on');
});
});
})
.end()
.end()
;
ev.preventDefault();
});
});
</script>
</head>
<body>
<?php } else {
$base = 'repository/trunk/demos/';
$section = $base . $_GET['load'];
?>
<script type="text/javascript">
var section;
<?php printf ('section = "%s";', $section); ?>
section && jQuery(function($){
$('dl.nav a').each(function(){
this.setAttribute('href', '/' + section + '/' + this.getAttribute('href'));
$(this).attr('target', 'preview');
});
});
</script>
<?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>
<dd><a href="sortable/index.html">Sortable</a></dd>
<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>
<dd><a href="#">Easing</a></dd>
<dd><a href="#">General</a></dd>
<dd><a href="#">Show/Hide</a></dd>
</dl>
</td>
<td class="normal">
<div class="normal">
<?php if(isset($plain) && isset($_GET['load'])) {
echo html_entity_decode('&lt;h4 class="demo-subheader"&gt;Functional demo:&lt;/h4&gt;');
echo html_entity_decode('&lt;h3&gt;'. $_GET['load'] .'&lt;/h3&gt;');
echo html_entity_decode('&lt;div class="demo-config"&gt;');
echo html_entity_decode('&lt;iframe id="preview" name="preview" src="/'. $section .'/default.html" width="520" height="314" border="0" frameborder="0" style="overflow:auto"&gt;&lt;/iframe&gt;');
echo html_entity_decode('&lt;div class="demo-config-menu"&gt;');
include($section .'/index.html');
echo html_entity_decode('&lt;/div&gt;');
echo html_entity_decode('&lt;/div&gt;');
} else { ?>
<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 } ?>
</div>
</td>
</tr>
</table>
<?php if(!isset($plain)) { ?>
</body>
</html>
<?php } ?>