页面局部刷新
jquery load
一:全局页面:menu.html(jsp)
1. 引入js
<scripttype="text/javascript"src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
history历史记录插件可以帮助您回到您的JavaScript支持应用程序/前进按钮和书签。你可以存储到应用程序状态的网址散列和恢复它的状态。
详细出处参考:http://www.jb51.net/article/25598.htm
2. 全局页面定义一个div
<div id="content"> </div>
3. 菜单
<ahref="#myinfo"rel="history">我的信息</a>
<ahref="#myinfo2"rel="history">修改密码</a>
<a href="#myinfo3" rel="history">绑定手机</a>
注: a 标签要加rel="history"属性
完整的菜单加内容如下:
<dl class="l_tab">
<dt class="l_tab_title">
<h2>个人资料</h2>
<a href="#myinfo" rel="history">我的信息</a>
<a href="#myinfo2" rel="history">修改密码</a>
<a href="#myinfo3" rel="history">绑定手机</a>
</dt>
<dd class="l_tab_coment">
<div id="content"> </div>
</dd>
</dl>
4. 增加绑定函数
$(document).ready(function(){
$('a').bind('click',function(e){
var currentHistory = $(this).attr("href");
currentHistory =currentHistory.replace("#",''); //去掉#号
$.history.load(currentHistory);
console.log(["form click ", currentHistory]);
e.preventDefault();
});
});
4.javascript增加函数
function load(url) {
if (url=="myinfo")
$("#content").load('http://127.0.0.1/myproject/myinfo.jsp');
else if (url=="myinfo2")
$("#content").load('http://127.0.0.1/myproject/myinfo2.jsp');
else
$("#content").load('http://127.0.0.1/myproject/myinfo3.jsp');
上面循环可以用下面一句代替
$("#content").load(url+'.html');
}
$.history.init(function(url) {
if(url){
load(url);
}
});
二.加载子页面:myinfo.html
页面除了必要的信息外只需写要添加到div内的内容
<!DOCTYPEhtmlPUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<linkhref="css/style.css"rel="stylesheet"type="text/css"/>
</head>
<ulclass="l_tab_cright">
myinfo1111111111111
</ul>
</html>
到这里就实现了页面局部刷新,回退 前进都可以。
但是有个问题,menu.html 中菜单如果点击有样式,失去样式消失,
$(function(){
var tabTitle = ".l_tab_title a";
var tabContent = ".l_tab_cright";
$(tabTitle + ":first").addClass("on");
$(tabContent).not(":first").hide();
$(tabTitle).unbind("click").bind("click", function(){
$(this).siblings("a").removeClass("on").end().addClass("on");
var index = $(tabTitle).index( $(this) );
$(tabContent).eq(index).siblings(tabContent).hide().end().fadeIn(0);
});
});
这样就引起回退和前进的时候菜单不会回头和前进。
就要做如下处理。
修改load函数:
function load(url) {
var tabTitle = ".l_tab_title a";
$("a").removeClass("on")
var path = url;
var pathLength = path.length;
var links = $(tabTitle);
for(var i=0;i<links.size();i++) {
var link = $(links[i]);
var pathFlag = link.attr("href").toString().lastIndexOf(path);
if(pathFlag != -1) {
var hrefLength = link.attr("href").toString().length;
if(pathFlag==(hrefLength-pathLength)) {
link.addClass("on");
}
}
}
$("#content").load(url+'.html');
}