您的位置：首页 > Web前端 > JQuery

jQuery UI官网所使用的AJAX页面转换，代码分析

2011-02-06 19:18 351 查看

// AJAX读取页面内容，并把BODY内容以外的数据删除，重写到指定DIV
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>.*<\/head>/ig,"");
data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
data = data.replace(/<meta.*>/ig,"");
data = $.trim(data);

$('style.demo-style').remove();
$('#demo-frame').empty().html(data);
$('#demo-frame style').appendTo('head').addClass('demo-style');
$('#demo-link a').attr('href', path);

});

}

$(document).ready(function() {

//Rewrite and prepare links of right-hand sub navigation
//重写菜单部分，处理菜单点击事件，点击后会跟据href提取内容并重写到指定DIV上
$('#demo-config-menu a').each(function() {
$(this).attr('target', 'demo-frame');
$(this).click(function(e) {

//更新菜单按钮的class，实现按钮高亮
$(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on');

//Set the hash to the actual page without ".html"
//重写地址栏，hash为#后面的字串
window.location.hash = this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];

loadDemo(this.getAttribute('href'));
//默认点击事件实现
e.preventDefault();

});
});

//If a hash is available, select the right-hand menu item and load it
if(window.location.hash) {
loadHash();
}

});

// 截入页面后，检查地址的hash是否与菜单中的链接一致，如果一致直接重写DIV。实现了能通过直接地址访问方式来访问AJAX行为所显示的内容
function loadHash() {

$('#demo-config-menu a').each(function() {
if(this.getAttribute('href').indexOf('/'+window.location.hash.substr(1)+'.html') != -1) {

// 高亮
$(this).parents('ul').find('li').removeClass('demo-config-on');
$(this).parent().addClass('demo-config-on');

loadDemo(this.getAttribute('href'));
}
});

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航