Author: pazu2k@gmail.com
Date: Tue Dec 30 00:37:44 2008
New Revision: 1304
Modified:
trunk/demos/index.html
Log:
modified demos/index.html so it loads content via ajax to match
functionality of website demos. still need to fix-up css and markup to
match filament's static example.
Modified: trunk/demos/index.html
==============================================================================
--- trunk/demos/index.html (original)
+++ trunk/demos/index.html Tue Dec 30 00:37:44 2008
@@ -17,7 +17,30 @@
<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','');
+ $('td.normal div.normal')
+ .empty()
+ .append('<h4 class="demo-subheader">Functional demo:</div>')
+ .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, function(){
+ $('#demo-config-menu a').each(function(){
+ this.setAttribute('href', section + '/' +
this.getAttribute('href'));
+ $(this).attr('target', 'demo-frame');
+ });
+ })
+ .end()
+ .end()
+ ;
+ ev.preventDefault();
+ });
+ });
+ </script>
</head>
<body>
<?php } else {
@@ -65,18 +88,22 @@
<td class="normal">
<div class="normal">
+ <?php if(isset($plain) && isset($_GET['load'])) {
+ echo html_entity_decode('<h4 class="demo-subheader">Functional
demo:</h4>');
+ echo html_entity_decode('<h3>'. $_GET['load'] .'</h3>');
+ echo html_entity_decode('<div class="demo-config">');
+ echo html_entity_decode('<iframe id="preview" name="preview"
src="/'. $section .'/default.html" width="520" height="314" border="0"
frameborder="0" style="overflow:auto"></iframe>');
+ echo html_entity_decode('<div class="demo-config-menu">');
+ include($section .'/index.html');
+ echo html_entity_decode('</div>');
+ echo html_entity_decode('</div>');
+ } else { ?>
- <?php if(isset($plain) && isset($_GET['load'])) {
- echo html_entity_decode('<h3>'. $_GET['load'] .'</h3>');
- include($section .'/index.html');
- echo html_entity_decode('<iframe id="preview" name="preview"
src="/'. $section .'/default.html" width="520" height="314" border="0"
frameborder="0" style="overflow:auto"></iframe>');
- } else { ?>
-
- <h3>Instructions</h3>
-
- 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.
-
- <?php } ?>
+ <h3>Instructions</h3>
+
+ 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.
+
+ <?php } ?>
</div>
</td>