给我排序:使用tablesorter插件
tablesorter插件允许在客户端对表格进行排序。你包含进jQuery和这个插件,并且告诉这个插件你想要排序哪个表格。
为了试验这个例子,你需要下载tablesorter插件并且把下边这行代码加入到starterkit.html中(在jquery引用的下边):
<script src="jquery.tablesorter.js"></script>
引入这个插件后,你可以这样调用它:
$(document).ready(function(){
$("#large").tableSorter();
})
点击察看农民的演示
试着点击一下表格的头,你会看到第一次点击的时候是按照升序排序,第二次点击就会按照降序来排序了。
表格同样可以使一些行高亮显示,我们可以传递下边这些选项:
$(document).ready(function() {
$("#large").tableSorter({
// Class names for striping supplied as a array.
stripingRowClass: ['odd','even'],
// Stripe rows on tableSorter init
stripeRowsOnStartUp: true
});
});
点击察看农民的演示
这里有更多关于可以使用的选项的例子和文档在 tablesorter homepage
大多数的插件可以可以这样使用:引用这个插件文件并在一些元素上调用插件方法,传递一些选项设置来客户化这个插件。
一个时时更新的可用插件列表可以在 jQuery Plugin site 上找到。
当你更经常地使用jQuery的时候,你可能会发觉他很好地将你自己的代码打包好了,就像一个插件一样,或者可以为你自己或你的公司重用,或者可以用来分享。接下来的部分会给出一些关于如何构建一个插件的提示。
跟这部分内容有关的有趣链接:
Plugins for jQuery
Tablesorter Plugin
编写你自己的插件
给jQuery编写插件是一件很容易的事情。如果你遵循以下的规则,其他人也可以很容易的使用你编写的插件。
插件命名
给你的插件起个名字吧,让我们称呼这个例子为“foobar”。建立一个文件,叫做“jquery.[yourpluginname].js”,例如jquery.foobar.js。
添加一个自己的方法
通过扩展jQuery对象建立一个或多个插件方法,例如:
jQuery.fn.foobar = function() {
// do something
};
那么上边的代码就可以通过下边的形式调用:
$(...).foobar();
默认设置
建立一个可以被用户修改的默认的设置,例如:
jQuery.fn.foobar = function(options) {
var settings = jQuery.extend({
value: 5, name: "pete", bar: 655
}, options);
};
你便可以调用这个插件不用选项而使用默认的设置:
$("...").foobar();
或者使用选项:
$("...").foobar({ value: 123, bar: 9 });
文档
如果你想发布你的插件,你应该提供一些例子和相关文档。这里有好多可以引用的插件
现在你已经具备了基本的编写插件的思想了,让我们使用这个思想并且编写我们自己的插件吧。
checkbox插件
许多人都想通过jQuery操作表单,就是选择或者不选择单选按钮或多选按钮。他们通常会这样编码:
$("input[@type='checkbox']").each(function() {
this.checked = true;
this.checked = false; // or, to uncheck
this.checked = !this.checked; // or, to toggle
});
Whenever you have an each in your code,你可能会非常直接的把它重写而成为一个插件。
jQuery.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};
这个插件可以这样被使用
$("input[@type='checkbox']").check();
现在你就可以为uncheck()和toggleCheck()也编写插件了。但是我们扩展一下我们的插件来接收一些选项。
jQuery.fn.check = function(mode) {
// if mode is undefined, use 'on' as default
var mode = mode || 'on';
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};
通过为这个选项提供一个默认值,用户可以忽略这个选项或者传递“on”,“off”和“toggle”其中的一个值,例如:
$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');
选项设置
因为不止一个的喧响设置,这个方法变得有些复杂了,因为如果用户想要忽略第一个参数而只使用第二个参数时,他必须传递null值。
上一节中的tablesorter的使用示范了一个使用object liseral来解决这个问题的实例。用户可以忽略所有的参数或者通过一个键(key)/值(value)对来为每一个设置传递一个对象以此来重写达到他们想要的效果。
做一个练习,你可以试着重写在第四部分的投票代码(Voting code)来作为一个插件。插件的框架应该类似于下边这个样子:
jQuery.fn.rateMe = function(options) {
// instead of selecting a static container with
// $("#rating"), we now use the jQuery context
var container = this;
var settings = jQuery.extend({
url: "rate.php"
// put more defaults here
}, options);
// ... rest of the code ...
// if possible, return "this" to not break the chain
return this;
});
允许你这样的使用它:
$(...).rateMe({ url: "test.php" });
接下来的步骤
如果你打算开发更多的JavaScript,你应该考虑一下火狐扩展(Firefox extension)叫做 FireBug 。他为每天的JavaScript开发提供了一个解决方案(很好的替代alerts),一个调试器和一些有用的素材。
如果你有解决不了的问题,你想同别人分享的想法或者仅仅想表达一下你的关于jQuery的想法,你可以自由地发送到 jQuery mailing list 。
关于这个想到的人和相关内容可以发送到我的blog或直接同我联系。
还剩下什么……对于这个强大的类库,感谢John Resig!感谢jQuery讨论组为John提供了足够的咖啡和每一样东西!
该部分内容结束,大工程啊,终于完了,喝口水先。
单词学习:
notorious adj.声名狼籍的
manipulates vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
sense n.官能, 感觉, 判断力, 见识, ...感, 意义, 理性
sophisticated adj.诡辩的, 久经世故的
alias n.别名, 化名
construct vt.建造, 构造, 创立
bind v.绑, 镶边, 装订, 凝固, 约束
anchor n.锚
obvious adj.明显的, 显而易见的
separation n.分离, 分开
combination n.结合, 联合, 合并, 化合, 化合物
constructor [计] 构造器
combined adj.组合的, 结合的
syntax n.[语]语法, 有秩序的排列, 句子构造, 句法
equivalent n.等价物, 相等物
convenient adj.便利的, 方便的
descendants 后代
iterate vt.反复说, 重申, 重述
processing 处理
append vt.附加, 添加, 悬挂[计] 设置数据文件的搜索路径
iterate vt.反复说, 重申, 重述
identical adj.同一的, 同样的
reduces vt.减少, 缩小, 简化, 还原
contrary adj.相反的, 逆的, <口语>执拗
inconsistently adv.不一致地
siblings n.兄弟, 姐妹, 同胞, 同属
ancestor n.祖先, 祖宗
maintain vt.维持, 维修, 继续, 供养, 主张
notation n.符号
shortcut n.捷径
applied to vt.适于,应用于
combination n.结合, 联合, 合并, 化合, 化合物
fancier n.空想家, 培育动物(或植物)的行家, 爱好者
hints n.暗示, 提示, 线索
integrate vt.使成整体, 使一体化, 求...的积分
manipulate vt.(熟练地)操作, 使用(机器等), 操纵(人或市价、市场), 利用, 应付, 假造
straightforward adj.正直的, 坦率的, 简单的, 易懂的, 直接了当的
omit vt.省略, 疏忽, 遗漏
demonstrates vt.示范, 证明, 论证
literal adj.文字的, 照字面上的, 无夸张的
skeleton n.(动物之)骨架, 骨骼, 基干, 纲要, 万能钥匙

