ria之家--RIA三部曲：jquery、ext、flex » jquery

15个相当不错的jquery技巧

明河 — Fri, 15 Jul 2011 13:18:42 +0000

今天在tutorialzine发现一篇关于jquery使用技巧的，相当不错，翻译分享给各位。

1.使用最新的jquery版本

明河觉得这个建议有待商榷，虽然越新的jquery版本性能上更加优秀，但是有些方法的变迁还是会导致一些bug，比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。明河的建议是旧的页面的jquery升级需谨慎，新项目可以大胆的使用jquery新版本。
还有个建议是使用google的cdn上的jquery文件，加载速度更快。猛击Google Libraries API 进入查看。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">script>

2.保持选择器的简单

这个建议明河非常赞同，有很多朋友不喜欢给元素增加样式或id，希望保持html的简洁，使用jquery强大的选择器去检索元素，这不是好的习惯。首先越复杂的选择器，遍历的效率越低，这是显而易见的，最高效率无疑是使用原生的getElementById()；其次，复杂的选择器将标签名称和层级结构固化在里面，假如你的html结构发生了改变，或标签发生了改变，都直接造成检索失败。

$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best

访问DOM，是javascript最耗资源和性能的部分，所以尽量避免复杂或重复的遍历DOM。
避免重复遍历DOM的方法就是将$()检索的元素存储到变量，比如下面的代码：

var buttons = $('#navigation a.button');
// 使用$前缀来标示jquery对象，是非常好的习惯，推荐使用。
var $buttons = $('#navigation a.button');

jquery选择器支持大部分的css3伪类方法，像:visible, :hidden, :animated，虽然很便利，但请慎用，因为当你使用伪类选择器的时候，jQuery不得不使用querySelectorAll()，性能的损耗更大。

3.jQuery对象作为数组处理

jQuery对象定义了length属性，当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象，比如下面代码。

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// 遍历buttons对象
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // 是DOM元素，而不是jQuery对象！
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

根据实验，使用for或while循环，执行效率比$.each()来的高。详细测试可以看several times faster。
使用length属性来检查元素存在性：

if(buttons){ // This is always true
// Do something
}
if(buttons.length){ // True only if buttons contains elements
// Do something
}

4.selector属性

jQuery对象都带有一个selector属性，用于获取选择器名称，比如：

$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)

留意第二行代码，selector返回的是获取的元素完整的选择器。
这个属性常用于编写jquery插件的时候。

5.创建一个空的jQuery对象

这种情况应用场景不多，当你需要先创建个空的jQuery对象，然后使用add()方法向此对象注入jQuery对象时会用到。

var container = $([]);
container.add(another_element);)

6.选择随机元素

应用场景不多，举个例子，现在你需要随机给li增加一个red的class。

(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
$('li:random').addClass('glow');

需要扩展jquery的选择器，这段代码很好的演示了jQuery.expr的用法。

7.使用css钩子

jQuery.cssHooks是1.4.3新增的方法，用的不估计不多，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，举个例子，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

8.使用自定义的Easing（缓动动画效果）函数

easing plugin是用的非常多的函数，可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时，还可以自定义缓动函数。

$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9.$.proxy()的使用

关于$.proxy()，明河曾经详细介绍过，传送门在此《jquery1.4教程三：新增方法教程（3）》。
jquery有个让人头疼的地方，回调函数过多，上下文this总是在变化着，有时候我们需要控制this的指向，这时候就需要$.proxy()方法。

<div id="panel" style="display:none">
<button>Closebutton>
div>

$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
});

嵌套的二个回调函数this指向是不同的！现在我们希望this的指向是#panel的元素。代码如下：

$('#panel').fadeIn(function(){
// Using $.proxy to bind this:
$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});

10.快速获取节点数

这是个常用的技巧，代码如下：

console.log( $('*').length );

11.构建个jquery插件

(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);

关于jquery插件的构建，明河曾发过系列教程，传送门：制作jquery文字提示插件—jquery插件实战教程（1）。
这里就不再详述。

12.设置ajax全局事件

关于ajax全局事件，明河曾发过完整的介绍文章，传送门：《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

// This is wrong:
$('#elem').animate({width:200},function(){
setTimeout(function(){
$('#elem').animate({marginTop:100});
},2000);
});
// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

当存在多个animate动画时，如何处理动画的执行顺序是个烦心事，原文作者是建议使用delay()函数，如上面的代码，但明河的建议是使用queue()方法，因为delay你要考虑延迟多少时间，而queue没有这个问题，进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储

本地存储在现在web应用中使用越来越频繁，jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}
// Use value

使用javascript生成文件

明河 — Sun, 10 Jul 2011 08:49:04 +0000

demo中演示了使用javascript生成文件的典型应用：用户可以在输入框输入自定义的数据，然后可以点击保存，将这些数据保存到本地，无需再手动在本地新建个txt然后再复制，帮用户省了一步操作。
还有一个比较典型的应用：系统输出一段密匙给用户，密匙一般很复杂，希望用户可以快速保存到本地，本文的技术就派上用场了。
从理论上来讲，想要单纯依靠javascript生成文件，是不可能的，目前主流的有二种方案可以实现生成文件功能：1、javascript+flash，该方案网上有现成的插件，插件的名字明河忘记了，-_-!明河比较健忘；2、javascript+服务器端语言，这是明河比较推崇的方案，本文的demo采用javascript+php实现的，接下来对这个方案，明河进行下简单说明。

原理简述：

原理并不复杂，整个流程如下图：

html代码：

<form action="./" method="post">
<h4>在下面输入框输入任意文字h4>
<textarea>textarea>
<a href="#" class="blueButton" id="download">下载a>
form>

php处理数据，返回文件：

if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];
?>

服务器端最关键地就是对header的重写，比如上述代码中的

header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

服务器端需要二个参数：filename和content，接下来我们来看如何通过脚本异步post过去。
异步post，条件反射地想到ajax，但这里我们借助iframe。

assets/jquery.generateFile.js

jquery.generateFile.js这个文件封装了生成文件的方法：

(function($){
// 创建一个jquery插件
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("参数配置不合法!");
}
// 创建一个1*1的iframe
var iframe = $('',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');
var formHTML = '
'+
''+
''+
'';
// 加个延迟的原因是：给IE一些创建DOM的时间
setTimeout(function(){
// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
body.html(formHTML);
var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
//提交表单
form.submit();
},50);
};
})(jQuery);

主要有如下几个关键步骤：

1.生成个iframe

// 创建一个1*1的iframe
var iframe = $('',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');

2.向iframe添加一个表单

表单结构如下：

var formHTML = '
'+
''+
''+
'';

将上述html片段加入到iframe中：

// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
body.html(formHTML);

这里明河重点提下prop方法，这是jquery1.6的新方法哦，这个方法的作用是什么呢？
以前的jquery中，全部使用attr来访问对象的属性，比如取一个图片的alt属性，使用$(‘#img’).attr(‘alt’);
但是在某些时候，比如访问checkbox的disabled属性的时候，会有些问题。在有些浏览器里，只要写了disabled就可以，有些则要写：disabled = “disabled”。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。使用prop的时候，返回值是标准属性，true/false，比如$(‘#checkbox’).prop(‘disabled’)，不会返回 “disabled”或者“”，只会是true/false。当然赋值的时候也是如此。如此，我们便统一了所有操作，无论是从语法上还是语义上。

3.提交表单

var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
//提交表单
form.submit();

初始化插件，生成文件

$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});

Validation-Engine—jquery表单验证插件详解

明河 — Sat, 02 Jul 2011 07:33:47 +0000

先道个歉，这二月明河工作太忙了，没多少时间更新博客，也很少捣鼓东西了。
（ps:RIA之家的全部demo，明河已经托管到github，如果要下载博客的全部demo，传送门在此：https://github.com/minghe/36ria-demo。）
今天明河将着重向各位朋友介绍个强大的jquery表单验证插件：Validation-Engine，明河在很早之前曾队Validation-Engine进行过介绍，传送门在此《validationEngine中文版 — jquery强大的表单验证插件》。那时候的validationEngine版本还是比较早的，目前最新的是2.2，跟以前相比改变了非常多，不少朋友给我留言希望更新下validationEngine的文章。所以写了这篇文章。

明河已经把验证规则的提示内容翻译成中文了，请看validation-engine-2.2\js\languages\jquery.validationEngine-cn.js。关于时间有二处提示没找到地方，目前没做修改。明河的英文太菜，翻译难免词不达意，欢迎纠正，O(∩_∩)O哈！
（ps：时间有限，demo没做翻译，请见谅。）

Validation-Engine的使用

Validation-Engine的调用跟旧版没什么太大区别，可以看《validationEngine中文版 — jquery强大的表单验证插件》，明河这里不再累述。这里对其中的二个点进行补充：ajax验证和钩子的使用。这二部分相对而言会难些，所以需要着重介绍下。

如何处理ajax验证？

典型场景：如何使用Validation-Engine验证用户名或email的存在性？
这个需求在大部分的注册页面都会用到，那如何使用Validation-Engine进行ajax验证呢？
Validation-Engine的ajax验证有二种模式：

Inline：表单元素即时验证，比如失去焦点后触发ajax验证请求
Submit：整个表单的验证

inline验证

inline验证当表单字段的值发生改变时会触发相应的ajax事件，比如用户名的输入框失去焦点后。
想要使用ajax验证，需要你在语言规则文件上加上相应的ajax验证规则，打开validation-engine-2.2\js\languages\jquery.validationEngine-cn.js，找到如下代码：

"ajaxUserCallPhp": {
"url": "phpajax/ajaxValidateFieldUser.php",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
// if you provide an "alertTextOk", it will show as a green prompt when the field validates
"alertTextOk": "* 恭喜你，此用户名可以使用",
"alertText": "* 该用户名已经存在",
"alertTextLoad": "* 正在验证中，请稍等..."
}

上述是一套ajax的验证规则，url指向服务器端路径，alertText为验证提示，alertTextLoad为正在验证时显示的消息。alertTextOk即ajax验证成功时显示的消息。
然后你需要在表单字段上应用上这段规则。

<input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCallPhp]] text-input" type="text" name="user" id="user" />

留意这里的ajax[ajaxUserCallPhp] ，[]内部即时ajax的验证规则，是必须对应起来的。

Submit验证

直接ajax验证整个表单可以如下处理。

jQuery("#formID").validationEngine({
ajaxFormValidation: true,
onAjaxFormComplete: ajaxValidationCallback,
onBeforeAjaxFormValidation: beforeCall
});

ajaxFormValidation：开启ajax表单验证
onAjaxFormComplete：ajax验证结束后执行的回调函数
onBeforeAjaxFormValidation：在ajax验证前执行的回调函数

具体demo可以看：http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html。

如何使用钩子？

Validation-Engine中的钩子是用来做啥？我们来看一个典型的使用场景：当你的表单字段存在错误时，你希望表单提交前，在表单头部打印出一行“你的表单存在错误，请修改！”。
也就是说Validation-Engine中的钩子其实可以理解为自定义事件。
具体来看个demo：http://www.position-relative.net/creation/formValidator/demos/demoHooks.html。

$("#formID").bind("jqv.form.result", function(event , errorFound){
if(errorFound) $("#hookError").append("There is some problems with your form");
})

监听jqv.form.result事件，在提交表单前触发。
errorFound是错误标识符，当为false时，表示表单存在错误。

Validation-Engine目前支持的钩子（自定义事件）

jqv.form.validating:在表单开始验证前
jqv.field.result(event, field, errorFound, prompText) :一个表单字段验证后触发
jqv.form.result(event, errorFound) : 表单验证后触发

注意点

xiantao同学提了关于Validation-Engine的问题，有使用的朋友可以留意下：
“大家用的时候要注意一点，就是尽可能的把需要验证的框排的不要要密，或者说间距很小，要不会导致验证时弹出的层盖住其他的框，而这些框无法获得焦点，导致用户无法输入，而这个框有是必填的，结果就是用户的表单无法提交。我们整个项目都用的是这个，除了这一点，真的很完美”

jquery分页插件—Smart Paginator

明河 — Wed, 25 May 2011 06:52:52 +0000

很久没介绍jquery相关的东西了，今天推荐一个分页工具条插件：Smart Paginator，这个插件用途还是很广的，而且可定制性相当不错，目前内置三种颜色，有需要的话，可以自己改css定制颜色，明河推荐使用。

1.如何使用Smart Paginator？

1.1引入以下几个文件

<script src="jquery-1.4.4.min.js" type="text/javascript">script>
<script src="smartpaginator.js" type="text/javascript">script>
<link href="smartpaginator.css" rel="stylesheet" type="text/css" />

1.2添加一个分页容器层

<div id="smart-paginator" > div>

1.3初始化插件

$(document).ready(function() {
$('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange
});
function onChange(newPageValue) {
alert(newPageValue);
}

可以看到想要初始化Smart Paginator，需要配置不少参数，接下来来看下这些主要参数的含义。

2.参数说明

参数	默认值	类型	描述
totalrecords	0	Number	总的分页数
recordsperpage	0	Number	单页数据量
length	10	Number	这个参数很特殊，上一页、下一页、第一页、最后一页的显示控制依赖于这个参数，当length的值大于totalrecords/recordsperpage时，是不显示上一页、下一页、第一页、最后一页的
next	Next	String	下一页文本
prev	Prev	String	上一页文本
first	First	String	第一页文本
last	Last	String	最后一页文本
go	Go	String	跳转文本
theme	green	Stirng	模板
display	double	String
initval	1	Number	默认显示第几页
datacontainer	”	String	数据容器id，请看demo3
dataelement	”	String	数据元素，指的是容器下的对应的子元素的选择器，请看demo2
onchange	null	Function	分页改变后触发的函数

3.自定义颜色模板

.green
{
background-color: #4f7305;
}
.green.normal
{
background-color: #588500;
color: White;
border: solid 1px #5f9000;
}
.green.active
{
background-color: #344C00;
color: #F8EB00;
border: solid 1px #5f9000;
}
.green .btn
{
background-color: #588500;
color: White;
border: solid 1px #5f9000;
}

使用jQuery和css进行更好的checkbox按钮设计

苏河 — Tue, 03 May 2011 11:22:56 +0000

有很多场景需要我们用checkbox来进行诠释，比如一些开关配置的启用与否，当然，原始的checkbox已经深入人心，相信大多数的网站都会采用这种方式与用户进行交互，苏河今天要提出的就是一种不同的交互方式，我们姑且称它为开关式交互（请猛击这里查看demo），这种交互方式相信大家或多或少都能在一些网站上见到过，那么今天，苏河就采用jQuery插件对这种交互进行实现。

1. HTML

首先是文档结构，我们需要一个带有form标签的checkbox，我们还需要引入一个jQuery以及一个自定义的css样式。

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | Tutorialzine Demotitle>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
head>
<body>
<div id="page">
<form method="get" action="./">
<ul>
<li>
<label for="ch_effects">Display effects: label>
<input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" />
li>
<li>
<label for="ch_location">Enable location tracking: label>
<input type="checkbox" id="ch_location" name="ch_location" checked />
li>
<li>
<label for="ch_showsearch">Include me in search results: label>
<input type="checkbox" id="ch_showsearch" name="ch_showsearch" />
li>
<li>
<label for="ch_emails">Email notifications: label>
<input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" />
li>
ul>
form>
div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js">script>
<script src="js/script.js">script>
body>
html>

这段代码主容器page包含一个form元素，form元素里面用label诠释相应checkbox，checkbox通过data-on和data-off属性来定义勾选与否显示的文字。
下面一段代码是jQuery插件执行完之后用来替代checkbox显示开关的代码

<span class="tzCheckBox checked">
<span class="tzCBContent">ON</span>
</span>
</span>

当插件被调用的时候，将做一次循环遍历checkbox的操作，然后在每个checkbox后插入上面这段代码，并隐藏checkbox以达到偷梁换柱的目的。

css

好了，接下来我们将注意力转移到样式上，苏河用一张透明的图片来显示开关的背景，这是一张会随着开关文字增加而自动延伸背景的sprites。

.tzCheckBox{
background:url('background.png') no-repeat right bottom;
display:inline-block;
min-width:60px;
height:33px;
white-space:nowrap;
position:relative;
cursor:pointer;
margin-left:14px;
}
.tzCheckBox.checked{
background-position:top left;
margin:0 14px 0 0;
}
.tzCheckBox .tzCBContent{
color: white;
line-height: 31px;
padding-right: 38px;
text-align: right;
}
.tzCheckBox.checked .tzCBContent{
text-align:left;
padding:0 0 0 38px;
}
.tzCBPart{
background:url('background.png') no-repeat left bottom;
width:14px;
position:absolute;
top:0;
left:-14px;
height:33px;
overflow: hidden;
}
.tzCheckBox.checked .tzCBPart{
background-position:top right;
left:auto;
right:-14px;
}

这里的tzCheckBox用inline-block的行内的块元素进行定义，为的是tzCheckBox子元素的背景和文字在同一行，同时position的相对定位也为其子元素的背景元素的定位提供一个参考的标准，可以让tzCBPart显示剩余的背景。

jQuery插件

好了，接下来介绍jQuery插件，这个插件公布了一个可写属性labels供外部进行开关文字的定义，另外，将选择器作为this指针传入函数进行checkbox的遍历。

(function($){
$.fn.tzCheckbox = function(options){
//默认是ON和OFF:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// 检查data-on和data-off属性:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// 生成开关HTML代码
var checkBox = $('',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: ''+labels[this.checked?0:1]+
''
});
//插入开关代码，并隐藏原始的checkbox
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// 记录开关变化至原始的checkbox中
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// 监听原始checkbox的改变，做开关模拟点击
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);

当然，针对开关的操作定义了click事件来进行一些响应，比如是否选中会记录到原始的checkbox（虽然它被隐藏了）中，比如开关文字的变化。有人会问为什么要记录到原始的checkbox中，因为这是一个表单，当提交的时候它就需要post一个正确的值了。
我们可以使用下面的代码来调用这段插件。

$('input[type=checkbox]').tzCheckbox({
labels: [ 'Enable', 'Disable' ]
});

这段代码的含义就是调用页面所有的checkbox，并写入开关对应的文字Enable和Disable。

到此为止，这个demo也结束了。

结束语

这个插件的用处就在于其取代了原来的checkbox，在某些场合能给用户更好的交互体验，相信大家一定在一些配置应用或者管理员页面中经常见到这样的交互吧，当然，当用户禁用了javascript的时候，展现给用户的就是原始的checkbox了。

提升用户体验之道：图片预加载

天河 — Fri, 08 Apr 2011 15:06:23 +0000

随着网站构建越来越倾向于实现“桌面般的体验”，网站中的图片数量也开始显著地增长。想想网站中的对话框、Tabs、Tooltips、Sliders以及日历控件吧，这都是实现“桌面般体验”的必要元素。

预加载这一堆图片对网站性能及可用性的提升是有好处的，这样避免了图片加载过程中页面的闪烁、破裂（视觉上）等问题。

常用的技术

有两种常用的图片预加载技术：

CSS sprites

CSS sprites技术可以用来减少页面产生的HTTP请求数。它是这么实现的，把所有的图型状态（比如按钮的默认状态，悬停及激活等状态）保存到一张图片中。并依据元素的状态，使用CSS对图片进行相应的定位、切割。

不过这样有个重要的缺点——需要提前加载的图片不适用这项技术。一些后面才需要显示的图片并没有被加载，这可能会导致一个延迟。因此，此技术一般适合静态站点，主要用来减少图片加载数。

JavaScript

另一个可以使用的技术是使用JavaScript的image对象。这个方法是这样的，先把网站中使用的每个图片的地址（URL）放到一个数组中。

var myImages = ["image_1.jpg', 'image_2.jpg', 'image_3.jpg', ...];

然后遍历这个数组，根据图片地址创建各自的image对象。这样可以保证所有的图片都能被浏览器缓存，等用到的时候就无需等待了。

for (var i = 0; i <= myImages.length; i++) {
var img = new Image();
img.src = myImages[i];
}

此方案费时的地方是，不仅要制造一个包含每张图片地址的数组，还要维护它的一致性。网站的每个需求变更（添加或更改图片地址）都会影响到这个数组。试想频繁变更的应用，又拥有数百张图片，这真会让人筋疲力尽的。

图片自动预加载（带进度指示器）

一个更好的方式是自动收集图片的地址。

首先要分析页面中（包括外链及内联）的样式表。这可以通过遍历“document.styleSheets”对象来获得页面使用的所有样式表。

for (var i = 0; i < document.styleSheets.length; i++){

接下来要找出样式表的根目录。用来得到各个图片的绝对地址。

var baseURL = getBaseURL(document.styleSheets[i].href);

考虑到浏览器的兼容性，必须同时检查每个样式表的“cssRules”或“rules”中是否包含CSS规则。

if (document.styleSheets[i].cssRules) {
cssRules = document.styleSheets[i].cssRules
}
else if (document.styleSheets[i].rules) {
cssRules = document.styleSheets[i].rules
}

所有非空的CSS规则都要被解析，来确认它是否关联了图片。一个简单的正则表达式就可以解析出图片地址。

var cssRule = cssRules[j].style.cssText.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);

然后，把这里收集到的所有图片地址保存到一个数组中供后面使用。

function analyzeCSSFiles() {
var cssRules; // CSS rules
for (var i = 0; i < document.styleSheets.length; i++) { // loop through all linked/inline stylesheets
var baseURL = getBaseURL(document.styleSheets[i].href); // get stylesheet's base URL
// get CSS rules
if (document.styleSheets[i].cssRules) {
cssRules = document.styleSheets[i].cssRules
}
else if (document.styleSheets[i].rules) {
cssRules = document.styleSheets[i].rules
}
// loop through all CSS rules
for (var j = 0; j < cssRules.length; j++) {
if (cssRules[j].style && cssRules[j].style.cssText) {
// extract only image related CSS rules
// parse rules string and extract image URL
var cssRule = cssRules[j].style.cssText.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
if (cssRule) {
// add image URL to array
cssRule = (cssRule + "").replace("\"", "")
imageURLs.push(baseURL + cssRule);
}
}
}
}
}

数组中存放的图片地址是绝对路径，为了得到它，我们实现了“getBaseUrl”函数来解析每个CSS文件的绝对地址。

function getBaseURL(cssLink) {
cssLink = (cssLink) ? cssLink : 'window.location.href'; // window.location.href for inline style definitions
var urlParts = cssLink.split('/'); // split link at '/' into an array
urlParts.pop(); // remove file path from URL array
var baseURL = urlParts.join('/'); // create base URL (rejoin URL parts)
if (baseURL != "")
{
baseURL += '/'; // expand URL with a '/'
}
return baseURL;
}

现在，遍历这个列表，为网站的每个图片创建一个JavaScript图片对象，来实现图片预加载并强制浏览器进行缓存。请注意“setTimeout”的使用，它确保了每个图片加载是依序执行的，当前图片加载完成才会加载下一个。原因是某些浏览器无法同时处理超过2个请求（译者注：IE6单域下的并发连接数限制就是2个）。为了避免可能的死锁，这里使用jQuery的bind方法给“load”、“onreadystatechange”和“error”事件绑定了一个处理器。这样可以确保遇到无法加载的遗失图片时，“errorTimer”可以把你带回正确的轨道。

function preloadImages() {
if (imageURLs && imageURLs.length && imageURLs[imagesLoaded]) { // if image URLs array isn't empty
var img = new Image(); // create a new imgage object
img.src = imageURLs[imagesLoaded]; // set the image source to the extracted image URL
setTimeout(function () {
if (!img.complete) {
jQuery(img).bind('onreadystatechange load error', onImageLoaded); // bind event handler
} else {
onImageLoaded(); // image loaded successfully, continue with the next one
}
errorTimer = setTimeout(onImageLoaded, 1000); // handle missing files (load the next image after 1 second)
}, 25);
}
else {
showPreloadedImages();
}
}
function onImageLoaded() {
clearTimeout(errorTimer); // clear error timer
imagesLoaded++; // increase image counter
preloadImages(); // preload next image
}

为了提升预加载时的用户体验，这里对“onImageLoaded”事件处理器做点改动，来添加一个进度条。

首先，引入jQuery UI的样式和显示进度条所需要的JavaScript文件。

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">script>

然后在DOMReady事件被触发时初始化进度条。

$(document).ready(function () {
$("#progressbar").progressbar({ value: 0 }); // initialize progress bar
});

最后要做的一件事是扩展“onImageLoaded”事件处理函数。每加载完一张图片，就计算一次进度并更新进度条。

为了验证预加载的效果，这里把所有图片都添加到页面中。在预加载全部完成时，所有的图片会同时显示。

function onImageLoaded() {
clearTimeout(errorTimer); // clear error timer
$("#imagelist").append("" + imagesLoaded + ": " + imageURLs[imagesLoaded] + "'/>"); // append image tag to image list
imagesLoaded++; // increase image counter
var percent = parseInt(100 * imagesLoaded / (imageURLs.length - 1)); // calculate progress
$("#progressbar").progressbar({ value: percent }); // refresh progress bar
$("#progressbarTitle").text("Preloading progress: " + percent + "%");
preloadImages(); // preload next image
}

优秀只需一小步

预加载图片是一个提升用户体验，以及让自己的网站看起来更专业的一个途径。通过自动分析CSS规则来进行图片的批量预加载也避免了大量的体力活。

进度条可以让用户知道加载的进展，避免用户的冷落感。另外，jQuery提供了大批优秀组件，进度条就是其中一个，只需简单的配置就可以满足我们的需求。使用它们无疑能显著提升你的网站形象。

希望这篇文章能给你带来灵感，去思考你的项目是否也能从这里描述的技术受益。

最后附上zip文件，它包含所有上面的预加载示例文件。下载并解压后，用浏览器打开preloading.html，并单击“Start preloading”就可以观看示例了。

再做些简单修改，你就可以把它集成到你自己的项目里了。

原文：Improving User Experience: Preload Images

附：这是天河在这里发的第一篇文章，翻译的不好，望大家见谅。顺道给大家打个招呼，以后望大家多多关照哈。原文附件在Chrome下有些小问题，待我修正后附上。

jquery+canvas实现html5幻灯片

明河 — Sat, 02 Apr 2011 05:50:40 +0000

html5最重要的更新之一：增加了canvas，开始支持矢量绘画，目前浏览器支持比较好的是canvas的2d接口，3d有点遥远，通过canvas，我们可以在web设计中实现很炫的效果，从理论上来讲，大部分的flash动画特效都有办法使用canvas实现，当然实现的成本还是过高了。今天明河向各位讲解个canvas相关的实战教程：jquery+canvas实现html5幻灯片。
关于html5的canvas有个非常经典的教程，你不得不看：来自opera中国的《HTML 5 canvas —— 基本语法》。
canvas内容太丰富了，想要通过一篇文章都讲解到，难免流于浅谈则止，所以这篇教程只让大家了解canvas的drawImage接口。
也许你会疑惑，html早就有插入图片的标签了，在canvas中插入图像有意义吗？明河的回答是：有！canvas的图像是可以实现像素级的操作！

1.原理简述

这篇教程的难点在于切换图片时先提高图片的对比度，然后再予以渐隐（由于使用canvas，请勿在IE下查看demo）。提高图片的对比度用的是photoshop的对比度算法，当然这个算法的细节大家无需纠结，明河只是希望通过这篇教程大家能够大致了解canvas的图像处理方面的技巧。
排除这个对比度处理，其他的jquery代码其实难度不高，明河特意加了翔实的中文注释，只要你有耐心，我相信你一定看的懂。

2.开始构建个用于幻灯片的图片列表

<div id="slideshow">
<ul class="slides">
<li><img src="img/photos/1.jpg" width="620" height="320" alt="照片1" />li>
<li><img src="img/photos/2.jpg" width="620" height="320" alt="照片2" />li>
<li><img src="img/photos/3.jpg" width="620" height="320" alt="照片3" />li>
<li><img src="img/photos/4.jpg" width="620" height="320" alt="照片4" />li>
ul>
<span class="arrow previous">span>
<span class="arrow next">span>
div>

非常简单的结构，除了图片列表外，当然还免不了上一张、下一张的箭头。样式不是本文的重点，这里略过。

3.在页面加载结束后加载初始化幻灯片

$(window).load(function(){})

这里可能朋友们有疑惑：为啥不用$(function(){})，不是更简单？
之所以使用$(window).load()而不使用更简洁的$()，是因为我们需要确保图片全部加载完成，而不是DOM加载完成，还有个原因canvas还是很耗资源的。

4.判断浏览器是否支持canvas

//测试浏览器是否支持canvas
var supportCanvas = 'getContext' in document.createElement('canvas');

这一步很重要哦，当用户的浏览器不支持canvas，我们需要另外一种降级处理。

5.遍历每张图片

//遍历每张图片
$('#slideshow img').each(function(){
//第一张图片时先设置下幻灯片的宽高（将图片的宽高缓存起来，供其他代码调用）
if(!slideshow.width){
slideshow.width = this.width;
slideshow.height = this.height;
}
//在图片之前产生canvas
createCanvasOverlay(this);
});

这里有二步操作：

将图片尺寸写入缓存变量slideshow，供日后调用
执行createCanvasOverlay()函数，插入canvas

6.创造canvas对像

/**
* 创造canvas对像
* @param {Object} image 图片
*/
function createCanvasOverlay(image){
//创建canvas元素
var canvas = document.createElement('canvas'),
//获取2d canvas上下文（如果不支持canvas，这个对象是不存在的）
canvasContext = canvas.getContext("2d");
// 设置canvas的宽度和高度
canvas.width = slideshow.width;
canvas.height = slideshow.height;
//在canvas内绘制一张图片
canvasContext.drawImage(image,0,0);
//获取canvas图片像素数据，这非常重要
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;
// Loop through all the pixels in the imageData array, and modify
// the red, green, and blue color values.
//遍历所有的像素并修改红色、绿色、蓝色通道的值，这是整个教程中最难的部分，如果没理解没关系，但希望通过这一个操作，让各位直观的感受canvas像素级操作的强大
for(var i = 0,z=data.length;i<z;i++){
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
//为了更好的说明，这里明河加入颜色反转效果，可以把上面的代码去掉，换成下面的试下
/*data[i] = 255 - data[i];
data[++i] = 255 - data[++i];
data[++i] = 255 - data[++i];*/
++i;
}
//重新应用下像素数据，后面二个参数是x\y坐标值
canvasContext.putImageData(imageData,0,0);
//将canvas插入到图片前面
image.parentNode.insertBefore(canvas,image);
}

这是教程代码的关键部分。我们一步一步来看。

1)创建个canvas元素

//创建canvas元素
var canvas = document.createElement('canvas'),
//获取2d canvas上下文（如果不支持canvas，这个对象是不存在的）
canvasContext = canvas.getContext("2d");
// 设置canvas的宽度和高度
canvas.width = slideshow.width;
canvas.height = slideshow.height;

设置canvas的尺寸等于图片尺寸，正好遮住图片，当切换图片时，先出现canvas（canvas的图片是修改过的高对比度的图片）。最后我们输出的节点如下：

想要使用canvas的API，请先获取2d canvas上下文，这非常重要，所有基于canvas的操作都基于getContext(“2d”)。

2)向canvas内插入图片

//在canvas内绘制一张图片
canvasContext.drawImage(image,0,0);

严重推荐阅读：http://kb.operachina.com/node/190#insertingimages。
drawImage方法允许在 canvas 中插入图像，共有九个参数（恐怖吧…常用的是前面三个）：

图片对象
x轴坐标
y轴坐标
图像宽度
图像高度

之前说过，在canvas中插入图像的优势，在于可以实现像素级的操作，比如这里我们要加强图像的对比度。

3)获取canvas图片像素数据

//获取canvas图片像素数据，这非常重要
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
data = imageData.data;

getImageData方法，将获取canvas图片像素数据，此对象有个data数组，用于存放像素数据。getImageData共有四个参数：x坐标、y坐标、宽度、高度。

4)强化图像对比度

这段代码有点复杂，特别是对比度强化处理

//遍历所有的像素并修改红色、绿色、蓝色通道的值，这是整个教程中最难的部分，如果没理解没关系，但希望通过这一个操作，让各位直观的感受canvas像素级操作的强大
for(var i = 0,z=data.length;i<z;i++){
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
++i;
}

来着photoshop强化对比度的算法，如果这个算法没弄明白，没关系，只要记得有这样的用法即可。简单说明下原理：强化对比度，实际是处理红（data[i]）、绿（data[i+1]）、蓝（data[i+2]）三个通道数据，大部分对图像像素数据，更准确的将应该是矩阵的处理，实际上都是对三个通道的处理。
说真的，这个算法内部细节的含义，明河也不清楚，欢迎讨论。

5)重新输出图像像素

//重新应用下像素数据，后面二个参数是x\y坐标值
canvasContext.putImageData(imageData,0,0);

6)将canvas插入到DOM中

//将canvas插入到图片前面
image.parentNode.insertBefore(canvas,image);

7.监听箭头切换幻灯片事件

$('#slideshow .arrow').click(function(){
var li = slides.eq(current),
canvas = li.find('canvas'),
nextIndex = 0;
//下一张
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
//上一张
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}
var next = slides.eq(nextIndex);
//支持canvas的情况
if(supportCanvas){
//渐现canvas
canvas.fadeIn(function(){
//显示下个容器
next.show();
current = nextIndex;
//隐藏当前图片容器，并移除激活样式，给新出现的图片容器加上激活样式
li.fadeOut(function(){
li.removeClass('slideActive');
canvas.hide();
next.addClass('slideActive');
});
});
}
else {
//如果浏览器不支持canvas只做简单的显隐处理
current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});

这代码相当简单多了。这里有个推荐学习的技巧，将next和prev方法合并，其实不管是next还是prev方法执行的动作都是类似的，我们根据按钮是否带有“next”样式来判断是上一张还是下一张。

//下一张
if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
//上一张
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}

8.轮播幻灯片

轮播幻灯片，实际上是定时触发next（下一张箭头）的click事件。

var timeOut = null;
$('#slideshow .arrow').click(function(e,simulated){
//点击箭头，清除定时器
if(!simulated){
clearTimeout(timeOut);
}
});
(function autoAdvance(){
//触发箭头点击事件，当第二个参数为false时，清理定时器
$('#slideshow .next').trigger('click',[true]);
//5秒定时轮放
timeOut = setTimeout(autoAdvance,5000);
})();

代码请看autoadvance.js。这里有个很有意思的jquery技巧，触发事件，并给事件传递自定义参数。

$('#slideshow .arrow').click(function(e,simulated){
});
$('#slideshow .next').trigger('click',[true]);

trigger接受第二个参数，并且是数组类型，分别对应事件方法的第二至N个参数，比如这里的true对应simulated，事件内部根据simulated值做相应的处理。

9.明河结语

这篇教程有点长…..内容还是很丰富的，算是jquery和canvas实战性比较强的教程，希望大家喜欢，如果你对代码有任何疑问，都可以给明河留言，明天就是清明假期了，祝大家假期愉快！

zoomy—jquery图片放大镜插件

明河共影 — Mon, 28 Mar 2011 10:28:25 +0000

很久没介绍jquery方面的东西了，今天偶然发现了一个相当不错的jquery图片放大镜插件：zoomy，分享给给位。

使用上非常简单。

1.引入jquery和插件

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js">script>
<link type="text/css" rel="stylesheet" href="path-to/zoom1.0.css"/>
<script type="text/javascript" src="path-to/zoomy1.0.js">script>

2.建立类似如下的html结构

<a href="zoomImg.jpg" class="zoom">
<img src="displayImg.jpg" />
a>

a的路径指向大图路径。

3.初始化

$('.zoom').zoomy({
zoomSize: 200,
round: true,
glare: true,
zoomText: 'click to Zoom'
});

4.原理简述

图片放大镜的原理并不复杂，当鼠标滑过图片时，不存在放大镜层，创建一个放大镜层，这个层的背景图片指向大图，当你的鼠标在图片移动时候，鼠标坐标改变了，同时改变放大镜层背景图片的位移。
当然，实际的情况会要复杂的多，你要处理下边界，不能让你的放大镜超越可视图片的边界。
zoomy有个有意思的放大镜层，是完全使用css3完成的，效果如下

圆形的放大镜层，是使用css3的圆角属性生成的，而圆形内部还有一个白色半透明的圆形层，再加上阴影，就形成了比较逼真的放大镜效果。

.zoomy{
position: absolute;
display: none;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 5px 10px #000;
-moz-box-shadow: 0px 5px 10px #000;
border: 1px solid #999;
line-height: 100px;
text-align: center;
background-image: url(loading.gif);
background-position: center;
background-color: #fff;
z-index: 1000;
overflow: hidden;
}
.zoomy span{
display: block;
margin: 5px auto;
background: -moz-linear-gradient(top, rgba(255,255,255,.61) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 71%, rgba(255,255,255,.61) 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.61)), color-stop(24%,rgba(255,255,255,0)), color-stop(71%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,.61))); /* webkit */
}
.zoomBar{
font-family: arial, helvetica;
color: #fff;
text-decoration: none;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
background: #000;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: #000000;
padding: 5px 10px;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
opacity: .8;
filter:alpha(opacity=80);
}

使用jquery制作ajax提交表单时的交互按钮

明河共影 — Sat, 19 Feb 2011 13:56:35 +0000

当你的表单使用ajax来提交的时候，有一个点要关注：防止用户重复点击提交按钮，同时要跟用户一个良好的交互反馈，比如点击提交后，有“正在提交中….”的提示或者出现一张loading图片。

在这个demo很好的展示ajax表单提交时的按钮交互处理，同时代码也不会特别复杂，算是一个学习jquery的不错demo，原文请看《Create a Simple Interactive CSS Button with jQuery》。

点此下载

1.构建一个简单表单

<form method="post" action="" name="subscribeForm">
<fieldset>
<label>Name: label><input type="text" class="effect" name="name">
fieldset>
<fieldset>
<label>Email: label><input type="text" class="effect" name="email">
fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
div>
form>

没什么太特别的地方，接下来看下表单样式，特别留意提交按钮。

2.表单样式

按钮样式设置：

#button {
margin-top:10px;
padding-right:20px;
text-align:right;
}
#button input {
margin:0 auto;
}
a.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.2em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
a.cssSubmitButton:visited {}
a.cssSubmitButton:hover {
border:1px solid #333;
}

cssSubmitButton这个样式，是脚本用a替换input时加上去了，也是说最后输出的按钮其实是个链接，之后会讲到，留言按钮的几种状态：可用、不可用、正在提交、鼠标滑过。按钮样式无视IE…….

3.js脚本

以下脚本会发送ajax请求，同时会给按钮添加loading样式：

var value = $('#button input').val();
var name = $('#button input').attr('name');
//将按钮容器内的input替换成链接，链接伪装成按钮
$('#button input').remove();
$('#button').html('' + name + '>' + value + '');
//监听单击事件
$('#button a').live('click', function () {
//使用$('form[name=' + $(this).attr('rel') + ']').submit();直接提交表单
var link = $(this);
//ajax提交表单
$.ajax({
url : 'load.php',
data: '',
type: 'GET',
cache: 'false',
beforeSend: function () {
//提交前，给链接，添加loading样式
link.addClass('loading');
},
success: function () {
link.removeClass('loading');
alert('Submitted');
}
});
});

大功告成！

使用jquery+css3制作旋转效果的幻灯片

明河共影 — Sat, 22 Jan 2011 06:33:10 +0000

这是tutorialzine上的一篇实战性颇强的教程，明河将其翻译过来，献给各位对css3敢兴趣的朋友。
这篇教程主要演示的是css3的旋转特性，由于浏览器间还是存在差异的，引入了jquery.rotate.js，姑且忽略IE。同时演示了jquery自定义事件的使用。

点此下载

1.创建一个幻灯片html结构

<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg" width="100%" alt="Fish" />li>
<li><img src="img/photos/2.jpg" width="100%" alt="Ancient" />li>
<li><img src="img/photos/3.jpg" width="100%" alt="Industry" />li>
<li><img src="img/photos/4.jpg" width="100%" alt="Rain" />li>
ul>
div>
<a id="previousLink" href="#">»a>
<a id="nextLink" href="#">«a>
div>

#slideShowContainer容器内的元素全部为绝对定位，这是由交互特点决定的，采用其他定位方式还真不好处理，绝对定位有个问题就是要处理好z-index，尤其是图片容器间的z-index，默认是后面的遮住前面的，但我们需要脚本修正为前面遮住后面的。

2.关键css代码

#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}

#slideShow这个层很关键，所有的交互都基于这个层。

3.js脚本（已加中文注释）

$(document).ready(function(){
//幻灯片
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
//幻灯片的图片容器
li = ul.find('li'),
//图片个数
cnt = li.length;
//设置每个图片容器（li）的z-index，递减（采用绝对定位，保证越前面的z-index应该越高）
updateZindex();
if($.support.transform){
//css3旋转
li.find('img').css('rotate',function(i){
// 逆时针旋转
return (-90*i) + 'deg';
});
//绑定一个自定义事件（参数：方向、角度）
slideShow.bind('rotateContainer',function(e,direction,degrees){
//扩大幻灯片容器
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
//下一张
if(direction == 'next'){
//渐隐第一张图片，并将这张图片添加到最后，同时更新所有li的z-index
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
//上一张
else {
//隐藏最后一张图片，移动这张图片到第一个位置，更新li的z-index，最后渐现该图片
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
//旋转动画（使用jquery.rotate.js来解决浏览器之间的差异）
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
//绑定二个自定义事件（下一张、上一张）
slideShow.bind('showNext',function(){
//二个参数：方向、角度
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
else{
// IE9以下浏览器，不支持旋转属性，去掉旋转效果
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
//点击上一个箭头
$('#previousLink').click(function(){
//运动未结束，直接返回
if(slideShow.is(':animated')){
return false;
}
//触发自定义事件showPrevious，切换到上一张图片
slideShow.trigger('showPrevious');
return false;
});
//点击下一个箭头
$('#nextLink').click(function(){
//运动未结束，直接返回
if(slideShow.is(':animated')){
return false;
}
//触发自定义事件showNext，切换到下一张图片
slideShow.trigger('showNext');
return false;
});
//更新li的z-index
function updateZindex(){
//遍历li，让z-index递减
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
});

3.1更新图片容器li的z-index

//更新li的z-index
function updateZindex(){
//遍历li，让z-index递减
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}

这是很关键的处理步骤，在每次改变图片时都要触发一次。

3.2初始默认设置图片的旋转角度的理由

//css3旋转
li.find('img').css('rotate',function(i){
// 逆时针旋转
return (-90*i) + 'deg';
});

外层容器#slideShow旋转了90度，里面的图片自然也跟着旋转了90度，那么最终显示的图片角度是错误的。所以我们需要一个方案，不管容器如何旋转，图片显示时角度都是正确的。所以这里给每个图片加上了旋转。

3.3jquery自定义事件的使用

slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});

jquery自定义事件很重要，希望朋友们对看下相关教程。这里强烈推荐下《jquery cookbook》，关于jquery事件有非常详细的说明，英文版网上可以载的到。

3.4jquery.rotate插件的使用

slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');

上述代码，不止是旋转了容器，同时还改变了容器尺寸（恢复原来容器大小）。

Picture Menu — 华丽的jquery滑动幻灯片插件

明河共影 — Wed, 19 Jan 2011 11:46:27 +0000

明河上次推荐jquery插件，还要追溯到2010年9月了……现在基本上已经不写jquery代码了，但对jquery还有不可割舍的感情，会继续更新jquery的相关教程。今天给大家介绍一款相当不错的jquery滑动幻灯片插件：Picture Menu。滑动效果，明河也曾经完成过，有兴趣的朋友可以猛击《divSlider — jquery滑动门插件（明河作品）》，必须承认Picture Menu的功能比明河写的divSlider来的强，也更加好用。

这里明河以最复杂的demo5为例讲解下其API。

1.建立幻灯片html结构

<div class="MainMenu5">
<div>
<img src="img/menu-1.png" />
<img src="img/text-1.png" />
<ul class="submenu light">
<li><a href="#">Submenu 1.1a>li>
<li><a href="#">Submenu 1.2a>li>
<li><a href="#">Submenu 1.3a>li>
<li><a href="#">Submenu 1.4a>li>
<li><a href="#">Submenu 1.5a>li>
<li><a href="#">Submenu 1.6a>li>
ul>
div>
......
div>

2.初始化pictureMenu

$(".MainMenu5").pictureMenu({
menuHeight: 200,
animateTime: 600,
menuInactiveHide: 0.2,
menuWidthHover: 75,
menuAutoOpen: 3,
leaveActiveOpen: true,
leaveActiveOpenCookie: true
});

3.API说明

参数	默认值	类型	描述
animateTime	350	Number	动画时间（动画速度）
menuHeight	150	Number	图片列表容器高度
menuWidth	75	Number	单个图片默认显示宽度（不是指容器宽度），当为空时自适应，需要设置useMenuWidth为true
useMenuWidth	true	Boolean	允许自定义单个图片显示宽度
menuWidthHover	40	Number	非激活图片的宽度
menuActiveWidth	500	Number	激活图片的宽度，需要设置useMenuActiveWidth为true时才有效
useMenuActiveWidth	false	Boolean	是否允许自定义激活图片显示宽度
menuInactiveHide	1	Number	激活图片的透明度
menuBorder	2	Number	二个图片之间的间隔
menuAutoOpen	0	Number	默认激活第几个图片，必须设置leaveActiveOpen为true
leaveActiveOpen	false	Boolean	是否6允许设置默认激活
leaveActiveOpenCookie	false	Boolean	cookie记录最后激活图片

前端快讯：jQuery 1.5 Beta降临！正式版不远矣

明河共影 — Tue, 18 Jan 2011 03:16:37 +0000

1月14日是jQuery的诞生日，jquery出道5年，以其易读、近人类逻辑的编程风格迅速成为javascript框架的霸主，必须向jquery的作者John Resig致敬，感谢他，创造了如此优秀的javascript框架。从1.4.4到1.5，从版本的跳跃就可以看出这次的更新内容非常有料！接下来明河为你一一介绍。
点此下载
1.5的CDN地址：http://code.jquery.com/jquery-1.5b1.js。（非压缩版）

jQuery 1.5 Beta的更新内容

1.5的最大更新：支持子类，jquery的继承终于来了！

官方的更新日记，将ajax模块重写排在第一位，明河倒是觉得支持继承，这才是jQuery 1.5最大的更新！这个功能明河期盼了很久，算是千呼万唤始出来吧。jquery之所以不适合大型复杂的web开发的一个原因就是继承机制的缺失，你写3-4个jquery插件，就会发现，代码重复率很高（插件与插件间很难继承），代码组织上有点力不从心的感觉，到现在明河甚至很少写jquery代码了。jquery的这个更新非常及时，赞一个。
更详细的使用方法，明河会在日后的教程中放出。其实现在我也不知道该如何调用…..O(∩_∩)O哈！

1.5的最人性化更新：ajax模块变了！

1.需要留意jQuery.ajax()这个函数变了！（可以放心的是依旧兼容旧的调用方式），旧的ajax请求url是写在参数{}内的，比如jQuery.ajax({url:”36ria.com”})，现在改了，jQuery.ajax(’36ria.com’,{success:function(){}});，这是接口的明显变化，其实内部逻辑实现变化也是很大的，详见1.5源代码（留意jXHR这个类）。
2.每个请求类型都支持设置超时时间和中止，还有个变化是在简化的jQuery.ajax()的API中，比如jQuery.getJson()，回调函数不必写在()参数内，你可以使用链式调用的方式在后面追加回调函数，比如jQuery.getJson().success(function(){})，（jquery有个很不好的地方，回调函数太多了，容易造成阅读困难，可以看出jquery小组在试图改变这一问题。）
3.以数组的方式来传递ajax的成功、失败、完成等回调函数，关于这一点，信息量太少，明河无法臆断其具体使用过程，等如后测试后奉上相关内容。

明河结语

关于jQuery 1.5 Beta的简单介绍到此结束，jQuery 1.5 Beta还有其他方面的更新，由于是比较细节的内容，明河就不再说明，有兴趣的朋友，请看官方的更新日记。日后会有相关教程放出，期待1.5正式版！（这个版本只建议用于学习）

wijmo—强大的jquery UI组件包

明河共影 — Wed, 08 Dec 2010 11:18:30 +0000

wijmo是由第三方开发的jquery UI包，比jquery官方的UI组件更为丰富，共有30个UI组件,除了涵盖jquery官方的UI大部分组件之外，图表组件、表单美化组件、表格grid组件都是很有看点的。特别指出的是wijmo在chrome浏览器下，样式存在bug，有兴趣的朋友可以试下。

wijmo的首页：http://wijmo.com/

wijmo的demo：http://wijmo.com/demos/

wijmo的API文档：http://wijmo.com/wiki/index.php/Main_Page

来几张wijmo的帅气截图：

wijmo的组件调用风格，基本上就是jquery插件的调用风格，使用过jquery插件的朋友就很容易上手。在API方面wijmo还是有待提高的，强大性上不如jquery的官方UI（jquery的官方UI支持模板的切换，这点很好很强大），还有很大进步的空间，但wijmo的图表组件式值得肯定的，是个好东西，如果你有图表方面的需求，又找不到合适的jquery图表插件，不妨试下wijmo的Charts。

wijmo还处于测试阶段，建议学习，实际应用还是等等吧。

日后有机会详解下wijmo的图表组件。

2010年十佳jquery插件

明河共影 — Mon, 06 Dec 2010 14:02:58 +0000

临近新年，WDL的Henry Jones评选出了2010年十大最佳jquery插件，来看看都是哪些好的应用。

1.Nivo Slider

推荐指数：
现在jquery的幻灯片插件太多了，Nivo Slider，明河倒不觉得非常突出，有兴趣的朋友可以看下《推荐5个jquery/flash幻灯片》、《五个jquery图片画廊插件》。

2.Quicksand

推荐指数：
Quicksand入选十佳jquery插件是无可争议的，很酷的动画方式，适合元素的排序，重新渲染的情况。

3.Spritely

推荐指数：
Spritely入选十佳jquery插件实至名归，利用背景图片的错位移动，产生类似flash式的运动效果。话说那二只眼睛的乌鸦，相当怪异…..

4.Lettering.js

推荐指数：
用于产生华丽排版和字体的东东的…..实际上明河还真不清楚这插件有何实际意义…..

5.Colortip

推荐指数：
关于Colortip，明河就有很多话要说了，因为明河曾拆解过Colortip，并写了个类似的，更为强大的yitip，有兴趣的朋友可以猛击《yitip—jquery工具提示插件（明河作品）》，哈有朋友反映bug，yitip明河只有明年再重构了。
明河还拿Colortip讲解过如何写一个jquery插件，请看http://www.36ria.com/2818。

6.Masonry

推荐指数：
可以理解为栅格系统，产生你所需要的布局方式。强悍的是可以产生一些诡异地凌乱的布局……

7.gvChart

推荐指数：
说到js图表，明河不得不强力推荐下《Highcharts – 超强javascript图表库》。

8.Animated table sort

这个插件，明河要推荐下，是个好插件，用于表格排序时的动画。

9.jQuery Image Scale Carousel

推荐指数：
图片滑动（旋转木马）插件，相当常见了，竞争非常激烈的一个插件种类，这款插件胜在细节。有兴趣的朋友还可以看《五个jquery图片滚动插件》，还可以看《再推荐5个jquery图片滚动插件》…..

10.YoxView

推荐指数：
颇为实用的灯箱效果插件，关于灯箱效果插件，那也是泛滥，有兴趣的朋友可以看《17个受欢迎的jquery灯箱效果插件》。

17个受欢迎的jquery灯箱效果插件

明河共影 — Mon, 29 Nov 2010 11:07:23 +0000

灯箱效果在图片展示上应用非常广，算是弹出层的变种，与弹出层不同的地方是灯箱插件一般都支持图片画廊模式。

1、Fancybox

2、Colorbox

3、jQuery Lightbox Plugin

4、prettyPhoto

5、Litebox

6、Slimbox

7、LightView

8、Shadowbox

9、LightWindows

10、Multibox

11、PiroBox

12、Super Box

13、CeeBox

14、NyroModal

15、imgBox

16、ClearBox

17、jQuery Tools

10个受欢迎的ajax弹出层/对话框组件

明河共影 — Tue, 23 Nov 2010 14:30:15 +0000

弹出层/对话框效果在web应用非常广，明河今天在浏览1stwebdesigner时，发现了这篇好文章，太精彩了，明河厚着面皮，将其翻译过来。以下组件明河没特别说明，都是基于jquery。

1、Facebox

源自facebook的弹出层效果，半透明的边框是不是很眼熟呢，是的，新浪微博经常看到的弹出层，就是类似这样的效果。

2、Thickbox

Thickbox是一款非常经典的弹出层插件，明河见到很多小网站都在用，也有相应的wordpress插件。明河个人觉得，Thickbox易用性和兼容性还是比较一般的。

3、jQuery Dialog

源自jquery UI的对话框组件，还是非常靠谱的，很好很强大，只是引入的文件有点多，调用有点繁琐。

4、Prototype Window

非常强大！应该说是这里所有的弹出层插件中最强大的！文档也是最全的，当然调用会复杂些，明河要提的一点是这款组件是基于prototype框架。

5、MochaUI

基于Mootools，这款弹出层的样式是最漂亮的！Mootools明河不懂，不做评价。

6、Boxy

Boxy明河用过，IE6有bug！不推荐使用。

7、ModalBox

8、SimpleModal

这是明河推荐使用的弹出层，非常实用，兼容性和易用性尚可。

9、 jqModal

相当简单的弹出层插件，不推荐使用。

10、 Greybox

原文：http://www.1stwebdesigner.com/resources/ajax-lightbox-modal-dialog-solutions/

area2select—jquery地区联动插件（咖啡兔作品）

明河共影 — Sat, 30 Oct 2010 10:55:07 +0000

这是咖啡兔原创作品，明河第一时间测试了下，感觉还不赖，本着支持国人原创的原则，今天推荐给各位。明河曾经有写过jquery地区联动插件，不过后台是php版的，不少朋友问明河有没有其他服务器端语言的，很遗憾明河不会java和.net，所以没有。咖啡兔做的这个插件服务端语言使用的是java。

插件介绍首页：http://www.wsria.cn/archives/1237

咖啡兔的博客：http://www.wsria.cn/

demo页面：http://demo.wsria.cn:9900/wsria-demo，进入页面后在左侧的“地区信息”栏目中

下载页面：http://code.google.com/p/wsria/downloads/list

jquery V1.4.3试用报告

明河共影 — Sat, 23 Oct 2010 09:13:19 +0000

jquery V1.4.3已经正式发布！相对于1.4.2更新内容并不多，但修正了一些bug，性能上有一些提高，看下图：

上图是1.4.3和1.4.2的css()方法效率的比较。

1.4.3重构了css()方法，新的css()将支持旋转设置

jquery V1.4.3 在Google’s CDN上的路径为：http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

下载的话，可以猛击此处进入jquery官网下载。
（文章中的动画demo由于与主题的jquery冲突，无法运行，也导致RIA之家导航出不来，所以二个动画demo请看示例页。）

点此下载

一、jquery V1.4.3新方法测试

1、jQuery.isWindow

这个方法用来判断对象是否是一个window。

来看个例子:

$('#demo-1').click(function(){
    alert($.isWindow(window));
})

是不是感觉这个方法很多此一举？在web浏览器，通常我们不会去特意测试window对象。

2、jQuery.type()

相对于isWindow，type方法非常好用，jQuery.type()用于专门判断数据类型，判断的正确性高于直接使用typeof，typeof无法直接区分object和array，你甚至可以用jQuery.type()来判断是不是正则对象。

jQuery.type(true) === "boolean"
jQuery.type(3) === "number"
jQuery.type("test") === "string"
jQuery.type(function(){}) === "function"
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"
jQuery.type(/test/) === "regexp")

3、jQuery.fx.interval

jQuery.fx.interval是一个属性，不是方法，用于设置动画一帧的秒数，默认为11毫秒，设置得越低，动画就越顺滑，当然cpu资源就消耗越大。

jQuery.fx.interval = 80;

$("#demo-2").click(function(){
  $("#demo-2-div").toggle( 3000 );
});

可以明显感觉到动画变的非常不流畅，这是因为将jQuery.fx.interval设置过高的缘故。

4、event.namespace

这是event新的一个属性，用于返回事件的命名空间（假如该事件有命名空间）

$("#test-p").bind("test.ria", function(event) {
  alert( event.namespace );
});
$("#demo-3").click(function(event) {
  $("#test-p").trigger("test.ria");
});

二、jquery V1.4.3的方法改进

1、事件方法的改进

当bind/unbind第二个参数为逻辑类型时，用于直接判断是否阻止浏览器事件默认动作和冒泡。

猛击这里

 	$("#demo-4").bind('click',false)

这个改进还是非常实用的，可以看到链接不再触发跳转。

事件的第二个改进在于事件方法（比如click）的第一个参数可以为一个对象，click的第二个参数监听函数可以取到该对象的值。

$("#demo-5").click({'36ria':'明河共影'},function(evt){
    alert(evt.data['36ria']);
})

2、所有的动画方法支持缓动

$("#demo-6").click(function(){
  $("#demo-6-div").toggle('slow','easeOutBounce');
});

使用easing（缓动）请先引入easing插件。

三、明河结语

当然jquery1.4.3的改进不只明河提到的内容，更为详细的请猛击这里。

30个富有想象力的flash预加载动画欣赏

明河共影 — Mon, 30 Aug 2010 07:01:08 +0000

1、Happy Greenville

非常可爱的预加载画面，铅笔画式的进度条，漂浮的人物，力荐，是一个精品flash站点效果。

2、Ad Eight

看着这动画，明河就想起章鱼帝保罗(ˇˍˇ） …….

3、Antpaw

有点华丽。

4、BTOB

声音的应用是个亮点。

5、Bunker

很有旧式电影的感觉。

6、ZUNE

随着加载进度不断清晰的手机轮廓，配合纯黑的背景，是否想一睹其芳容的冲动？

7、Elipse Agency

立体长方形的加载进度条，非常不错的背景音乐。

8、Dave Werner’s Portfolio

华丽的墙壁…….

9、Food of the Food

与上一个站点的效果类似。

10、XIXI NO BANHO

跟随鼠标移动的进度，随进度绘制的曲线。

11、AB “Pieno žvaigždės”

杯子里不断加满的水。

12、DeVotchKa

留意手指的变化。

13、Starbucks Coffee

14、Sir-Patroclo

相当可爱的人物。

15、Sourcebits TangledDecals

16、Mellow Mushroom Pizza Bakers

17、Maria Filó

纸团……

18、Por Liniers

有点夸张的吸管…..

19、Red Bull Soapbox Racer

留意卷尺的变化

20、Vicente Díaz Peñas

21、Galaicofolia

22、David Ohana

23、Corny

24、Coca-Cola Happiness Factory

25、ZEEBEE VISUAL COMMUNICATIONS

26、Dissident-wear

27、Critter Creative

28、CONCEPT 007 / 005

29、Mynthon Kaira Ice Fishing Game

30、Sazacat Portfolio

原文：http://www.1stwebdesigner.com/inspiration/creative-flash-preloaders/

ld—jquery多级联动插件（明河作品）

明河共影 — Sat, 21 Aug 2010 13:35:32 +0000

jquery多级联动插件明河曾经写过二个版本，期间得到各路朋友的不少反馈（特别是网名为Fox的朋友，提出的建议非常的详细而且很有建设性），不得否认seriesComboBoxs（jquery多级联动插件）存在诸多缺陷，比如：无法设置选择框的默认值。

于是明河决定重构query多级联动插件，由于相对于seriesComboBoxs变动相当大，所以明河将这个插件重新命名为ld，旧的seriesComboBoxs明河将不再做维护。

V1.2 更新：

修正IE6下报“未指明的错误”
修正IE6下无法选择默认值的问题
修正取xml数据时出现“头部已经发送”的问题

ld V1.0相对于seriesComboBoxsV0.2的改进：

可以设置选择框的默认值
不再需要对联动的所有选择框添加id（需要有相同的样式名）
新增几个新的使用方法
简化了API
使用新的事件机制

改动还是非常大的，建议使用ldV1.0。

点此下载

使用教程

1、导入地区数据库（mysql）

数据库文件为teashop_region.sql，此数据库来源于ecshop，Fox曾告知明河此数据库并不全，很感谢Fox提供了一个新的数据库，下个版本将使用Fox提供的数据库。

2、连接数据库

请打开get_region.php，找到：

$hostname = 'localhost';// 数据库服务器
$username = 'root'; // 数据库用户名
$password = '123'; // 数据库密码
$dbname = 'ld'; // 数据库名

按照本地服务器的情况，自行修改。

3、引入jquery库、jquery.ld.js和示例css

<link href="style/css/base.css" rel="stylesheet" type="text/css" />
<link href="style/css/demo.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.4.2.min.js">script>
<script src="js/jquery.ld.js">script>

4、建立4个打算联动的选择框

<table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
<tr>
<td>国家td>
<td><select class="ld-select-1" name="country">
<option value="">请选择你的国家option>
select>
td>
<td>省份td>
<td><select class="ld-select-1" name="province">
<option value="">请选择你的省份option>
select>
td>
<td>城市td>
<td><select class="ld-select-1" name="city">
<option value="">请选择你的城市option>
select>
td>
<td>区县td>
<td><select class="ld-select-1" name="county">
<option value="">请选择你的区县option>
select>
td>
tr>
table>

联动的选择框，必须要有相同的样式名，比如这里的“ld-select-1”。

5、初始化插件

$(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
style : {"width" : 120}
});

ajaxOptions用于设置ajax获取数据的参数
style设置选择框的样式
留意这里的调用与明河之前写的seriesComboBoxs有明显差异。
seriesComboBoxs初始化：

$.seriesComboBoxs({selects : ["#country","#province","#city","#county"],
ajaxOptions : {"url" : "get_region.php"} });

新的ld插件已经不存在selects参数。

6、ld参数设置

参数	默认值	类型	描述
ajaxOptions	{ url : null, type : ‘get’, data : {}, dataType : ‘json’, success : function(){}, beforeSend : function(){} }	Object	ajax获取数据时的配置默认的数据源格式为json
defaultParentId	0	Number	默认父级id，设置为0，即获取parent_id为0的数据（示例中返回“中国”）
defaultLoadSelectIndex	0	Number	默认读取数据的选择框，尽量使用默认的，这个参数用于设置读取那个选择框的数据。
texts	[]	Array	默认选择框中的选中项，比如设置为：texts:['福建','福州','长乐'] 那么三个选择框会分别加载数据，并且选中与texts中字符串相同的项
style	null	Object	选择框的样式
field	{ region_id : "region_id", region_name : "region_name", parent_id : "parent_id" }	Object	前台处理后台返回的数据时所使用的字段名，一般采用默认的即可。

7、方法说明

使用ld的方法，先要获取ld的API，比如示例4：

var $ld4 = $(".ld-select-4");
$ld4.ld({ajaxOptions : {"url" : "get_region.php"},
defaultParentId : 1,
style : {"width" : 120}
})
var ld4_api = $ld4.ld("api");

方法1：texts

描述：用于获取联动选择框的字符串数据。
返回：数组，比如“['福建','泉州','丰泽']”

var text = ld4_api.texts().join('');

方法2：selected

描述：用于设置选择框的选中值
参数：

t：数组，要选中的选择框的字符串
completeCallBack：回调函数，当选择框数据全部加载完毕后触发

ld4_api.selected(['福建','泉州','丰泽'],function(){
var text = ld4_api.texts().join('');
alert(text);
});

方法3：size

描述：获取联动选择框的数量

ld4_api.size()

方法4：css

描述：设置选择框的样式

ld4_api.css({"width" : 120})

作者结语

欢迎各路朋友反馈bug和建议，谢谢！

8个css3代码产生工具

明河共影 — Sun, 15 Aug 2010 12:43:04 +0000

今天明河推荐几个实用的css3代码产生工具，不用css3一样可以制作css3效果。

1、CSS3 Menu Generator

这是个简单的软件，用于产生各种css3菜单，内置了非常丰富的css3菜单效果。

2、CSS3 Rounded Corner Generator

用于产生css3的圆角效果，值得一提的是该站点还提供其他的css工具，比如css3示例、css验证等。

3、CSS3 Maker

明河极力推荐，非常全面的css3在线工具，可以产生圆角、文字阴影、css3动画等。

4、Border Image

css3边框图片产生器。

5、CSS3 Gradient Generator

用于在线产生css3渐变。

6、Font Squirrel @Font-Face Kit Generator

字体嵌入工具。

7、CSS-Tricks Button Maker

css3按钮产生器

8、CSS3 Click Chart by Impressive Webs

提供常用的css3效果的demo和源代码。

jquery的ajax全局事件详解—明河谈jquery

明河共影 — Mon, 09 Aug 2010 14:31:39 +0000

jquery在ajax方面是非常强大和方便的，以下是jquery进行ajax请求时方法模板：

$.ajax({
type: "get",
url: "",
data : {},
beforeSend : function(){
},
success : function(data){
},
complete : function(){
}
});

关于$.ajax()方法的使用，不是明河写这篇文章的目的，今天明河主要讲解当进行ajax请求时整个完整的事件流程。

jquery的ajax方法的全部全局事件：

ajaxStart：ajax请求开始前
ajaxSend：ajax请求时
ajaxSuccess：ajax获取数据后
ajaxComplete：ajax请求完成时
ajaxError：ajax请求发生错误后
ajaxStop：ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件，只是通常不绑定全局事件，但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//.....
}
function onComplete(event, xhr, settings) {
//.....
}
function onSuccess(event, xhr, settings) {
//.....
}

ajax方法完整事件流

为了更直观的说明，明河使用Axure画了二个流程图，画的不好还请见谅，O(∩_∩)O

ajax方法完整事件流演示

为了让朋友更容易理解整个事件流，明河做了以下demo。

点此下载

使用jquery制作背景变化菜单

明河共影 — Tue, 03 Aug 2010 06:45:58 +0000

jquery动画函数animate是不支持背景移动动画的，即无法对backgroundPosition进行处理，需要使用一个插件，这个插件名为jquery.backgroundPosition，接下来将使用这个插件，制作一个背景变化的菜单。

点此下载

制作过程

1、创建如下html菜单结构

<ul>
<li><a href="http://www.36ria.com/">首页a>li>
<li><a href="http://www.36ria.com/">关于作者a>li>
<li><a href="http://www.36ria.com/">联系作者a>li>
ul>

2、加上css样式

ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;font-size:14px;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url(../images/bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}

示例中有5个demo，共用了四张背景图片：

分别对应相应的动画demo样式：

#a a {background:url(../images/bg.jpg) repeat -20px 35px;}
#b a {background:url(../images/bg2.jpg) repeat 0 0;}
#c a {background:url(../images/bg3.jpg) repeat 0 0;}
#d a {background:url(../images/bg4.jpg) repeat 0 0;}

3、javascript脚本

引入jquery库和jquery.backgroundPosition：

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js">script>

$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});

引入jquery.backgroundPosition后animate()开始支持backgroundPosition背景位移动画。后二个颜色渐变的例子，也是通过渐变背景图片上下移动产生的。

原文：http://snook.ca/archives/javascript/jquery-bg-image-animations/

基础模板的缺陷—jquery插件开发进阶教程（2）

明河共影 — Mon, 02 Aug 2010 01:56:41 +0000

这个系列的第一篇教程明河讲述了：jquery插件开发规范，今天这篇教程明河将讲述jquery插件基础模板的缺陷。

在jquery插件实战教程，明河曾以Colortip文字提示插件，讲解了jquery插件的基础模板：

(function($){
$.fn.插件名 = function(settings){
var defaultSettings = {
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},defaultSettings,settings);
return this.each(function(){
});
}
})(jQuery)

（明河再次提醒，这个基础模板很重要，尽量看懂用懂它。）
在教程的最后，明河同时也指出了Colortip这个插件的缺陷，Colortip的缺陷，归根到底还是jquery插件基础模板的缺陷引起的。

jquery插件基础模板的缺陷

1、难以实现类与类之间的继承

比如明河写了yitip，原理与colortip一样，但是无法通过扩展colortip的方式，只能重新写个完整插件。

2、无法开放API供外部调用

这是jquery插件基础模板最大的缺陷，以colortip例子，在初始化colortip后，你无法改变提示框出现的位置、内容、动画效果、延迟时间等，colortip没有相应的API，但是明河写的yitip，却可以实现相应的控制。
colortip的演示：http://www.36ria.com/demo/colortips/colortips.html
yitip的演示：http://www.36ria.com/demo/yitip/
可以看到yitip提供了相应的API供使用者操作，那么yitip又是如何实现API的开放呢？接下来的教程明河会展开叙述。

3、无法提供自定义事件支持

比如你想要在提示框显示前弹出一个对话框，在隐藏提示框后删除提示框等。

4、无法模拟出接口。

你无法很直观的知道你所使用的方法插件支不支持，插件到底有几个方法，传递给方法的参数个数和数据类型对不对等。

5、缺少debug能力。

插件有可能会调用失败，这时候你希望知道插件在调用的过程中所发生的所有的事，你需要打印一系列的流程到调用面板中，jquery插件基础模板无法提供这一功能。

结语

正是jquery插件基础模板存在如此多的缺陷，所以明河才觉得有必要讲述一个jquery插件的高级模板，用于解决这些缺陷。
下一篇教程：jquery插件的高级模板

cornerV2.0—jquery强大的圆角插件

明河共影 — Sun, 01 Aug 2010 13:58:13 +0000

jquery.corner是一款强大的圆角插件（所产生的不止只是圆角效果），兼容包括IE6、IE7、IE8、firefox、Opera 、Safari、Chrome等主流浏览器。

原理说明：

产生圆角的技术很多，jquery.corner是利用产生十几个带有边框的层（宽度不同），来模拟四个不同的边角的效果，所以可以保证所有浏览器的兼容性。（具体可以用firebug查看其层的分布和样式）

初始化插件：

$(".demo").corner();

点此下载

明河关于jquery的一些解答—明河谈jquery

明河共影 — Sat, 31 Jul 2010 07:08:53 +0000

新版的RIA之家已经上线2个多月了，这二个月来，不少朋友向明河询问jquery的问题。今天突然萌生将这些问题整理出来供遇到类似困惑的朋友做参考的想法，于是就写了这篇文章，答案只代表明河个人观点，难免有错误，仅供参考。

问：学javascript好还是jquery好？

明河答：这是个伪命题，随着jquery的大行其道，很多新手以为jquery是一种语言，其实jquery只是一个javascript的框架（javascript的框架很多，比如ext、dojo、yui等），本质还是javascript，想学好用好jquery绕不开javascript。

问：先学javascript，还是先学jquery？

明河答：这是类似先有鸡还是先有蛋的问题，很多朋友是先接触jquery然后才回过头来学javascript。我个人是推荐先学javascript，后学jquery，因为很多朋友见识到jquery的便利后，我觉得原生javascript异常笨拙，影响到学js的热情，但不学js，会很大限制你jquery的水平。

问：从开始学jquery，先学什么？从哪方面入手？

明河答：这个问题不少人问过明河，我回答的第一句话都一样：请买本jquery的书，从头看到练到尾。我知道很多朋友不喜欢看书，认为google（明河一向忽略百度，理由你懂的……）可以解决一切，明河并不否认，但依旧推荐你耐下心来看完一本书，也许你会有不一样的体会。

问：能推荐几本jquery方面的好书吗？

明河答：明河一向觉得一本好书，就是一个好的老师，jquery方面的书很多，明河推荐以下几本：

1）入门书

jQuery实战
锋利的jQuery

二选一，明河更推荐《jQuery实战》

2）进阶书

jQuery Cookbook
jQuery1.3 + php

后二本只有英文版，你可以在网上载的到，尤其是《jQuery Cookbook》，明河严重推荐。

3）javascript好书

javascript高级编程（第二版）
javascript权威指南

二本二选一，明河推荐javascript高级编程。

问：学jquery好还是学ext好？

明河答：jquery拥有最为广泛的群众基础，当然ext用的人也不少，jquery和ext正好明河都学过，jquery与ext是二种风格的框架，没有简单的谁更好的问题，jquery的优势在于轻量级、数以千计的插件，而ext的优势在于完整和强大的UI，应用于企业级。

二者是可以共存的，所以可以根据你实际的使用环境而变化。明河是推荐二者都学，可以先学jquery后学ext，javascript基础好的（熟悉javascript面向对象编程）更要学ext。

问：发现自己的jquery水平遇到瓶颈了，没法提高，如何办？

明河答：这是个好现象，说明你的前端编程已经到了要质变的临界点，这时候请思考一下几个问题：

你写的代码效率如何？有没有优化的空间和可能？
你能够完成大部分的web前端UI功能吗？
你能够快速的完成前端开发吗？
你能够深入的把握可用性、web标准和用户体验吗？
………

当你思考这些问题的时候，我想你会和明河一样发现，前端还有无穷的潜力等着你去挖掘。

问：如何突破jquery水平的瓶颈？

明河答：其实没什么太多的技巧，就是多看多练。多看，指的是多看别人写的jquery插件源代码，还有多看优秀的前端博客，不管是国内的还是国外的；多练，指的是试着自己写jquery插件，要多写代码。

问：如何写一个jquery插件？

明河答：明河会发布一系列的教程，有兴趣的朋友可以多留意下。别把jquery插件看的太玄，别因为自己是新手就不敢去写，只要去尝试了，你会慢慢掌握其中的技巧。

先写到这里，关于jquery，如果你有什么疑问，可以给明河留言，愿看到这篇文章的朋友，jquery水平能够快速进步！

实用jquery代码片段集合（下）

明河共影 — Thu, 29 Jul 2010 01:51:40 +0000

如何隐藏除了特定选择器下的全部对象

$('#target div:not(#exclude)').hide();
//或者
$('#target').children().filter(':not(#exclude)').hide();

filter()起到过滤的作用。

寻找带有指定字符串的元素

var foundin = $('*:contains("明河")');

获取垂直滚动距离

alert($(document).scrollTop());

scrollTop()非常实用的一个方法。

向表格追加一行数据

$('#myTable tr:last').after('...');

超过一个属性时的过滤

var elements = $('#someid input[type=sometype][value=somevalue]').get();

让cookies在X分钟后过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

选择从第一个到第X个的元素

//从第一个到第10个
$('a').slice(0,10);
//或者
$('a:lt(10)');

获取客户端的IP

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
alert( "你的IP：" + data.ip);
});

这是利用了jsonip.appspot.com提供的取IP服务。

解析XML数据源

xml version="1.0" ?>
<result>
<item>
<id>1id>
<title>title1title>
<description>desc1description>
item>
<item>
<id>2id>
<title>title2title>
<description>desc2description>
item>
result>

$.get('file.xml',{},function(data){
$('item',data).each(function(){
var $this       = $(this);
var id             = $this.find('id').text();
var title         = $this.find('title').text();
var description = $this.find('description').text();
//do something ...
});
});

获取在id中的数字

<div id="sites">
<a id="site_1" href="http://siteA.com">siteAa>
<a id="site_2" href="http://siteB.com">siteBa>
<a id="site_3" href="http://siteB.com">siteCa>
...
div>

$("#sites a").click(function(){
var $this     = $(this);
var nmb     = $this.attr('id').match(/site_(\d+)/)[1];
...
});

将类似12343778 转成 12.343.778的形式

var delimiter = '.';
$('#result').html()
.toString()
.replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter)
.replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

这个正则值得收藏，颇为经典。

向firebug的控制面板发送消息

jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
$('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

获取图片的宽高

var img = $('#imageid');
var theImage = new Image();
theImage.src = img.attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);