SORT ME: USING THE TABLESORTER PLUGIN
tablesorter插件可以在客户端完成对表格的排序。通过使用jQuery和插件,你可以告诉插件哪个表格需要排序。
为了完成这个例子,需要做下载download the tablesorter plugin ,然后把下面这一行加到starterkit.html里面:
<script src="jquery.tablesorter.js"></script>
包含了插件之后,你可以这样调用:
$(document).ready(function(){ $("#large").tablesorter(); });
当你点击表头的时候,你会发现第一次点击的时候按照升序排列,第二次点击则按照降序排列。
表格中一些行使用了高亮显示,可以通过一些参数来完成这个功能:
$(document).ready(function() { $("#large").tablesorter({ // striping looking widgets: ['zebra'] }); });
在tablesorter homepage上,有更多的例子和文档可以参照。
大部分插件的使用方法:包含插件,在一些元素上调用插件方法,可以传递一些可选的参数给插件。
下面是一个事实更新的插件列表on the jQuery Plugin site。
当你经常使用jQuery的时候,你会发现把你自己的代码包装成一个插件是件很有用的事情。你可以用在公司,也可以在开发社区共享它们。 下一部分会给你更多关于如何组织插件的建议。
可能感兴趣的链接:
PLUG ME: WRITING YOUR OWN PLUGINS
为jQuery写插件十分的容易。而且如果你按照规则办事的话,别人也会很容易的使用你的插件。
Plugin Naming
通过名字找到你的插件,我们把这个例子叫做"foobar"。创建js文件,例如命名为jquery.foobar.js。
Adding a Custom Method
通过扩展jQuery对象来创建一个或者多个方法,例如:
jQuery.fn.foobar = function() { // do something };
稍后你可以通过下面的代码来调用:
$(...).foobar();
Default Settings:
为用户创建默认的设置,例如:
jQuery.fn.foobar = function(options) { var settings = jQuery.extend({ value: 5, name: "pete", bar: 655 }, options); };
接下来你可以调用插件的默认设置:
$("...").foobar();
Or with some options:
$("...").foobar({ value: 123, bar: 9 });
Documentation
如果你要发布的你插件的话,你也可以提供一些例子和文档。在下面这个链接lots of plugins有许多可用的插件。
现在你已经有了编写插件的基本知识。让我们来用这些知识来编写自己的插件。
Checkbox Plugin
许多人都会使用jQuery包装关于点击radiobutton或者checkbox的插件。他们会这样写这段代码:
$(":checkbox").each(function() { this.checked = true; this.checked = false; // or, to uncheck this.checked = !this.checked; // or, to toggle });
无论你想要的是哪种代码,你就会向重新编写这个插件:
jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); };
然后这样使用这个插件:
$(":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",:
$(":checkbox").check(); $(":checkbox").check('on'); $(":checkbox").check('off'); $(":checkbox").check('toggle');
Optional Settings
如果要传递更多的参数,这样的操作就需要复杂一点的操作,因为只有保证第一个参数是非null的才能保证使用第二个参数。
在之前的tablesorter中,通过传递对象来解决这个问题。你既可以传递所有的参数,也可以传递带有key/value的对象来重写每个设置。
作为联系,你可以试着重写在第四部分的投票的代码。这个插件的结构如下:
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" });
NEXT STEPS
如果你想开发更多的JavaScript,你可以考虑使用FIrefox的FireBug。它提供了一个控制台,调试器一起许多其他有用的工具来开发日常的JavaScript。
如果你有无法解决的问题,或者有新的想法,可以发送到jQuery邮件列表jQuery mailing list。
对于这个向导如果有任何的疑问,请给我的博客留言blog或者直接与我联系。