第7章 jQuery插件的编写和使用

第7章 jQuery插件的编写和使用

常用的jQuery插件
1 表单验证插件 formValidator
 作用:为了简化客户端流程,提高代码的重用性
 formValidator支持的五大校验方式如下:
 inputValidator:针对input,textarea,select控件的字符长度,值范围和选择个数的控制.
 compareValidator:共两个对象比较(支持比较字符串和数值型).
 ajaxValidator:通过ajax到服务器上做数据校验.
 regexValidator:针对一些验证,如正则表达式
 functionValidator:使用外部函数来做校验.
formValidator中注意全局配置要初始化,即initConfig().

示例:用formValidator验证学号是否存在

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="../validator.css" rel="stylesheet" type="text/css"/>
    <script src="../jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../formValidator.js" type="text/javascript"></script>
    <script src="../formValidatorRegex.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $.formValidator.initConfig({
                formID:"form1",
                onError:function(){alert("对不起，验证没有通过，请查看错误消息！");}
            });
            $("#txtStuNo").formValidator({
                onShow:"请输入学号",
                onFocus:"输入学生编号",
                onCorrect:"谢谢您的配合"
            }).regexValidator({
                        regExp:"notempty",
                        dataType:"enum",
                        onError:"学号必填"
                    }).ajaxValidator({
                        type:"get",
                        url:"http://localhost:1105/MyHandler.ashx",
                        dataType:"text",
                        success:function(data){
                            if(data=="ok")
                            {
                                return true;
                            }
                             else
                            {
                                return false;
                            }
                        },error:function(){alert("服务器没有返回数据，可能服务器忙，请重试")},onError:"该学号已经存在",
                        onWait:"正在对学号进行校验，请稍后...."
                    });
        });

    </script>
</head>
<body>
      <form id="form1">
          <table>
              <tr>
                  <td>学号：<input type="text" id="txtStuNo"/></td>
                  <td><div id="txtStuNoTip"></div></td>
              </tr>
          </table>
      </form>
</body>
</html>
View Code

2 动态绑定事件插件-livequery
 作用:为动态生成的控件去追加事件处理.
 bind(),live(),livequery()三者之间的区别:
 bind():已存在元素的注册事件.
 live():动态添加的元素的注册事件.它与livequery的区别在于live()不支持movseover,focus,blur等属性,而livequery却支持.
 livequery还有一个用法是触发回调函数.
示例1:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("a").live("click",function(){
                alert("Live()方法");
            });
            $("body").append("<a href='#'>超链接B</a>");
        });
    </script>
</head>
<body>
      <a href="#">超链接A</a>
</body>
</html>

3 jQuery UI插件
 作用:实现了界面表达的易用化.
 jQuery UI主要分为3个部分,交互,微件和效果库.
 使用此插件通常会用到Sortable(排序)库

4.Cookie插件
 它是一种轻量级的插件.通常用于用户填写完用户名后,单击下面的"记住用户名"复选框,使之处于选中状态.
 写如Cookie的语法如下:
 $.cookie(cookie_name,cookie_value,{path:'/',expires:time});
 参数说明:
 cookie_name:待写入的Cookie名;
 cookie_value:为待写入的值.
 expries:(Number|Date)Cookie值得有效期.
 path:cookie的路径属性.

插件的种类:
1 封装对象方法的插件
2 封装全局函数的插件
3 选择器插件
注意:插件应返回一个jQuery对象,以保证插件的可链式操作.

posted @ 2013-12-22 12:04  mmww  阅读(163)  评论(0)    收藏  举报