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

利用hashchange和jQuery的SinglePage插件实现单页面应用

2012-09-18 21:32 399 查看
目前除了 ie67 外都原生支持 hashchange 事件.(当用户点击后退与前进进行浏览器导航时会引起 hash 变化.)
当浏览器的 hash 值发生变化时会触发此事件,常常被用来实现单页面应用此事件只能在当前 window 上注册,注册到其他类型元素上无效!

var $=KISSY.all;
$(window).on("hashchange",function(){
// location.hash -> 当前 hash 值
});


先提供本人自己结合部分开源项目代码定制的singlepage插件,实现了IE678 chrome firefox等浏览器效果一致的hashchange事件监听。先提供插件如下(另存为):

jquery.singlepage.min.js

仅需页面一个装载动态更新内容区的标签,例如:

<div id="mainwrap"/>


singlepage的使用方法如下:

$("#mainwrap").SinglePage({
pages: [{"hash":"classindex", "url":"classification/index.htm"},
{"hash":"cerindex", "url":"certificate/index.htm"},
{"hash":"cerregist", "url":"certificate/register.htm"}],
defaultPage: "cerregist",
onChange: function(page){
}
});


而我们的链接标签绑定的hash值则例如是:

<a href="#classindex">点我啊</a>


点击该链接后跳转的URL地址则为:classification/index.htm
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: