Posts Tagged ‘ jquery

jQuery Address API文档——Methods(方法)

关于jQuery AddressEvents(事件)Functions(函数)部分请看《jQuery的历史插件》一文。

Methods(方法)

下面的方法以链接地址http://julabs.me/blog/address.php#/jquery/address.html?site=julabs&name=jon#welcome为例。

$.address.baseURL()

返回:String对象

获得文档的基地址,本例为:http://julabs.me/blog/address.php

$.address.autoUpdate()

返回:Boolean对象

获得自动更新模式的设置状态

$.address.autoUpdate(value)

返回:jQuery Address对象

设置自动更新模式是否可用,默认为可用。当它被设为可用时会在地址改变时执行jQuery Address对象的$.address.change函数,当被设为不可用时,可以用来命令$.address.update()触发$.address.change函数

$.address.crawling()

返回:Boolean对象

获得crawling模式的设置状态(这个我也不知道是做什么用的–!,可以不用管它)

$.address.crawling(value)

返回:jQuery Address对象

设置crawling模式是否可用,默认为不可用

$.address.hash()

返回:String对象

获得深层链接中的哈希值,本例为:welcome

$.address.hash(value)

返回:jQuery Address对象

设置深层链接中的哈希值

$.address.history()

返回:Boolean对象

获得历史模式的设置状态

阅读全文

自定义jQuery插件Validate的remote方法

Validate是一个非常好的jQuery表单验证插件,但它有个最让我头疼的地方就是它的remote方法。remote默认用get的方法获得一个json格式的返回信息,而公司用的是XML格式。修改remote的返回格式方法,我在网上找了很久都没有找到,没办法,最后只有自己解决,通过多次试验,终于解决了。在此抛砖引玉,如果大家有更好的方法,可以在这里留言。

这里以Validate官方演示AJAX CAPTCHA做为例子来说明下。首先修改下process.php文件,原来的代码是

<?php
session_start();
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
	echo 'true';
else
	echo 'false';
?>

原来的代码输出的是json格式,现在改成XML格式的:

<?php
session_start();
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?><isvalid><result>';
if(strtoupper($_GET['captcha']) == $_SESSION['captcha_id'])
	echo 'true';
else
	echo 'false';
echo '</result></isvalid>';
?>

再改captcha.js文件,这里只例出需要修改的代码段:

remote: "process.php"

阅读全文

Lazyload——JQuery图片延迟加载插件

Lazy Load是一个JQuery插件,它可以延迟下载页面中图片的。视点(viewport)以外的图片在你没有滚动到它的位置之前是不会显示的,这与图片预载的理念正好相反,但是它可以减少一些不必要的下载量。它的用法非常简单,在载入jQueryLazy Load代码后,再输入以下代码就可以了:

$("img").lazyload();

Lazy Load可以实现多种效果,如你可以让图片以渐显的方式显示:


$("img").lazyload({
	effect : "fadeIn"
});

Lazy Load图片显示的触发事件你也可以设置成clickmouseover


$("img").lazyload({
	event : "click"
});

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的理念和解决方法,很值得一看。

卡片式的jQuery像册插件

CSS3 Lightbox Gallery With jQuery

说起来有点土,jQuery的像册插件见过很多,像这样效果的还是第一次见到。如果是在支持CSS3的浏览器中,效果更酷,可以看到图片倾斜的效果。以后的工作中可能会用到这个插件,在这里收藏下。

这款插件的详细介绍和用法请点击这里查看。

华丽的Accordion

这段时间要做个页面,里面有个Accordion效果的图片导航,刚开始先用的jQuery TOOLS,但却没有找到自动滑动的功能,于是开始找其它的Jquery插件,最后终于找到了jQuery Accordion Common。Demo演示请点击这里观看。

jQuery Accordion Common

这个插件做地非常简洁优雅,使用也简单,但效果极其华丽(也可能是它的演示图片华丽吧),看看演示就知道了。

jQuery Accordion Common的作者是个全才,不仅精通JavaScriptXHTMLCSS这些前端技术,而且还会设计和后台编程,PS、FL软件都不在话下,让我这个菜鸟看了有些自卑。