羯瑞。♑ 通过本文主要向大家介绍了slidesjs轮播,validation验证等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
SlidesJs（轮播支持触屏）——官网（http://slidesjs.com）
1.简介
SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。
2.代码
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
</body>
API简介
1.设置轮播的宽高（默认值都为 auto）
$("#slides").slidesjs({
width: 700,
height: 393
});
2.设置从那张开始（默认值为 1）
$("#slides").slidesjs({
start: 3 //这里注意数值从1开始，不是0；默认值0
});
3.设置上下切换按钮
可以自定样式：
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
$("#slides").slidesjs({
navigation: {
active: true, //显示或隐藏前一张后一张切换按钮；默认值为true,
effect: "slide" //设置切换的方式，slide:平滑，fade:渐显；默认值slide
}
});
4.设置分页切换
可以自定样式：
<ul class="slidesjs-pagination"> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li> <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li></ul>
$("#slides").slidesjs({
pagination: {
active: true, //显示或隐藏 分页；默认值true
effect: "slide" //这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide
}
});
5.自动播放
可以自定样式：
<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a>
$("#slides").slidesjs({
play: {
active: true, //开始自动播放功能；默认值true
effect: "slide", //切换方式，跟上面两个切换方式不冲突；默认值slide
interval: 5000, //在每一个幻灯片上花费的时间；默认值5000
auto: false, //开始自动播放；默认值false
swap: true, //显示或隐藏 自动播放和停止按钮；默认值true
pauseOnHover: false, //鼠标移入是否暂停；默认值false
restartDelay: 2500 //重启延迟；默认值2500
}
});
6.效果配置
$("#slides").slidesjs({ effect: {
slide: {
speed: 200 //切换花费的时间；默认值200
},
fade: {
speed: 300, //切换花费的时间；默认值300
crossfade: true //交叉切换，设置为false,会看到背景色；默认值true
}
}
});
7.回调函数
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// 幻灯片载入完成时
},
start: function(number) {
// 切换开始时
},
complete: function(number) {
// 切换结束时
}
}
});
validation（表单验证）——官网（http://jqueryvalidation.org）
以下是针对：jQuery Validation Plugin - v1.15.0 - 2/24/2016 版本
注意：jquery Vaildation Engine 跟以下讲的不是同一款插件
示例：
<form action="" id="demo">
<label for="username">用户名</label><input type="text" name="username" id="username"><br/>
<label for="password">密码</label><input type="text" name="password" id="password"><br/>
<label for="password_confirm">确认密码</label><input type="text" name="password_confirm"><br/>
<label for="email">email</label><input type="text" name="email"><br/>
<input type="submit" value="提交">
</form>
<script>
$(function(){
$('#demo').validate({
rules: { //规则
username: { //这边的username，取得是form里面 name的值
required: true, //必填项
minlength: 2, //最小长度
remote: "http://taojiaqu.com" //url验证配对，只能返回true或false
},
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true,
remote: "http://taojiaqu.com"
}
},
messages: { //错误显示，跟上面的一一对应，没有设置的话，会显示默认的
username: {
required: '请输入用户名',
minlength: '用户名最小为2',
remote: "该用户名被使用了"
},
password: {
required: '请输入密码',
minlength: '密码最小长度为5'
},
password_confirm: {
required: '请确认密码',
minlength: '密码最小长度为5',
equalTo: "两次密码不一致"
},
email: {
required: '请输入邮箱',
email: '您输入的邮箱不对',
remote: '该邮箱已被实用'
}
},
errorElement: "b", //设置错误标签 b
errorPlacement: function(error, element) { //错误操作，error错误信息，element错误input对象
element.after(error);
},
submitHandler: function() { //点击提交表单回调函数，如果还有验证不通过择提示错误信息，不执行该函数
},
success: function(label,element) { //验证通过的函数 //element：input对象 //labal：提示信息的对象
},
highlight: function(element, errorClass, validClass) { //上一个验证不通过的话，执行该函数 //element：input对象 //errorClass：错误class类名 //validClass: 确认class类名
},
unhighlight:function(element, errorClass, validClass){ //上一个验证通过的话，执行该函数
}
})
})
</script>
API
1.1方法
validate() – Validates 核心方法
$('#demo').validate({
rules: {
//。。。
},
messages: {
//。。。
}
})
valid() – 验证表单是否通过，返回true或false
$('#taojiaqu').validate()
alert($('#taojiaqu').valid());
rules() – 读取、添加和删除一个元素的规则
$( "#myinput" ).rules(); //返回一个规则对象$( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
});
$( "#myinput" ).rules( "remove" );//移除全部
$( "#myinput" ).rules( "remove", "min max" );//移除min max
1.2公共方法
Validator.form(