【 tulaoshi.com - Web开发 】
jQuery是一个强大的Javascript类库，里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。
在平时的开发中，我们可能经常会用到jQuery。这里总结了一些经典的实例应用。分享给大家。
jQuery=轻松实现表单验证：
在我们的开发中，常会有注册或是添加信息的时候，难免的我们就会需要对表单进行验证。jQuery对此作出了很好的支持。
jQuery代码：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）
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中声明：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）Code
httpHandlers
add path="scissors.axd"
verb="*"
type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core"
validate="false"/
/httpHandlersjQuery代码：
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 下一页
