利用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事件监听。先提供插件如下(另存为):

jquery.singlepage.min.js

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

<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

 

posted @ 2012-09-18 21:32  haycco  阅读(744)  评论(0编辑  收藏  举报