读<jQuery 权威指南>[5]-插件

一、说明

jQuery插件官网：http://plugins.jquery.com/

使用插件时引用顺序：插件引用要位于主jquery库之后。

二、插件应用实例

演示插件jquery.validate.js的使用方法：

①引用jQuery主库和validate插件。

注意：

• jQuery主库要先于插件引用；
• 如果想显示中文错误提示，还需要引用jquery.validate.messages_cn.js。

<script type="text/javascript" 
            src="Jscript/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" 
            src="Js-7-1/jquery.validate.js">
    </script>
    <script type="text/javascript" 
            src="Js-7-1/jquery.validate.messages_cn.js">
    </script>

<form id="frmV" method="get" action="#">
     <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              标题：<br />
                  <input id="title" name="title"
                         type="text" class="txt" />
              <font color="red">*</font><br />
              <span></span>
              </div>
              <div>
         </div>
      </div>
         <div class="divBtn">
              <input id="sbtUser" type="submit" 
                     value="提交" class="btn" />
         </div>
     </div>
     </form>

②设置验证规则，注意name要与控件对应。

<script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      title: { required: true, minlength: 5,maxlength:18 }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
    </script>

三、自定义插件

1.插件分类：

• 封装方法插件：对象插件
• 封闭函数插件：类插件

2.插件开发注意事项

①插件命名格式： jquery.[插件名].js；

②所有插件都应该以分号；开头，避免压缩插件之后出现错误；为了保证JQuery的链式写法正确性，插件本身必须返回一个jQuery对象；

③在插件内部，this表示选择器选中的对象，和平时的this含义不太相同；

④为了避免冲突，在编写插件时尽量使用jQuery而不是$符号；

⑤对象级别插件所有方法都依附于jquery.fn主体对象；类级别插件所有方法都依附于jquery对象。

⑥编写对象级别插件是用jQuery.fn.extend()方法进行扩展，编写类级别插件时是用jQuery.extend()方法进行扩展。

2.对象插件示例：

插件功能比较简单，当鼠标经过菜单项时自动切换背景颜色。

首先定义插件jquery.color.js

; (function($) {
    $.fn.extend({
          "focusColor":function (color) {
              var def_col = "#ccc";
              var list_bg = "#fff";
              color = (color == undefined )? def_col : color;
              $(this).find("li").each(function() {
                  $(this).mouseover(function() {
                      $(this).css("background-color", color);
                  }).mouseout(function() {
                      $(this).css("background-color", list_bg);
                  });
              });
              return $(this);
          }
    });
})(jQuery);

调用：

<script type="text/javascript">
        $(function() {
            $("#u1").focusColor("green");//调用自定义的插件
        })
    </script>

3.类插件示例：

定义类级别插件jquery.calc.js。

;$(function () {
    $.extend({
        "addNum": function (a, b) {
            a = a || 0;
            b = b || 0;
            return parseInt(a) + parseInt(b);
        }
    });
})(jQuery);

调用：

<script type="text/javascript">
        $(function() {
            $("#Button1").click(function() {
                $("#Text3").val(
                $.addNum($("#Text1").val(),
                         $("#Text2").val()));
            }); 
        })
    </script>