JQuery.Boxy

2011年10月5日

在《弹出层之1：JQuery.Boxy (一)》中讲到了JQuery.Boxy的基本用法，本次讲下手动创建实例，new一个boxy对象是很容易的，传递一些参数对象就能满足不同的需求了。

4.1、手动创建实例

<p>
<a href="#" id="a1">4.1、手动创建一个实例</a>
</p>

测试发现modal为true为模式窗口，也就是背景被遮罩时就算设置 draggable: true拖动也是无效的。

5.1、常用对话框—提问框

            //提问框
            $("#a2").click(function() {
                Boxy.ask("凤姐最漂亮的部分是？",  //问题
                ["脸皮", "小嘴巴", "知识渊博"], //可选项按钮
                function(val) { alert(val) }, //回调方法
                {title:"测试",modal:false}   //boxy属性设置
                );
            });

    <p>
        <a href="#" id="a2">5.1、弹出提问框</a>
    </p>

Boxy.ask(question, answers, callback, options)方法的4个参数question表示提问；answers提问选择项，一般为数组；callback为回调方法；options是boxy弹出框的的属性对象，见4.1。

5.2、常用对话框—警告框

            //警告框
            $("#a3").click(function() {
                Boxy.alert("这是警告信息",   //提示信息
                function(val) { alert(val); },   //回调方法
                {title:"提示"});  //boxy属性
            });

Boxy.alert(message, callback, options)方法的3个参数message表示警告信息；callback为回调方法；options是boxy弹出框的的属性对象，见4.1。

5.3、常用对话框—确认框

            //确认框
            $("#a4").click(function() {
                Boxy.confirm("你确认要看凤姐的照片吗？", //确认提示信息
                function() { alert("上当了") },  //点击确认后的回调信息
                { title: "测试", modal: false });   //boxy属性设置
            });

Boxy.confirm(message, callback, options)方法的3个参数message表示确认提示信息；callback为回调方法,只有点击确认时才会执行；options是boxy弹出框的的属性对象，见4.1。

6、API参数

方法：
Boxy.load(url, options)
以一个URL加载内容并以Boxy对话框的形式展现。支持以下的一些选项参数：
类型 - HTTP方法，默认为GET
缓存 - 如果是true，缓存内容连续通话。相当于缓存选项传递到jQuery的Ajax方法。默认：false。
过滤 - jQuery的表达式，用于过滤远程内容。
（任何其他指定的选项将被传递到boxy的构造函数中）

Boxy.get(element)
返回包含元素的实例，例如：<a href="#" onclick="Boxy.get(this).hide();">关闭对话框</a>

Boxy.ask(question, answers, callback, options)
显示模式，即非可关闭对话框，允许用户选择选项。问题是要显示给用户的信息。答案是一个数组或一切可能的回答的数列。回调函数将收到选定的回答，这是否是需要的值或相应的密钥要根据一个数组或答案数列是否已经提供了。options是一种额外的可选设置选项传递给对话框的构造函数。

Boxy.alert(message, callback, options)
显示模式，非可关闭对话框显示消息给用户。
注意：此方法并不是为了取代浏览器本地window.alert()函数提供，因为它没有能力阻止程序执行，在对话框是可见的时候。

Boxy.confirm(message, callback, options)
显示模式，非可关闭对话框显示的含有确定和取消按钮的消息。回调只会在用户选择了“确定”时被调用。
注意：此方法并不是为了取代浏览器提供的本地window.confirm()函数，因为它没有能力在对话框可见时阻止程序执行的。

Boxy.linkedTo(ele)
返回已通过执行器构造函数选项连接DOM元素的boxy实例。

Boxy.isModalVisible()
返回true如果任何模式对话框是当前可见的，否则返回false。

new Boxy(element, options)
构造函数；创建一个新的boxy对话框。element是对话框的内容；任何有效的参数，jQuery的$()函数在这里也是有效的。options是一个配置选项的散列，见下面详细的资料。

estimateSize()
当对话框不可见的时候估计其大小。如果当前对话框可见，不要使用此方法，使用getSize()代替。

getSize()
以数组的形式[width, height]返回对话框的大小。

getContentSize()
返回对话框内容区域的大小。默认情况下，指在对话框框架里的一切，不包括标题栏。

getPosition()
以[x,y]数组形式返回最顶层对话框的左上角坐标。

getCenter()
以[x,y]数组形式返回最顶层对话框的中心点的坐标。

getInner()
返回一个jQuery对象包装对话框的内部区域-框架内包括标题栏一切。

getContent()
返回一个jQuery对象包装对话框的内容区域-框架内的一切，不包括标题栏。

setContent(newContent)
设置对话框中的内容，任何对$()有效的参数也对设置的新内容有效。可链接。

moveTo(x,y)
移动对话框到左上角为(x,y)的位置，可链接。

centerAt(x,y)
把对话框移动到中心坐标为(x,y)的位置上。

center(axis)
移动对话框，使其在视野的中央。可选参数axis可以是"x","y"中的任意一个中心轴。可链接。

resize(w,h,after)
重新调整对话框的高宽到[w,h]，完成后执行回调函数，回调函数将接受Boxy实例作为参数。可链接。

tween(w,h,after)
动画补间对话框高宽到[w,h]，完成后执行回调函数，回调函数将接受Boxy实例作为参数。可链接。

isVisible()
如果当前对话框可见，则返回true，否则返回false。

show()
显示对话框，可链接。

hide(after)
隐藏对话框，after为可选回调函数，完成后执行。可链接。

toggle()
触发对话框的显隐属性。可链接。

hideAndUnload(after)
在隐藏后立即执行卸载。在卸载之前执行after回调函数。可链接。

unload()
从DOM中删除对话框，切断其与执行机构的联系，如果有的话。一旦出现一个对话框已被卸载它的任何进一步行动都是未定义的。

toTop()
将当前对话框移动到其他所有对话框的上部。可链接。

getTitle()
以HTML的形式返回对话框的标题。

setTitle(t)
设置对话框的标题为t，可链接。

属性:

CSS选择器
.boxy-wrapper .title-bar
div包装的自动生成的标题栏

.boxy-wrapper .title-bar h2
标题栏的内容

.boxy-wrapper .title-bar.dragging
拖拽时候的标题栏

.boxy-wrapper .title-bar .close
默认的关闭对话框的执行器

.boxy-inner
内部区域，包括标题栏

.boxy-content
内部区域，不包括标题栏。这个class类将被自动添加到传递给Boxy的构造函数的任何元素。

.boxy-wrapper .question
通过Boxy.ask()创建的，包含问题文字

.boxy-wrapper .answers
通过Boxy.ask()创建的，包含应答的按钮

.close
这一class类的任何内容的单击事件将关联到关闭对话框上。

选择器的外框圆角效果是使用png图片实现的，如果想更改透明程度，可以使用ps修改图片；如果不考虑IE6的话，可以使用另一种常用的圆角方法(不用图片只用css样式)。

官网：http:///projects/jquery/boxy/
译文：http://www./wordpress/?p=318

本文示例

posted @ 2011-10-05 09:48 张果阅读(217) 评论(0) 编辑

弹出层之1：JQuery.Boxy (一)

Boxy是一个基于JQuery的弹出层插件，它有相对漂亮的外观，功能齐全，支持iframe，支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重，但使用不那么方便。

1、下载并修改插件

可以在官网上下载到最新版(http://plugins./files/boxy-0.1.4.zip)，到我写这些文字的时候最新版为0.1.4版，下载解压后有1个主要的js文件：jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。将文件引入系统中，修改boxy.css，将下面的图片路径修改为项目中实际的位置，如果设置不对会引起图片失效，那时就难看了。

/* 将此处的图片修改为相对于css文件的图片文件的路径 */
    .boxy-wrapper .top-left { background: url('../images/boxy-nw.png'); }
    .boxy-wrapper .top-right { background: url('../images/boxy-ne.png'); }
    .boxy-wrapper .bottom-right { background: url('../images/boxy-se.png'); }
    .boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); }

    /* 注意:下面的路径必须使用绝对路径或url的形式 */
    /*绝对路径以‘/’开始表示域名，使用时要注意虚拟目录,没有可以省略，/域名/图片在站点中的路径*/
    /*url则是指http://www./xxx.png的形式出现*/
    .boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-nw.png'); }
    .boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-ne.png'); }
    .boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png'); }
    .boxy-wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); }

2、将插件引用到页面中

3、给匹配的元素绑定boxy行为

a标签中的 title如果不设置，弹出的框将没有标题且不能拖动;href后面的锚记m1为对应的要弹出的元素id;显示的元素默认如果设置为none时弹出将设置显示。

3.2、弹出显示指定的页面内容

<a href="../default.aspx" class="boxy" title="提示">3.2、加载一个文档，显示为提示信息</a>

href超链接到要弹出显示内容的文件。

3.3、提交时以确认框形式弹出

说明：
1、boxy对话框自动计算出您的内容区域内本身的大小和位置，没有必要明确规定了包装集的尺寸;
2、上面的简单使用方法中其实是在间接指定boxy中message属性的内容，该属性为弹出框的显示信息，默认为：“请确认：”
3、每个匹配锚title属性将被用来作为其相应的对话框的标题
4、message的内容的display属性都将设置为block(显示为块)

下载本文示例

posted @ 2011-10-05 09:27 张果阅读(642) 评论(1) 编辑

2011年10月1日

弹出层之2：JQuery.BlockUI

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。

jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器(模式窗口)。当被激活时，它会防止用户活动的页面（或页面的一部分），直到它被禁用。 BlockUI添加元素的DOM，给它的外观和阻止用户交互行为。

1、首先引入插件

2、调用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head><title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="JQuery.BlockUI.min.2.39.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('#Button1').click(function() {
                //阻止页面的用户的活动
                $.blockUI();
            });
            $('#Button2').click(function() {
                //自定义信息内容
                $.blockUI({ message: '<h3><img src="busy.gif" /> Just a moment...</h3>' });
            });
            $('#Button3').click(function() {
                //自定义样式
                $.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
            });
            $('#Button4').click(function() {
                //定义弹出的信息为页面的某一个元素
                $.blockUI({ message: $('#domMessage') });
            });
            $('#btnClose').click(function() {
                //关闭弹出层
                $.unblockUI();
            });
            $('#Button5').click(function() {
                //设置淡入，淡出，自动关闭时间
                $.blockUI({ fadeIn: 700, fadeOut: 700, timeout: 2000 });
            });
            //简单的气泡提示
            $.growlUI('提示', '删除成功!');
        });
    </script>
</head>
<body>
    <ol>
        <li>阻止页面的用户的活动,不会自动消失，请刷新： $.blockUI();
            <input id="Button1" type="button" value="测试" />
        </li>
        <li>自定义消息：
            <input id="Button2" type="button" value="测试" />
        </li>
        <li>自定义样式：
            <input id="Button3" type="button" value="测试" />
        </li>
        <li>弹出指定的元素，并关闭弹出层(该层可以为隐藏)：
            <input id="Button4" type="button" value="测试" />
        </li>
        <li>设置淡入，淡出，自动关闭时间：
            <input id="Button5" type="button" value="测试" />
        </li>
    </ol>
    <div id="domMessage" style="text-align: center; width: 200px; height: 50px; border;
        1px solid #9cf; padding: 25px; display: none;">
        <h3>
            Message</h3>
        <input id="btnClose" type="button" value="关闭" />
    </div>
</body>
</html>

3、样式修改

jQuery blockUI 提供的默认样式过于朴素, 可以在每一次调用blockUI() 函数时进行修改. 也一次直接修改库文件 jquery.blockUI.js, 修改$.blockUI.defaults 对象相关的代码：

显示源码

// 重写defaults对象中的属性
    $.blockUI.defaults = {

    //弹出的信息
    message:  '<h1>Please wait...</h1>',

    //定义消息框样式
    // $.blockUI.defaults.css = {};

    //默认定义消息框样式Css样式
    css: {
        padding:        0,
        margin:         0,
        width:          '30%',
        top:            '40%',
        left:           '35%',
        textAlign:      'center',
        color:          '#000',
        border:         '3px solid #aaa',
        backgroundColor:'#fff',
        cursor:         'wait'
    },

    // 遮罩样式
    overlayCSS:  {
        backgroundColor: '#000', //颜色
        opacity:         0.6 //透明度
    },

    // 使用$.growlUI完成自动气泡时的样式
    growlCSS: {
        width:    '350px',
        top:      '10px',
        left:     '',
        right:    '10px',
        border:   'none',
        padding:  '5px',
        opacity:   0.6,
        cursor:    null,
        color:    '#fff',
        backgroundColor: '#000',
        '-webkit-border-radius': '10px',  //貌似是圆角
        '-moz-border-radius':    '10px'
    },

    // 是否在非IE浏览器中使IFrame获得焦点，未验证的
    forceIframe: false,

    // 遮罩层的Z-Index值，越大越在上面
    baseZ: 1000,

    // 是否居中
    centerX: true,
    centerY: true,

    //是否允许拉大
    //短的网页上。禁用如果你想防止车身高度的变化
    allowBodyStretch: true,

   //遮罩时是否禁用键盘和鼠标事件
    bindEvents: true,

    // be default blockUI will supress tab navigation from leaving blocking content
    // (if bindEvents is true)
    //遮罩内容的Tab导航是否可用
    constrainTabKey: true,

    //淡入时间
    fadeIn:  200,

       //淡出时间
    fadeOut:  400,

    // time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
    //自动淡出时间
    timeout: 0,

    //disable if you don't want to show the overlay
    //是否自动遮罩
    showOverlay: true,

    // if true, focus will be placed in the first available input field when
    // page blocking
    //自动获得焦点
    focusInput: true,

    //抑制FF/Linux的叠加样式的使用（由于具有不透明的性能问题）
    applyPlatformOpacityRules:true,

    //调用解封已完成时回调方法;
    // onUnblock(element, options)
    onUnblock: null

总结：上面的文字个人认为写的比较烂，但基本的使用没有问题，详尽的支持是官网：http://www./jquery/block/,这个站还有一些其它插件也值得看看。

本文示例下载

posted @ 2011-10-01 23:01 张果阅读(478) 评论(0) 编辑

2011年9月27日

弹出层之3：JQuery.tipswindow

tipswindow是一个很一般的JQuery弹出层插件，但使用简单，有相对漂亮的外观，代码比较通俗。下面介绍使用方法：

1、首先引入该插件相关文件，分别是样式，JQuery库，该插件

2、修改tipswindow.css文件中图片的路径，默认与css文件在同一个目录下。
3、编写代码，如在图片上设置单击事件后放大显示图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
    <link href="tipswindown.css" rel="stylesheet" type="text/css" />
    <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
    <script src="tipswindown.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#imgTest").click(function() {
                tipsWindown("标题：风景", "img:" + this.src, "640", "480", "true", "", "true", "img");
            });
            /*
            function tipsWindown(title, content, width, height, drag, time, showbg, cssName)
            title: 窗口标题
            content:  内容(可选内容为){ text | id | img | url | iframe }
            width: 内容宽度
            height: 内容高度
            drag:  是否可以拖动(ture为是,false为否)
            time: 自动关闭等待的时间，为空是则不自动关闭
            showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示)
            cssName:  [可选参数]附加class名称
            */
        });
    </script>
</head>
<body>
    <img src="../Contents/Images/wallpager/Autumn_A_1.jpg" width="400" height="300" id="imgTest" />
</body>
</html>

其它用法网友总结如下：
1.弹出文本信息提示：
tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")

2.弹出页面中的某个ID的html：
tipsWindown("标题","id:testID","300","200","true","","true","id")

3.弹出图片：
tipsWindown("图片","img:图片路径","250","150","true","","true","img")

4.get加载一个.html文件（也可以是.php/.asp?id=4之类的）：
tipsWindown("标题","url:get?test.html","250","150","true","","true","text");

5.加载一个页面到框架显示：
tipsWindown("标题","iframe:http://","900","580","true","","true","leotheme");

6.弹出一个不能拖动且没有遮罩背景的文本信息层：
tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")

7.弹出一个不能拖动，三秒钟自动关闭的层：
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")

posted @ 2011-09-27 21:31 张果阅读(340) 评论(0) 编辑

2011年9月5日

JQuery扩展插件Validate

jquery.validate是基于jquery的一个B/S客户端验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,大大提高了开发效率，下面是本人做的学习笔记：

JQuery扩展插件Validate—1基本使用方法

JQuery扩展插件Validate—2通过参数设置验证规则

JQuery扩展插件Validate—3通过参数设置错误信息

JQuery扩展插件Validate—4设置错误提示的样式

JQuery扩展插件Validate—5添加自定义验证方法

JQuery扩展插件Validate—6radio、checkbox、select的验证

示例源码下载

注意：validate只是使验证变得方便，简单，本质还是使用js，不论多么强大的js验证，当用户把js禁用或使用机器直接发起请求时都不能确保数据的完整性，所有不要把希望寄托在客户端验证，个人认为每一个客户端验证都要服务器进行再次验证。

posted @ 2011-09-05 18:06 张果阅读(1574) 评论(3) 编辑

JQuery扩展插件Validate—6radio、checkbox、select的验证

radio、checkbox、select的验证其实方法与前面提到没有太大的区别，但问题是错误信息会显示在同一组的第一个元素后面，效果如下所示：

解决这个问题的办法是将错误信息指定到一个特定的位置，validate()方法的参数中可以进行自定义，示例代码如下:

View Code

　　　　　　
            //在上例中新增的部分
            errorPlacement: function(error, element) { //指定错误信息位置
            if (element.is(':radio') || element.is(':checkbox')) {  //如果是radio或checkbox
                    var eid = element.attr('name');  //获取元素的name属性
                    error.appendTo(element.parent());    //将错误信息添加当前元素的父结点后面
                } else {
                    error.insertAfter(element);
                }
            },

            debug: false,  //如果修改为true则表单不会提交
            submitHandler: function() {
                alert("开始提交了");
            }
        });
    });
    </script>

运行结果如下：

此外：如果在参数中加上debug:true则只用于调试表单不会提交到服务器; submitHandler: function() {}将会在表单提交到服务器前执行一些操作;用remote可以进行Ajax验证,好像有个小bug;在使用ASP.NET与validate组合使用时会有一些问题可以参考网友的博文。

1、在ASP.NET中按钮都会解析成submit所有都会触发验证，如果想让某个按钮不触发验证可以加上这个样式：class="cancel"

源码下载

posted @ 2011-09-05 17:35 张果阅读(297) 评论(0) 编辑

JQuery扩展插件Validate—5添加自定义验证方法

从前面的示例中不难看出validate中自带的验证方法足以满足一般的要求，对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则，下面的示例中添加了一个用于正则表达式验证的扩展验证的方法，示例如下：

运行结果：

注意,如果参数有多个可以使用数组，如regex:[1,3,5],方法中可以使用下标访问：params[0]

网友提供的一些扩展验证方法:
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");

// 电话号码验证
jQuery.validator.addMethod("phone", function(value, element) {
    var tel = /^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
    return this.optional(element) || (tel.test(value));
}, "电话号码格式错误");

// 邮政编码验证
jQuery.validator.addMethod("zipCode", function(value, element) {
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误");

// QQ号码验证
jQuery.validator.addMethod("qq", function(value, element) {
    var tel = /^[1-9]\d{4,9}$/;
    return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");

// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");

// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");

// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能输入中文");

// 下拉框验证
$.validator.addMethod("selectNone", function(value, element) {
return value == "请选择";
}, "必须选择一项");

// 字节长度验证
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
    var length = value.length;
    for (var i = 0; i < value.length; i++) {
        if (value.charCodeAt(i) > 127) {
            length++;
        }
    }
    return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

源码下载

posted @ 2011-09-05 17:31 张果阅读(275) 评论(0) 编辑

JQuery扩展插件Validate—4设置错误提示的样式

我们先来使用firebug查看在前面的示例中JS产生的html错误提示:

从图中我们发现错误信息是被放在了一个label标签中，且有一个类样式error，只要为signupform下面的
label标签中的error定css样式，应该就可以修改显示结果了,添加的css代码如下：

运行时显示结果：

源码下载

posted @ 2011-09-05 17:19 张果阅读(220) 评论(0) 编辑

JQuery扩展插件Validate—3通过参数设置错误信息

最终显示在页面上的错误分为两种：第一种是默认错误信息，该信息已经被定义在插件中了，可以手动修改。
第二种是通过参数指定的错误信息，如果没有指定则会使用默认的错误信息。将上个示例的js修改如下：

显示源码

html与前面的示例相同
在上一个示例的基础上添加了一个messages项，为其指定了一个对象类型的值，与rules基本对应,特意没有指定email的错误信息，运行结果如下：

源码下载

posted @ 2011-09-05 17:13 张果阅读(187) 评论(0) 编辑

JQuery扩展插件Validate—2通过参数设置验证规则

在前面示例中使用的的方法简单方便，但没有完全将js与页面结构完全分离，也就是说js依赖了class,下面通过validate()方法的参数设置验证规则将js与页面结构完全分离，代码如下：

显示源码

远行结果：

注意：在ASP.NET中使用这种JS验证方法最好将服务器控件Id替换成客户端Id,如：<%=控件Id.ClientId %>,<%=控件Id.UniqueId>

源码下载

posted @ 2011-09-05 17:07 张果阅读(211) 评论(0) 编辑

JQuery.Boxy

公告