jQuery的历史插件

历史导航和刷新问题是使用Ajax中的一个软肋,但可以用JavaScript来弥补这个问题。jquery history pluginjquery的一款历史刷新插件,但它有时候会出现一些Bug,如回上一页时会不流畅。

而今天要推荐的的插件是jQuery Address,它是另一款jquery插件,可以完美地实现历史导航与刷新问题,另外还有针对Flash导航的SWFAddress。你可以查看它的文档API,来详细了解它的用法。

jQuery Address使用很简单,最基础的使用方法如下:

$.address.change(function(event) {
	// 根据event.value的值执行相应的命令
	// $('#content').load(event.value + '.xml');
});
$('a').click(function() {
	// 下面这条命令触发$.address.change事件
	$.address.value($(this).attr('href'));
});

此插件也提供了一个可以直接使用的方法:

$('a').address();

上面这条命令也可以增加一个函数,来处理链接的值,如下:

$('a').address(function() {
	return $(this).attr('href').replace(/^#/, '');
});  

默认下,此插件会自动给属性rel值为以下格式的链接增加功能:

<a href="/deep-link" rel="address:/deep-link">Deep link</a>

下面是jQuery Address的API参考文档:

Events(事件)

$.address.change(fn)

返回:jQuery Address对象

当地址改变时会执行所绑定的函数(fn),此函数会接收一个事件对象做为参数,该事件对象包含有以下属性:value,path,pathNames,parameterNames,parameters和queryString。

$.address.init(fn)

返回:jQuery Address对象

当插件初始化时会执行所绑定的函数(fn),此函数只能执行一次,它会接收一个事件对象做为参数,该事件对象包含有以下属性:value,path,pathNames,parameterNames,parameters和queryString。

$.address.internalChange(fn)

返回:jQuery Address对象

当改变地址的行为来源于页面时,如点击页面中的一个链接,会执行所绑定的函数(fn),此函数会接收一个事件对象做为参数,该事件对象包含有以下属性:value,path,pathNames,parameterNames,parameters和queryString。

$.address.externalChange(fn)

返回:jQuery Address对象

当改变地址的行为来源于浏览器时,如点击浏览器的前进与后退按钮,会执行所绑定的函数(fn),此函数会接收一个事件对象做为参数,该事件对象包含有以下属性:value,path,pathNames,parameterNames,parameters和queryString。

Functions(函数)

address(fn)

返回:jQuery对象

为DOM元素增加本插件的功能,同时会取消DOM元素的默认行为。支持链接和表单,可以根据传入的参数值进行自定义。

这篇文章只翻译了jQuery AddressEvents(事件)Functions(函数)部分,Methods(方法)部分请查看《jQuery Address API文档——Methods(方法)》一文。

附:

无意中看到一篇介绍Deep Linking的文章:《Deep Linking in JavaScript and Ajax Applications》,里面详细地介绍了Deep Linking的理念和解决方法,很值得一看。

此条目发表在 前端 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已被标记为 *

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>