Tutorials:Getting Started with jQuery---4

最新推荐文章于 2026-01-07 00:05:42 发布

翻译最新推荐文章于 2026-01-07 00:05:42 发布 · 770 阅读

文章标签：

#tutorials #jquery #function #plugins #radiobutton #javascript

JQuery 专栏收录该内容

4 篇文章

订阅专栏

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;
 });

你可以像下面这样运行插件：