ASPDotNet 八、创建和使用 jQuery 插件

八、创建和使用 jQuery 插件

本章教你如何创建和使用插件。本章讨论的配方如下:

创建和使用一个简单的插件
在插件中使用$别名
在 DOM 元素上调用方法
提供默认值
提供方法链接
向插件添加操作
使用表单验证插件
使用 NPM 下载插件

简介

jQuery 允许开发者通过创建插件来构建核心库的特性。插件基本上是核心库的扩展。它是一个 JavaScript 文件，包括在网页上的 jQuery 库。它通常提供一组可配置项，开发人员可以根据其应用的需求使用这些项进行定制。

编写了各种各样的有用插件，可供使用。它们涵盖了开发的许多方面，例如动画、图形、表单、UI 和响应性。为了在一个集中的位置维护所有的插件，一个插件库于 2013 年在http://plugins.jquery.com发布。然而，这个网站现在提供了对插件的只读访问，并且可以在NPM(Node Package Manager)上发布新版本。插件可以从 NPM 下载和使用。

在本章中，让我们开始创建自己的插件。我们还将下载并使用一个流行的 jQuery 插件来验证表单。

创建和使用一个简单的插件

在这个例子中，我们将编写一个简单的插件，让您熟悉创建和使用插件的过程。本例中使用的编程结构总结如下:

构造

类型

描述

| | --- | --- | --- | | .append() | jQuery 方法 | 这将在每个匹配元素的末尾插入内容 | | jQuery | jQuery 函数 | 这是指 jQuery 函数 | | jQuery("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素 |

准备

按照以下步骤创建一个简单的 jQuery 插件:

启动一个新的ASP.NET Web 应用项目在 Visual Studio 中使用空模板，并将其命名为TestApplication(或任何其他合适的名称)。
在项目中创建一个Scripts文件夹。将 jQuery 库文件添加到此文件夹。
Add a JavaScript file to the project by right clicking on the Scripts folder in the Solution Explorer tab and navigating to Add | JavaScript File. Name the file jquery.sample.js. This is our plugin file to which we will add the custom functions to extend the jQuery library.

注意事项

将插件命名为jquery.{pluginname}.js是一个很好的做法。
向项目添加一个新的 web 表单，并将其命名为Sample.aspx。这个表单将用于从插件中调用函数。
在Source模式下打开Sample.aspx页面，拖放 jQuery 库和插件文件，在head元素中生成以下代码:

怎么做……

在插件中使用$别名如下:

打开插件文件，在jQuery命名空间中添加一个sampleMethod1()函数，如下代码片段所示:
接下来，通过将下面的代码添加到Sample.aspxweb 表单中，调用前面定义的函数:

How it works…

在浏览器中运行页面时，插件函数会在页面正文中显示以下文本:

How it works…

由于该函数是在jQuery命名空间中定义的，所以可以直接在$对象上调用它。

注意事项

jQuery 库在jQuery命名空间中将许多实用函数定义为全局函数。这些效用函数的一些例子是$.map()、$.each()和$.ajax()。

参见 also

使用插件配方中的$别名

*# 使用插件中的$别名

在这个示例中，让我们修改上一个配方中插件中定义的函数，以使用$别名而不是完整的jQuery名称。使用$快捷方式提高了代码的可读性，但它的可用性并不能总是得到保证。项目中的其他库也可能使用$。使用$.noConflict()方法将 jQuery 对$的控制释放给其他库。

本例中使用的结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $ | jQuery 函数 | 这是指 jQuery 函数。 $是 jQuery 的别名。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | .append() | jQuery 方法 | 这将在每个匹配元素的末尾插入内容。 | | jQuery | jQuery 函数 | 这是指 jQuery 函数。 |

准备

让我们看看在 jQuery 插件中使用$ alias 的要求:

我们将重用在前面的配方中创建的 web 表单(Sample.aspx)和插件(jquery.sample.js)。
The plugin will be updated to include a wrapping function that takes $ as a parameter. The jQuery object will be passed as an argument to this function, as shown in the following code snippet:

(function($){})(jQuery);

通过传递jQuery对象作为参数，可以在这个包装函数中使用$快捷方式。

怎么做……

按照以下步骤添加一个方法到插件:

用以下代码替换jquery.sample.js文件中的代码:

(function($) { $.sampleMethod2 = function() { $("body").append("Inside the sample 2 method"); }; })(jQuery);
将Sample.aspxweb 表单中的方法名称更改为，使用前面定义的方法名称:

<script type="text/javascript"> $(document).ready(function () { $.sampleMethod2(); }); </script>

How it works…

在浏览器中运行该页面。输出类似于前面的 recipe，也就是将需要的文本添加到页面的 body 中，如下截图所示:

How it works…

由于该方法定义在jQuery名称空间中，因此可以直接在$快捷方式上调用它。

还有更多

在一个插件中可以定义多个函数。要添加更多函数，只需将它们附加到包装函数内的原始插件文件中。为了演示这一点，用以下代码更新jquery.sample.js文件:

(function ($) {
  $.sampleMethod1 = function () {
    $("body").append("Inside the sample 1 method<br/><br/>");
  };
  $.sampleMethod2 = function () {
    $("body").append("Inside the sample 2 method<br/><br/>");
  };
})(jQuery);

要在 web 表单中执行这些函数，请分别调用它们，如下代码片段所示:

<script type="text/javascript">
$(document).ready(function () {
  $.sampleMethod1();
  $.sampleMethod2();
});
</script>

在运行页面时，我们发现两个函数都执行了，如下截图所示:

There's more

参见 also

创建和使用一个简单的插件配方

调用 DOM 元素的方法

在前面的配方中，插件通过$快捷方式调用。在这个食谱中，我们将创建一个可以直接在 DOM 元素上调用的插件。这可以通过扩展jQuery.prototype，即jQuery.fn对象实现。

注意事项

JavaScript 中的每个对象都派生自Object，并从Object.prototype继承属性和方法。当属性或方法附加到原型时，对象的所有实例都反映该属性或方法。

本例中使用的结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $ | jQuery 函数 | 这是指 jQuery 函数。 $是 jQuery 的别名。 | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数。 | | .hasClass() | jQuery 方法 | 如果指定的 CSS 类被附加到一个元素上，则返回 true。 | | jQuery | jQuery 函数 | 这是指 jQuery 函数。 | | setInterval(function, delay) | JavaScript 函数 | 这将在指定的延迟(以毫秒为单位)之后重复执行一个函数。 |

准备

按照以下步骤创建一个为 DOM 元素提供方法的插件:

Let's create a plugin that animates the text content of an element by switching its colors at regular intervals. For example, consider the following text on the page. At specific intervals, the color of the text will change to the colors in a rainbow (that is, violet, indigo, blue, green, yellow, orange, and red) one by one in a cyclic manner.
使用之前创建的TestApplication项目，并添加一个新的 web 表单Rainbow-1.0.aspx。
脚本文件夹,添加一个新的插件通过右键单击解决方案资源管理器中的文件夹选项卡并导航到|添加 JavaScript 文件【显示】,jquery.rainbow-1.0.js插件名称。* 通过从Solution Explorer标签页中拖放 jQuery 库和插件，在 web 表单中包含这些代码:

<script src="Scripts/jquery-2.1.4.js"></script> <script src="Scripts/jquery.rainbow-1.0.js"></script>
- 要对页面上的文本内容设置样式，请将以下 CSS 类添加到head元素: 在窗体上拖放一个Panel控件。将前面定义的 CSS 类添加到Panel中。另外，添加一些随机文本来生成以下标记:*

**## 怎么做……

按照以下步骤向插件添加方法:

在插件文件中，添加一个名为rainbow()的方法，如下代码所示:
在Rainbow-1.0.aspxweb 窗体中，调用Panel控件上的插件方法，如下所示:

How it works…

插件的工作原理如下:

In the plugin, we have created a rainbow()method in the $.fn object:

``` (function ($) { $.fn.rainbow = function () {… };

})(jQuery); ```

注意事项

$.fn是$.prototype的别名，即 jQuery 原型。
在此方法中，可以使用this关键字

var $ele = this;

访问当前 DOM 元素。 3. 接下来，定义一个数组colors到遍历 DOM 元素:

var colors = ["violet", "indigo", "blue", "green", "yellow", "orange", "red"];
使用变量将切换文本颜色的interval设置为1000毫秒，其定义如下:

var interval = 1000;
计数器变量被初始化为零。这个变量将跟踪当前从colors数组显示的颜色:

var cnt = 0;
We use the JavaScript setInterval() function to repeatedly refresh the color every 1000 milliseconds:

setInterval(function () {…}, interval);

在这个函数中，我们检查计数器是否超过了数组的长度。如果是，则计数器被重置为零。这是为了确保colors以循环的方式应用于文本; 也就是说，在到达数组中的最后一个颜色后，第一个颜色被重复:

if (cnt >= colors.length) cnt = 0;

CSS属性color被更新为数组中的下一个颜色:

$ele.css("color", colors[cnt]);

计数器加 1 以获得数组中用于后续迭代的下一个颜色:

cnt++;

还有更多的…

到目前为止，我们已经定义了一个基本的插件方法。然而，它是不完整的，还有许多改进的可能性。为了演示一种可能的增强，向表单中添加另一个Panel，并添加一些随机文本，如下所示:

<asp:Panel ID="pnlTest" CssClass="sampleText" runat="server">
  Text inside a Panel control
</asp:Panel>
<br /><br />
<asp:Panel ID="pnlTestNew" runat="server">Text inside a new Panel control
</asp:Panel>

注意，CSS 类sampleText没有应用于新的Panel控件。

让我们假设在插件方法中，我们希望有选择地只将动画应用到那些 CSS 类sampleText应用到它们的元素上。因此，我们将更新方法来包含这个条件，如下所示:

(function($) {
  $.fn.rainbow = function() {
    var $ele = this;
    if ($ele.hasClass("sampleText")) {
      var colours = ["violet", "indigo", "blue", "green",
        "yellow", "orange", "red"
      ];
      var interval = 1000;
      var cnt = 0;
      setInterval(function() {
        if (cnt >= colours.length)
          cnt = 0;
        $ele.css("color", colours[cnt]);
        cnt++;
      }, interval);
    }
  };
})(jQuery);

现在，通过使用 HTML 选择器调用Panel控件上的插件方法再次运行页面。注意，这个选择器匹配多个元素:

$("div").rainbow();

输出如下面的截图所示。注意，动画不是只应用于第一个Panel，而是错误地应用于两个Panel控件:

There's more…

这是因为包含了.hasClass("sampleText")条件，该条件返回 DOM 中第一个匹配元素的检查结果。

为了确保插件方法正确地应用于所有元素，建议将方法包含在.each()中。因此，将前面的代码修改为以下代码:

(function($) {
  $.fn.rainbow = function() {
    this.each(function() {
      var $ele = $(this);
      if ($ele.hasClass("sampleText")) {
        var cnt = 0;
        var colours = ["violet", "indigo", "blue", "green",
          "yellow", "orange", "red"
        ];
        var interval = 1000;
        setInterval(function() {
          if (cnt >= colours.length)
            cnt = 0;
          $ele.css("color", colours[cnt]);
          cnt++;
        }, interval);
      }
    });
  };
})(jQuery);

因此，动画将被应用到具有 CSS 类sampleText的元素上，即第一个Panel控件，如下图所示:

There's more…

参见 also

提供默认值配方

提供默认值

在插件方法中提供可配置项，使开发人员能够根据应用的需求进行定制，这是一个很好的实践。使用options对象使我们能够实现这一点。还可以提供一组默认的选项，以便开发人员可以有选择地覆盖他们想要的配置。

在这个例子中，让我们构建在前面的配方中创建的插件，以提供选项对象以及默认值的映射。

本例中使用的结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $ | jQuery 函数 | 这是指 jQuery 函数。 $是 jQuery 的别名。 | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | $.extend() | jQuery 函数 | 这将两个或多个对象的内容合并到第一个对象中。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | .each() | jQuery 方法 | 这个遍历匹配的元素，并为每个元素执行一个函数。 | | .hasClass() | jQuery 方法 | 如果指定的 CSS 类被附加到一个元素上，则返回 true。 | | jQuery | jQuery 函数 | 这是指 jQuery 函数。 | | setInterval(function, delay) | JavaScript 函数 | 这将在指定的延迟(以毫秒为单位)之后重复执行一个函数。 |

准备

按照以下步骤创建一个 web 表单来调用插件方法的默认值:

为了将代码与前面的配方分开，让我们在TestApplication项目中创建另一个名为Rainbow-1.1.aspx的 web 表单。
通过右键单击Solution Explorer选项卡中的Scripts文件夹，并导航到Add|JavaScript File，添加另一个插件。命名jquery.rainbow-1.1.js文件。
在Source模式下打开Rainbow-1.1.aspx，在页面的head元素中拖放 jQuery 库和插件，生成如下代码:

<script src="Scripts/jquery-2.1.4.js"></script> <script src="Scripts/jquery.rainbow-1.1.js"></script>
要样式化页面上的文本，添加以下 CSS 类:

<style type="text/css"> .sampleText{ font-family:'Times New Roman', Times, serif; font-size:30px; } </style>
在 web 窗体上拖放一个Panel控件。添加前面的 CSS 类和一些随机文本:

怎么做……

在插件文件中添加下面的代码:

(function($) {
  $.fn.rainbow = function(opts) {
    var defaults = {
      colors: ["violet", "indigo", "blue", "green", "yellow", "orange", "red"],
      interval: 1000
    };
    var options = $.extend(defaults, opts);
    this.each(function() {
      var $ele = $(this);
      var cnt = 0;
      setInterval(function() {
        if (cnt >= options.colors.length)
          cnt = 0;
        $ele.css("color", options.colors[cnt]);
        cnt++;
      }, options.interval);
    });
  };
})(jQuery);

通过添加以下代码从 web 表单调用插件。注意，我们提供了一个数组colors和一个以毫秒为单位的间隔来覆盖默认配置:

<script type="text/javascript">
$(document).ready(function () {
  $("#<%=pnlTest.ClientID%>").rainbow({
    colours: ["red", "blue", "green"],
    interval: 2000
  });
});
</script>

How it works…

插件方法的工作原理如下:

更新了插件方法rainbow()，使其以一个名为opts的映射作为参数:

(function($) { $.fn.rainbow = function(opts) {…} }; })(jQuery)
提供了一个默认的映射，以适应没有提供或提供某些可配置值的场景。如下代码片段所示，该插件有两个可配置项，即一个由colors和interval组成的数组，用于颜色切换:

var defaults = { colors: ["blue", "green", "yellow", "orange", "red"], interval:1000 };
Next, merge the defaults and opts maps using the jquery $.extend() function, as follows:

var options = $.extend(defaults, opts);

这里，修改了defaults对象，并且覆盖了它与opts对象共享的任何属性。将新属性添加到defaults对象。如果defaults对象为空，则返回的目标对象将与opts对象相同。
Next, for each calling element, execute a function, as follows:

this.each(function () {…}

在前面的函数中，首先，获取当前元素:

var $ele = $(this);

把计数器设为零。这个计数器将跟踪当前使用的颜色:

var cnt = 0;

使用setInterval()函数在步骤 3 中options对象指定的interval处执行一个函数。如果调用元素没有提供interval，它将使用默认的interval。注意，colors也是从options对象中读取的。如果调用页面没有提供colors，则使用默认的colors:

setInterval(function() { if (cnt >= options.colors.length) cnt = 0; $ele.css("color", options.colors[cnt]); cnt++; }, options.interval);

还有更多的…

可以通过多种方式调用插件方法。由于参数是可选的，用户可以选择传递 none 或有选择地传递其中一些参数，如下代码所示:

$("#<%=pnlTest.ClientID%>").rainbow();

或

$("#<%=pnlTest.ClientID%>").rainbow({
  colours: ["red", "blue", "green"]
});

或

$("#<%=pnlTest.ClientID%>").rainbow({
  interval:1000
});

参见 also

链接配方的提供方法

提供方法链接

在 jQuery 中进行编程时，链接多个方法是非常有用的特性。链接是可能的，因为大多数 jQuery 方法返回一个对象，允许在返回的对象上调用其他方法。因为子方法是在返回的对象中而不是在整个 DOM 中执行的，所以代码运行得更快。这允许您编写代码，这不仅更短，而且更快。

我们目前使用的插件不支持链接。在本例中，让我们修改插件以包含该特性。

本例中使用的编程结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $ | jQuery 函数 | 这是指 jQuery 函数。 $是 jQuery 的别名。 | | $("#identifier") | jQuery 选择器 | 此基于其ID选择元素。 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象。 | | $.extend() | jQuery 函数 | 这将两个或多个对象的内容合并到第一个对象中。 | | .addClass() | jQuery 方法 | 这将为每个匹配的元素添加指定的 CSS 类。 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性。 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数。 | | .find() | jQuery 方法 | 这将查找与筛选器匹配的所有元素。 | | .hasClass() | jQuery 方法 | 如果指定的 CSS 类被附加到一个元素上，则返回 true。 | | jQuery | jQuery 函数 | 这是指 jQuery 函数。 | | setInterval(function, delay) | JavaScript 函数 | 这将在指定的延迟(以毫秒为单位)之后重复执行一个函数。 |

准备

按照以下步骤创建一个使用修改后的插件的网页:

在前面创建的TestApplication项目中，添加一个名为Rainbow-1.2.aspx的新 web 表单。
通过右键单击Solution Explorer选项卡中的Scripts文件夹，并导航到Add|JavaScript file，添加新的插件文件。将文件命名为jquery.rainbow-1.2.js。
将 jQuery 库和插件拖放到表单中，生成以下标记:

<script src="Scripts/jquery-2.1.4.js"></script> <script src="Scripts/jquery.rainbow-1.2.js"></script>
进入工具箱|Standard，将Panel和Table控件添加到窗体中。向控件中添加一些随机内容，以生成以下标记:

<asp:Panel ID="pnlTest" runat="server" CssClass="sampleText"> Text inside a Panel control </asp:Panel> <br /><br /> <asp:Table ID="tblTest" runat="server"> <asp:TableHeaderRow> <asp:TableHeaderCell>Title</asp:TableHeaderCell> <asp:TableHeaderCell>Author</asp:TableHeaderCell> <asp:TableHeaderCell>Category</asp:TableHeaderCell> </asp:TableHeaderRow> <asp:TableRow> <asp:TableCell>The Alchemist</asp:TableCell> <asp:TableCell>Paulo Coelho</asp:TableCell> <asp:TableCell>Fiction</asp:TableCell> </asp:TableRow> <asp:TableRow> <asp:TableCell>You Can Win</asp:TableCell> <asp:TableCell>Shiv Khera</asp:TableCell> <asp:TableCell>Non-Fiction</asp:TableCell> </asp:TableRow> </asp:Table>
为样式化Panel控件中的文本，添加以下 CSS 类:
要设置Table控件的样式，请向表元素添加以下 CSS 样式:
要设置表头的样式，请包含以下样式。稍后，它将通过链接代码添加到表头:

.headerStyle{ font-weight:700; font-variant:small-caps; text-align:center; background-color:lightgray; padding:5px; }

怎么做……

更新插件如下:

在插件文件jquery.rainbow-1.2.js中，添加以下代码:
在Rainbow-1.2.aspxweb 窗体的Panel和Table控件上调用插件方法。将连锁方法添加到插件方法中，以测试连锁是否按要求工作:

<script type="text/javascript"> $(document).ready(function() { $("#<%=pnlTest.ClientID%>").rainbow({ interval: 2000 }).css("backgroundColor", "lightyellow"); $("#<%=tblTest.ClientID%>").rainbow().find("th").addClass(" headerStyle"); }); </script>

How it works…

链接工作如下:

为了让链接工作，插件方法需要向调用代码返回一个jQuery对象。这可以通过更新插件来添加return关键字来实现，如下所示:
现在，当在Panel控件上调用rainbow()方法时，我们可以在以下语句中链接.css()方法来更改背景颜色:

$("#<%=pnlTest.ClientID%>").rainbow({interval:2000}).css("b ackgroundColor","lightyellow");
Similarly, when the rainbow() method is called on the Table control, we can chain the .find() method to only filter the table header, that is, th rows, and add the CSS class headerStyle to it, as we did in the following statement:

$("#<%=tblTest.ClientID%>").rainbow().find("th").addClass(" headerStyle");

因此，颜色转换和样式更新应用于窗体上的两个控件，如下面的截图所示:

参见 also

提供默认值配方

向插件添加操作

在这个的例子中，让我们创建一个插件，通过将所需的操作作为参数来执行多个操作。本例中使用的编程结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素 | | $(this) | jQuery 对象 | 它引用当前 jQuery 对象 | | $.extend() | jQuery 函数 | 这将两个或多个对象的内容合并到第一个对象中 | | ． animate() | jQuery 方法 | 这将对指定的 CSS 属性执行自定义动画 | | .css() | jQuery 方法 | 这将获取第一个匹配元素的 style 属性，或者设置每个匹配元素的 style 属性 | | .each() | jQuery 方法 | 这将遍历匹配的元素，并为每个元素执行一个函数 | | setInterval(function, delay) | JavaScript 函数 | 这将在指定的延迟(以毫秒为单位)之后重复执行一个函数 |

准备

按照以下步骤创建一个 web 表单，用于在插件方法上调用不同的操作:

In this recipe, let's create a plugin that can perform different types of effects on text content. We will focus on three effects: blink, color transition, and pulsation, as shown in the following screenshot:
为了开始，在TestApplication项目中，创建一个名为TextEffects.aspx的新 web 表单。
通过右键单击Solution Explorer选项卡，并导航到Add|JavaScript file，将一个新的插件文件添加到Scripts文件夹。将文件命名为jquery.texteffects.js。
以以下形式包含 jQuery 库和插件:

<script src="Scripts/jquery-2.1.4.js"></script> <script src="Scripts/jquery.texteffects.js"></script>
从工具箱中拖放三个Label控件。标记如下:

<asp:Label ID="lblTest1" runat="server" Text="This text will blink"></asp:Label><br /><br /> <asp:Label ID="lblTest2" runat="server" Text="This text will change colours"></asp:Label><br /><br /> <asp:Label ID="lblTest3" runat="server" Text="This text will pulsate"></asp:Label>
在运行时，Label控件作为span元素呈现。因此，要设置Label控件的样式，请将以下样式添加到页面:

span{ font-family:'Times New Roman', Times, serif; font-size:30px; }

怎么做……

更新插件和 web 表单如下所示:

在插件文件中添加以下代码:

(function($) { $.fn.texteffects = function(action, opts) { if (action == "blink") { var defaults = { interval: 1000 }; var options = $.extend(defaults, opts); var halfInterval = options.interval / 2; return this.each(function() { var $ele = $(this); setInterval(function() { $ele.animate({ opacity: 0 }, halfInterval).animate({ opacity: 1 }, halfInterval); }, options.interval); }); } else if (action == "pulsate") { var defaults = { minSize: "20", maxSize: "40", interval: 2000 }; var options = $.extend(defaults, opts); var halfInterval = options.interval / 2; return this.each(function() { var $ele = $(this); setInterval(function() { $ele.animate({ fontSize: options.maxSize + "px" }, halfInterval).animate({ fontSize: options.minSize + "px" }, halfInterval); }, options.interval); }); } else if (action == "rainbow") { var defaults = { colors: ["violet", "indigo", "blue", "green", "yellow", "orange", "red"], interval: 1000 }; var options = $.extend(defaults, opts); return this.each(function() { var $ele = $(this); var cnt = 0; setInterval(function() { if (cnt >= options.colors.length) cnt = 0; $ele.css("color", options.colors[cnt]); cnt++; }, options.interval); }); } }; })(jQuery);
在的TextEffects.aspx腹板中，第一次Label上的blink动作控制:

$("#<%=lblTest1.ClientID%>").texteffects("blink");
在第二个Label控制上调用rainbow动作:

$("#<%=lblTest2.ClientID%>").texteffects("rainbow", { interval: 2000 });
在第三个 T1 上调用pulsate动作:

$("#<%=lblTest3.ClientID%>").texteffects("pulsate",{ maxSize: 50, minSize: 30, interval: 3000 });

How it works…

在插件方法上调用不同的操作如下:

插件方法接受两个参数:所需的action和选项映射。
在这个插件中定义了三个操作:blink、rainbow和pulsate。使用传递给方法的action参数，可以调用相应的操作，如下面的代码片段所示:
Within the blink action, the default value for the blinking interval is set using a map:

var defaults = { interval: 1000 };

默认值与开发人员从调用页面传递的选项合并:

var options = $.extend(defaults, opts);

在指定的时间间隔内，文本将淡出和淡入。因此，一个半间隔被定义在其中文本的不透明度将被动画为零。在剩余的半间隔中，文本的不透明度将被动画恢复为统一:

var halfInterval = options.interval / 2;

为了启用链接，我们使用return关键字将一个 jQuery 对象返回给调用代码，如下所示:

return this.each(function () { var $ele = $(this); setInterval(function () { $ele.animate({ opacity: 0 }, halfInterval).animate({ opacity: 1 }, halfInterval); }, options.interval); });

JavaScript 函数使用setInterval()以指定的时间间隔重复从options.interval读取的进程。两个连续的动画链接到元素上，如下所示:

$ele.animate({ opacity: 0 }, halfInterval).animate({ opacity: 1 }, halfInterval);

每个动画的持续时间设置为halfInterval。
Within the pulsate action, the default values for the minimum and maximum font size and the interval of repetition are set using a map, as follows:

var defaults = { minSize: "20", maxSize: "40", interval: 2000 };

默认值与开发人员从调用页面提供的options合并:

var options = $.extend(defaults, opts);

定义了半区间。在前半部分间隔期间，字体大小会被动画化，从而增大到最大大小。在第二个半间隔期间，字体大小被动画化，以便它减少到最小定义的大小:

var halfInterval = options.interval / 2;

接下来，我们使用return关键字将一个 jQuery 对象返回给调用代码，如下所示:

return this.each(function () { var $ele = $(this); setInterval(function () { $ele.animate({ fontSize: options.maxSize + "px" }, halfInterval).animate({ fontSize: options.minSize + "px" }, halfInterval); }, options.interval); });

通过使用setInterval()JavaScript 函数可以重复动画。该过程按options.interval指定的持续时间重复进行。两个连续的动画链接到元素上，如下所示:

$ele.animate({ fontSize: options.maxSize + "px" }, halfInterval).animate({ fontSize: options.minSize + "px" }, halfInterval);

每个动画的持续时间设置为halfInterval。
Within the rainbow action, we will update the color of the text at regular intervals. The colors are read from an array. The default list of colors and the interval of the color switch is defined in the following map:

var defaults = { colors: ["violet", "indigo", "blue", "green", "yellow", "orange", "red"], interval: 1000 };

默认值与开发人员从调用页面提供的实际options合并:

var options = $.extend(defaults, opts);

为了启用链，我们使用return关键字并返回一个 jQuery 对象到调用页面，如下代码所示:

return this.each(function () { var $ele = $(this); var cnt = 0; setInterval(function () { if (cnt >= options.colors.length) cnt = 0; $ele.css("color", options.colors[cnt]); cnt++; }, options.interval); });

JavaScript 函数setInterval()用于在options.interval指定的持续时间内切换颜色。元素的CSS属性color被更新并设置为数组中的当前颜色，如下所示:

$ele.css("color", options.colors[cnt]);

如果我们到达数组的末尾，颜色将被循环，我们可以再次从数组中的第一个颜色开始:

if (cnt >= options.colors.length) cnt = 0;

在开始下一个迭代之前，计数器将被加 1 以从数组中检索下一个color。

参见 also

使用表单验证插件配方

使用表单验证插件

其他开发人员编写的插件可以从中央插件库https://plugins.jquery.com中搜索和下载。在搜索validation关键字时，我们遇到了由Jörn Zaefferer于 2006 年编写的 jQuery 验证插件，他是 jQuery 核心团队的成员之一。插件的官方网站为http://jqueryvalidation.org。

在这个例子中，让我们下载并在我们的应用中使用这个插件。本例中使用的编程结构总结如下:

构造

类型

描述

| | --- | --- | --- | | $("#identifier") | jQuery 选择器 | 这将根据元素的 ID 选择一个元素。 | | $("html_tag") | jQuery 选择器 | 这将选择具有指定 HTML 标记的所有元素。 | | click | jQuery 的事件 | 当您单击一个元素时，它就会触发。它对应于 JavaScript 的click事件。 | | .closest() | jQuery 方法 | 对于每个匹配的元素，这将通过向上遍历 DOM 树返回与选择器匹配的第一个元素。 | | event.preventDefault() | jQuery 方法 | 这将防止触发事件的默认动作。 | | .hide() | jQuery 方法 | 这将隐藏匹配的元素。 | | .html() | jQuery 方法 | 这将返回第一个匹配元素的 HTML 内容，或者设置每个匹配元素的 HTML 内容。 | | .insertAfter() | jQuery 方法 | 这将在目标之后插入元素。 | | .on() | jQuery 事件绑定 | 这将一个或多个事件的事件处理程序附加到匹配的元素。 | | .prop(propertyName)或.prop(propertyName, value) | jQuery 方法 | 这将为第一个匹配的元素返回指定属性的值，或者为所有匹配的元素设置指定属性的值。 | | .resetForm() | 验证插件的方法 | 这将重置表单的验证。 | | .show() | jQuery 方法 | 这会显示匹配的元素。 | | .siblings() | jQuery 方法 | 这个检索匹配元素的同族元素。 | | .val() | jQuery 方法 | 返回第一个匹配元素的值，或者设置每个匹配元素的值。 | | .validate() | 验证插件的方法 | 这将验证表单并返回一个验证器对象。 |

准备

要在 web 表单上使用验证插件，请遵循以下步骤:

The first step is to download the validation plugin, which can be obtained in many ways. It can be downloaded from the official website at http://jqueryvalidation.org. It is also available from package managers, such as Bower or NuGet. Alternatively, it can be referenced from CDN.

注意事项

要使用 Bower 下载它，请参考使用 NPM 配方下载插件。
In the TestApplication project, let's download the plugin from NuGet. To launch NuGet, in the File menu, go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution. In the NuGet screen, as shown in the following screenshot, search for jquery validation. Select jQuery.Validation, and click on the Install button:

安装完成后，您会注意到以下文件被添加到Scripts文件夹中:
将添加到项目中，并将其命名为FormValidation.aspx。在表单中包含 jQuery 库和验证插件，如下所示:
Create a registration form that accepts different types of data, such as the text, e-mail, password, and so on, as shown in the following screenshot:

使用以下标记创建表单:

<form id="frmRegistration" runat="server"> <h2>Registration Form</h2> <div id="summary"></div> <br /> <table> <tr> <td> <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label><span class="mandatory">*</span></td> <td> <asp:TextBox ID="txtName" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblEmail" runat="server" Text="Email"></asp:Label><span class="mandatory">*</span></td> <td> <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label><span class="mandatory">*</span></td> <td> <asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblConfirmPassword" runat="server" Text="Confirm Password"></asp:Label><span class="mandatory">*</span></td> <td> <asp:TextBox ID="txtConfirmPassword" runat="server" TextMode="Password"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblDOB" runat="server" Text="Date of Birth"></asp:Label> </td> <td> <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblMailAddr" runat="server" Text="Mailing Address"></asp:Label> </td> <td> <asp:TextBox ID="txtMailAddr" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblPostal" runat="server" Text="Postal Code"></asp:Label> </td> <td> <asp:TextBox ID="txtPostal" runat="server"></asp:TextBox> </td> </tr> <tr> <td> <asp:Label ID="lblUrl" runat="server" Text="URL"></asp:Label> </td> <td> <asp:TextBox ID="txtUrl" runat="server"></asp:TextBox> </td> </tr> <tr> <td colspan="2" class="center"> <asp:CheckBox ID="chkAgree" runat="server" /> <asp:Label ID="lblAgree" runat="server" Text="I agree to the terms and conditions"></asp:Label> </td> </tr> <tr> <td colspan="2" class="center"> <asp:Button ID="btnSubmit" runat="server" Text="Submit" /> <asp:Button ID="btnReset" runat="server" Text="Reset" /> </td> </tr> </table> </form>
在表单中添加以下样式:

.mandatory{ color:red; } .center{ text-align:center; }
验证表单之后，验证插件使用 CSS 类error在标签元素中生成错误消息。要自定义错误消息的样式，我们可以添加我们自己的样式，如下所示:
表单在顶部提供了一个div元素来显示无效元素的总数。让我们为这个元素添加以下样式:

怎么做……

将以下 jQuery 代码添加到窗体的<script>块中:

<script type="text/javascript">
$(document).ready(function() {
  $("#summary").hide();
  $("#<%=btnSubmit.ClientID%>").on("click", function() {
    var validator = $("#frmRegistration").validate({
      rules: {
        <%=txtName.ClientID%>: "required",
        <%=txtEmail.ClientID%>: {
          required: true,
          email: true
        },
        <%=txtPassword.ClientID%>: {
          required: true,
          minlength: 8
        },
        <%=txtConfirmPassword.ClientID%>: {
          required: true,
          minlength: 8,
          equalTo: "#<%=txtPassword.ClientID%>"
        },
        <%=txtDOB.ClientID%>: {
          date: true
        },
        <%=txtMailAddr.ClientID%>: {
          maxlength: 200
        },
        <%=txtPostal.ClientID%>: {
          digits: true
        },
        <%=txtUrl.ClientID%>: {
          url: true
        },
        <%=chkAgree.ClientID%>: "required"
      },
      messages: {
        <%=txtName.ClientID%>: "Please enter your Name",
        <%=txtEmail.ClientID%>: {
          required: "Please enter your Email",
          email: "Please enter a valid Email address"
        },
        <%=txtPassword.ClientID%>: {
          required: "Please enter your Password",
          minlength: "Password should be at least 8 characters long"
        },
        <%=txtConfirmPassword.ClientID%>: {
          required: "Please confirm your Password",
          minlength: "Password should be at least 8 characters long",
          equalTo: "Your entered passwords do not match"
        },
        <%=txtDOB.ClientID%>: "Enter a valid date",
        <%=txtMailAddr.ClientID%>: "Your address exceeds 200 characters",
        <%=txtPostal.ClientID%>: "Please enter only digits",
        <%=txtUrl.ClientID%>: "Please enter a valid Url",
        <%=chkAgree.ClientID%>: "Please accept the terms and conditions to proceed"
      },
      errorPlacement: function(error, element) {
        if (element.prop("id") == "<%=chkAgree.ClientID%>") error.insertAfter(element.siblings("#<%=lblAgree.ClientID%>"));
        else
          error.insertAfter(element);
      },
      invalidHandler: function() {
        $("#summary").html("Please correct the " + validator.numberOfInvalids() + " invalid field(s) on the form.").show();
      }
    });
  });
  $("#<%=btnReset.ClientID%>").on("click", function(evt) {
    evt.preventDefault();
    $("#summary").hide();
    $("input[type=text]").val("");
    $("input[type=password]").val("");
    $("input[type=checkbox]").prop("checked", false);
    $("#frmRegistration").validate().resetForm();
  });
});
</script>

How it works…

验证插件工作原理如下:

On running the page in the browser, if the Submit button is clicked without entering any data into the fields, we will see that the following error messages are displayed for invalid fields along with a summary on the top:
When data is entered in the form, you will notice that the error messages will get updated to give you more specific details about the invalid fields, as shown in the following screenshot:

当您单击Reset按钮时，它将清除所有字段和错误消息。
To validate the fields, we call the validate() method on the form when you click on the Submit button:

$("#<%=btnSubmit.ClientID%>").on("click", function () { var validator = $("#frmRegistration").validate({…});

validate()方法有许多选项。我们将采用下列方案:
- 规则:这由键/值对组成，用于验证表单上的控件。
- 消息:这由键/值对组成，用于定义自定义错误消息。
- errorPlacement:执行一个函数，用于定制错误消息的位置。函数的第一个实参是error标签，作为jQuery对象提供，第二个实参是invalid元素，作为jQuery对象提供。
- invalidHandler:当窗体被标记为无效时，执行一个callback函数。
  
  var validator = $("#frmRegistration").validate({ rules: { }, messages: { }, errorPlacement: function(error, element) { }, invalidHandler: function() { } });
以上这些选项以以下方式应用于validate()方法:
rules 选项采用以下名称/值对来列出验证规则:
- Name字段为必填字段:
  
  <%=txtName.ClientID%>: "required",
- Email字段是必须的，并且应该有一个有效的email:
  
  <%=txtEmail.ClientID%>: { required: true, email: true },
- 密码字段为强制输入，输入的密码长度至少为8字符:
  
  <%=txtPassword.ClientID%>: { required: true, minlength: 8 }
- Confirm Password字段也是必须的，输入的密码长度至少为8个字符。更重要的是，输入的数据应该匹配Password字段:
  
  <%=txtConfirmPassword.ClientID%>: { required: true, minlength: 8 , equalTo: "#<%=txtPassword.ClientID%>"},
- 出生日期字段应该有一个有效的date:
  
  <%=txtDOB.ClientID%>: { date: true },
- 邮件地址字段中输入的最大文本长度为200字符:
  
  <%=txtMailAddr.ClientID%>: { maxlength: 200 },
- 邮政编码字段应该只有数字:
  
  <%=txtPostal.ClientID%>: { digits: true },
- URL字段应该有一个有效的 URL:
  
  <%=txtUrl.ClientID%>: { url: true },
- 条款和条件应达成一致，即要求勾选复选框:
  
  <%=chkAgree.ClientID%>:"required"
对于前面的规则，定义相应的错误消息。这些错误消息将覆盖验证插件提供的默认错误消息:
- Name字段:
  
  <%=txtName.ClientID%>: "Please enter your Name",
- Email字段:
  
  <%=txtEmail.ClientID%>: {required: "Please enter your Email", email: "Please enter a valid Email address"},
- 密码字段:
  
  <%=txtPassword.ClientID%>: {required: "Please enter your Password", minlength:"Password should be at least 8 characters long"},
- 确认密码字段:
  
  <%=txtConfirmPassword.ClientID%>: {required: "Please confirm your Password", minlength:"Password should be at least 8 characters long", equalTo: "Your entered passwords do not match" },
- 出生日期字段:
  
  <%=txtDOB.ClientID%>: "Enter a valid date",
- 邮寄地址字段:
  
  <%=txtMailAddr.ClientID%>: "Your address exceeds 200 characters",
- 邮政编码字段:
  
  <%=txtPostal.ClientID%>: "Please enter only digits",
- URL字段:
  
  <%=txtUrl.ClientID%>: "Please enter a valid Url",
- 条款和条件复选框:
  
  <%=chkAgree.ClientID%>:"Please accept the terms and conditions to proceed"
Each of the preceding error messages are displayed next to the respective invalid element. To override this default placement, we can attach a function to the errorPlacement option. Let's do this for the checkbox since we want to display the error message after the label I agree to the terms and conditions instead of next to the checkbox element. This can be done as follows:

errorPlacement: function(error, element){ if (element.prop("id") == "<%=chkAgree.ClientID%>") error.insertAfter(element.siblings("#<%=lblAgree.ClientID%>")); else error.insertAfter(element); },

因此，如果元素是chkAgree，则将error标签插入到lblAgree元素之后。
Lastly, execute a callback function when the form is marked as invalid. This callback function will display the total number of invalid fields on the form:

invalidHandler: function () { $("#summary").html("Please correct the " + validator.numberOfInvalids() + " invalid field(s) on the form.").show(); }

前面的错误消息显示在表单顶部的summarydiv 中。
When you click on the Reset button, first of all the posting of the form is prevented:

evt.preventDefault();

用来显示验证summary的 div 被隐藏:

$("#summary").hide();

接下来，所有的表单字段被清空/重置:

$("input[type=text]").val(""); $("input[type=password]").val(""); $("input[type=checkbox]").prop("checked",false);

resetForm()方法在validate()方法返回的验证器对象上调用，这样所有的验证都被重置:

$("#frmRegistration").validate().resetForm();

还有更多的…

假设我们有一组想要一起验证的控件。例如,电话字段可以输入一个手电话、工作电话或家庭电话,如下图所示:

There's more…

如果我们需要以至少输入一个电话号码的方式验证这三个字段，那么使用验证插件提供的require_from_group方法。该方法在发行版中可用的additional-methods.js文件中可用，可以从http://jqueryvalidation.org下载。

要验证 Phone 字段，请遵循以下步骤:

从http://jqueryvalidation.org下载additional-methods.js文件，并将其包含在项目的Scripts文件夹中。将此文件包含在以下表格中:

<script src="Scripts/additional-methods.js"></script>
在表单上添加 Phone 字段的标记:

<tr> <td> <asp:Label ID="lblPhone" runat="server" Text="Phone (provide at least one)"></asp:Label><span class="mandatory">*</span></td> <td> <table> <tr> <td> <asp:Label ID="lblHandphone" runat="server" Text="Hand Phone"></asp:Label>  <asp:TextBox ID="txtHandphone" CssClass="phonegroup" runat="server"></asp:TextBox> </td> <td> <asp:Label ID="lblWorkphone" runat="server" Text="Work Phone"></asp:Label>  <asp:TextBox ID="txtWorkphone" CssClass="phonegroup" runat="server"></asp:TextBox> </td> <td> <asp:Label ID="lblHomephone" runat="server" Text="Home Phone"></asp:Label>  <asp:TextBox ID="txtHomephone" CssClass="phonegroup" runat="server"></asp:TextBox> </td> </tr> </table> </td> </tr>
注意，组中的TextBox控件被分配了相同的 CSS 类phonegroup。
In the validate() method, add the following rules:

<%=txtHandphone.ClientID%>: {require_from_group: [1, ".phonegroup"], phoneUS: true}, <%=txtWorkphone.ClientID%>: {require_from_group:[1, ".phonegroup"], phoneUS: true}, <%=txtHomephone.ClientID%>: {require_from_group:[1,".phonegroup"], phoneUS: true},

require_from_group方法需要以下两个选项:
- 选项 1:组中需要填写的字段个数
- 选项 2:CSS 组选择器
设置phoneUs为true，表示该字段为电话字段。
添加相应的错误消息:

<%=txtHandphone.ClientID%>: {phoneUS: "Please enter a correct phone number"}, <%=txtWorkphone.ClientID%>: {phoneUS: "Please enter a correct phone number"}, <%=txtHomephone.ClientID%>:{phoneUS: "Please enter a correct phone number"},
To display a common message for all the three controls, we use the groups option of the validate() method:

groups: { phoneFields: "<%=String.Concat(txtHandphone.ClientID, " ")%><%=String.Concat(txtWorkphone.ClientID, " ")%><%=txtHomephone.ClientID%>" },

在前面的代码片段中，我们为组分配了一个任意名称，即phoneFields。分配给该字段的值是组中以空格分隔的控件列表。在运行时，phoneFields将被计算为以下字符串:

phoneFields: "txtHandphone txtWorkphone txtHomephone"
为了在适当的位置显示此组的错误，还更新了errorPlacement选项。在这里，error标签被附加到父容器表:
Thus, on validation, a common error message is displayed for the three controls:
On entering incorrect data into any of the phone fields, the error message will change to the following:

参见 also

使用 NPM 配方下载插件

使用 NPM 下载插件

由于 jQuery 插件库现在处于只读模式，建议使用NPM(Node Package Manager)管理插件。在本教程中，我们将使用 NPM 和 Bower 下载 jQuery 验证插件。

注意事项

Bower 是一个浏览器包管理器。它被优化用于管理前端包。然而，为了使用 Bower，你需要安装Node.js和NPM。一些 bower 包也需要Git来安装。

准备

Bower 可以设置如下:

The first step is to install Node.js and NPM on your machine. Node.js is available at https://nodejs.org. On the home page, click on the Download link to download the required version:
安装完成后，在终端窗口(例如 Windows 机器上的 cmd)中使用以下命令进行测试:

``` node –v npm -v

```
接下来，从http://git-scm.com下载 Git 安装程序。运行并完成安装。
接下来，将 Bower 安装为一个全局节点模块。为此，打开终端窗口并输入以下命令:

``` npm install –g bower

```

怎么做……

现在已经安装好了所有需要的软件，可以使用 Bower 安装 jQuery 验证插件，在终端窗口中输入如下命令:

bower install jquery-validation

终端窗口将显示以下安装消息:

How to do it…

How it works…

Bower 在机器上创建了一个bower_components文件夹，并在此文件夹中下载插件及其依赖项，即 jQuery 库。
After going to the jquery-validation folder, we can see the downloaded files:
The validation plugin files can be found in the distribution folder, that is, bower_components/jquery-validation/dist, as shown in the following screenshot:

参见 also

使用表单验证n 插件配方***

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/31278.html

数据知识

系统公告

开发文档

ASPDotNet查看更多书籍

《ASP.NET jQuery 秘籍》

ASPDotNet 八、创建和使用 jQuery 插件

八、创建和使用 jQuery 插件

简介

创建和使用一个简单的插件

准备

注意事项

怎么做……

How it works…

注意事项

参见 also

准备

怎么做……

How it works…

还有更多

参见 also

调用 DOM 元素的方法

注意事项

准备

How it works…

注意事项

还有更多的…

参见 also

提供默认值

准备

怎么做……

How it works…

还有更多的…

参见 also

提供方法链接

准备

怎么做……

How it works…

参见 also

向插件添加操作

准备

怎么做……

How it works…

参见 also

使用表单验证插件

准备

注意事项

怎么做……

How it works…

还有更多的…

参见 also

使用 NPM 下载插件

注意事项

准备

怎么做……

How it works…

参见 also

留言

联系客服

ASPDotNet 查看更多书籍