利用hashchange和jQuery的SinglePage插件实现单页面应用
目前除了 ie67 外都原生支持 hashchange 事件.(当用户点击后退与前进进行浏览器导航时会引起 hash 变化.)
当浏览器的 hash 值发生变化时会触发此事件,常常被用来实现单页面应用此事件只能在当前 window 上注册,注册到其他类型元素上无效!
1 var $=KISSY.all; 2 $(window).on("hashchange",function(){ 3 // location.hash -> 当前 hash 值 4 });
先提供本人自己结合部分开源项目代码定制的singlepage插件,实现了IE678 chrome firefox等浏览器效果一致的hashchange事件监听。先提供插件如下(另存为):
仅需页面一个装载动态更新内容区的标签,例如:
<div id="mainwrap"/>
singlepage的使用方法如下:
1 $("#mainwrap").SinglePage({ 2 pages: [{"hash":"classindex", "url":"classification/index.htm"}, 3 {"hash":"cerindex", "url":"certificate/index.htm"}, 4 {"hash":"cerregist", "url":"certificate/register.htm"}], 5 defaultPage: "cerregist", 6 onChange: function(page){ 7 } 8 });
而我们的链接标签绑定的hash值则例如是:
<a href="#classindex">点我啊</a>
点击该链接后跳转的URL地址则为:classification/index.htm