1.日期插件
1)引入datepicker插件相关的js文件和css文件
直接将文件夹引入,导入WdatePicker.js即可
2)在input增加class=’Wdate’,绑定单击事件,函数名WdatePicker()
3)可控参数:
{
dateFmt 日期显示格式,
readOnly 是否只读, input输入框是否可改
isShowWeek 是否显示一列今年的第几周,周数
}
将json对象传入WdatePicker参数
<script type="text/javascript" src="WdatePicker.js所在文件路径">
//dateFmt默认yyyy-MM-dd,readOnly默认false ,isShowWeek默认false
生日<input class="Wdate" id="dt" type="text" onclick="WdatePicker()"/>
//传入json对象
生日:<input style='width:200px' class="Wdate" id="dt" type="text" onclick="WdatePicker({dateFmt:'yyyy年MM月dd日 HH:mm:ss',readOnly:true,isShowWeek:true})"/>
必须将文件夹引入,因为内部有css,背景颜色等等
2.放大镜插件
1)引入放大镜插件的js和css文件
<link rel="stylesheet" href="jquery.jqzoom.css" type='type/css'>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.jqzoom-core.js"></script>
2)将小图片放在大图片的超链接中
<a id='bg' href="image/big.jpg" >
<img alt="" src="image/small.jpg" />
</a>
3)通过jquery代码添加放大镜效果
$(function(){
//文档加载完毕之后,添加放大镜效果
$('#bg').jqzoom({
});
})
4)可选参数
{
zoomWidth:200,//放大后的宽度
zoomHeight:400//放大后的高度
}
$(function(){
//文档加载完毕之后,添加放大镜效果
$('#bg').jqzoom({
zoomWidth:200,
zoomHeight:200
});
})
3.表单验证插件
1.引入相关的js文件
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="message_zh_CN.js"></script>
2.对form添加validate方法
$('#form').validate({
rules:{
name属性值:{规则}
},
messages:{
验证失败后显示的文字(那个属性:验证属性出现问题后显示的文字)
}
})
rules(设置验证规则)
messages(设置验证失败后的文字),可以不设置,使用默认的文字
rules(设置验证规则):(请参照message_zh_CN.js中内容)
{
required:true, //必填
minlength:数字, //字符的最小长度
email:true , //邮箱格式
rangelength:[1,2],//字符串的长度是1到2之间的
equalTo:'#若与A元素相同,则写A的id值'
},
messages(设置验证失败后的文字):{
username:{required:'用户名不能为空',minlength:'用户名长度不能少于6位'},
pwd:{required:'密码不能为空'},
repwd:{required:'确认密码不能为空',equalTo:'两次密码不一致'}
}
以下为实例
$(function(){
$('#fm1').validate({
rules:{ //定义验证规则
username:{required:true,minlength:6},
pwd:{required:true},
repwd:{required:true,equalTo:'#pwd1'},//repwd与pwd必须一致,所以用equalTo方法且取pwd的id
email:{required:true,email:true}
},
messages:{
username:{required:'用户名不能为空',minlength:'用户名长度不能少于6位'},
pwd:{required:'密码不能为空'},
repwd:{required:'确认密码不能为空',equalTo:'两次密码不一致'}
}
});
})