library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

demos/index.html - removed iframe and replaced with Ajax. Added datepicker localization scripts. Fixed css font sizing issues in demo notes.

Browse Source
This commit is contained in:
Ca-Phun Ung 2009-01-02 12:10:16 +00:00
parent c116150111
commit 3287ca7199
2 changed files with 106 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/demos.css
View File

@ -2,7 +2,6 @@ body {
font-size: 62.5%; font-size: 62.5%;
} }
/* Site /* Site
-------------------------------- */ -------------------------------- */
@ -123,7 +122,8 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
#demo-config { padding:20px 0 0; } #demo-config { padding:20px 0 0; }
#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; } #demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; }
#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; }
#demo-config-menu { float:right; width:200px; } #demo-config-menu { float:right; width:200px; }
#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; } #demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; }
@ -150,7 +150,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
font-size: 1.3em; font-size: 1.3em;
} }
#demo-notes { width:520px; color:#333; } #demo-notes { width:520px; color:#333; font-size: 1em; }
#demo-notes code { padding-left:20px; } #demo-notes code { padding-left:20px; }
#demo-source a:link, #demo-source a:link,

115
demos/index.html
View File

@ -31,10 +31,62 @@
<script type="text/javascript" src="../ui/effects.shake.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.slide.js"></script>
<script type="text/javascript" src="../ui/effects.transfer.js"></script> <script type="text/javascript" src="../ui/effects.transfer.js"></script>
<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>
<script type="text/javascript"> <script type="text/javascript">
jQuery(function($) { jQuery(function($) {
$('.left-nav a').click(function(ev) { $('.left-nav a').click(function(ev) {
var section = this.href.replace('/index.html',''); // reset dialog
$(".ui-dialog-content").remove();
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
loadPage(this.href);
ev.preventDefault();
});
if (window.location.hash) {
var path = window.location.href.replace('#','');
path = path.replace('\|','/') + '.html';
loadPage(path);
}
function loadPage(path) {
var section = path.replace(/\/[^\/]+\.html/,'');
var header = section.replace(/.+\/([^\/]+)/,'$1'); var header = section.replace(/.+\/([^\/]+)/,'$1');
$('td.normal div.normal') $('td.normal div.normal')
.empty() .empty()
@ -42,38 +94,71 @@
.append('<h3 class="demo-header">'+ header +'</h3>') .append('<h3 class="demo-header">'+ header +'</h3>')
.append('<div id="demo-config"></div>') .append('<div id="demo-config"></div>')
.find('#demo-config') .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>') .append('<div id="demo-frame"></div><div id="demo-config-menu"></div>')
.find('#demo-config-menu') .find('#demo-config-menu')
.load(this.href + ' .demos-nav', function() { .load(section + '/index.html .demos-nav', function() {
$('#demo-config-menu a').each(function() { $('#demo-config-menu a').each(function() {
this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1')); this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
$(this).attr('target', 'demo-frame'); $(this).attr('target', 'demo-frame');
$(this).click(function() { $(this).click(function() {
$(".ui-dialog-content").remove();
$(this).parents('ul').find('li').removeClass('demo-config-on'); $(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on'); $(this).parent().addClass('demo-config-on');
$('#demo-notes').hide(); $('#demo-notes').hide();
//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;
}); });
}); });
$('#demo-frame').load(function() { if (window.location.hash) {
var content = $(this)[0].contentWindow.document || $(this).contents()[0]; var demo = window.location.hash.split('|')[1];
var notes = $('.demo-description', content); $('#demo-config-menu a[href$="'+ demo +'.html"]').each(function(){
if ($('#demo-notes').length == 0) { $(this).parents('ul').find('li').removeClass('demo-config-on');
$('<div id="demo-notes"></div>').insertAfter('#demo-config'); $(this).parent().addClass('demo-config-on');
loadDemo(this.href);
});
} }
$('#demo-notes').hide().empty().html(notes.html());
$('#demo-notes').fadeIn();
notes.hide();
});
if ($('#demo-frame .demo-description:visible')) updateDemoNotes();
$('#demo-frame').trigger('load');
}) })
.end() .end()
.end() .end()
; ;
ev.preventDefault(); }
function loadDemo(path) {
$.get(path, function(data) {
data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
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
$('#demo-frame').empty().html(data);
updateDemoNotes();
}); });
}
function updateDemoNotes() {
var notes = $('#demo-frame .demo-description');
if ($('#demo-notes').length == 0) {
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
}
$('#demo-notes').hide().empty().html(notes.html());
$('#demo-notes').show();
notes.hide();
}
}); });
</script> </script>
</head> </head>