【图】学习jQuery之旅--jQuery的经典实例应用

jQuery是一个强大的Javascript类库，里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。
在平时的开发中，我们可能经常会用到jQuery。这里总结了一些经典的实例应用。分享给大家。

jQuery=轻松实现表单验证：

在我们的开发中，常会有注册或是添加信息的时候，难免的我们就会需要对表单进行验证。jQuery对此作出了很好的支持。
jQuery代码：

Code
script src="js/jquery.js" type="text/javascript"/script

    script src="js/jquery.validate.js" type="text/javascript"/script

    script type="text/javascript"
$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    $("#signupForm").validate({
        rules: {
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            username: {
                required: "请输入用户名",
                minLength: "用户名至少2个字符"
            },
            password: {
                required: "请输入密码",
                minLength: "密码长度至少为5位"
            },
            confirm_password: {
                required: "请确认密码",
                minLength: "密码长度至少为5位",
                equalTo: "请输入一致的密码"
            },
            email: "请输入正确格式的邮件地址"
        }
    });
});
    /script
HTML代码：

Code
form class="cmxform" id="signupForm" method="get" action=""
        p
            用户名：input id="username" name="username" /
        /p
        p
            密码：input id="password" name="password" type="password" /
        /p
        p
            重复密码：input id="confirm_password" name="confirm_password" type="password" /
        /p
        p
            Email：input id="email" name="email" /
        /p
        p
            input class="submit" type="submit" value="Submit"/
        /p
/form代码很如意理解，简单说下：
这里需要将Form的id="signupForm"，然后就可以对需要尽心验证的控件进行规则的设定：
username: {required: true, minlength: 2}。username是空间的id，required意思是不能为空，最小值不能小于2。从下面的message的设定中，大家也应该知道是什么意思了。
恩，就是这么简单。这样就可以实现对表单进行验证。jquery.validate.js
运行效果：

jQuery + HttpHandler =图片裁剪

大家可能在园子中看过这个不错的Demo。这里也强烈的推荐一下，很实用的功能。
jQuery为我们提过了一个很好的图片区域选取的插件：jquery.bitmapcutter.js。但是美中不足的是我没有找到区域图片截取的功能。刚好有大牛帮我们完善了这一点。
这里我们需要引入用于剪切图片的dll，并在config中声明：

Code
httpHandlers
add path="scissors.axd"
               verb="*"
               type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core"
               validate="false"/
      /httpHandlers

jQuery代码：

Code
script src="js/jquery-1.3.1.min.js" type="text/javascript"/script

script src="js/jquery.bitmapcutter.js" type="text/javascript"/script

script type="text/javascript"
    $().ready(function() {
        $.fn.bitmapCutter({
            src: 'Photo/P1010005.JPG',
            renderTo: '#container',
            cutterSize: { width: 220, height: 220 },
            onGenerated: function(src) {
                alert(src);
            },
            rotateAngle: 90,
            lang: { clockwise: '顺时针旋转{0}度.' }
        });
    })
/script

运行效果：

详细的开发说明参看：http://www.cnblogs.com/fromearth/archive/2009/05/27/1490833.html
上一页12 下一页