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() ? 验证表单 Validator.element() ? 验证指定的 input validator.element( "#myselect" ); Validator.resetForm() ? 重置表单 Validator.showErrors() ? 显示错误信息 Validator.numberOfInvalids() ? 返回错误的字段数
1.3静态方法
jQuery.validator.addMethod( name, method [, message ] ) ? 添加自定义验证方法 //返回true或falsejQuery.validator.addMethod("domain", function(value, element) { return this.optional(element) || /^http://taojiaqu.com/.test(value); }, "错误信息"); jQuery.validator.format( template, argument, argumentN… ) ? 格式化字符串 var format=jQuery.validator.format("{0}--{1}--{2}"); console.log(format("a","b","c")); //a--b--c jQuery.validator.setDefaults() ? 修改默认设置 jQuery.validator.setDefaults({ debug: true //所有的都设置debug模式 }); jQuery.validator.addClassRules() ? 统一添加某个类的 校验规则 //添加class为name的校验规则:必填,最小长度为2jQuery.validator.addClassRules("name", { required: true, minlength: 2 });
2.选择器
:blank ? 选择value值为空的input
:filled ? 选择value有值的input
:unchecked ? 选择未被选中的 checkbox
3.验证规则
required ? 必填,默认true
remote ? 远程请求验证,请求地址返回true或false
minlength ? 最小长度,中文字算1个字符
maxlength ? 最大长度
rangelength ? 给定长度范围,例:[2,5]
min ? 最小值,数值型
max ? 最大值
range ? 给定最大最小取值范围,例:[2,100]
step ? 设置步骤
email ? 必须是一个邮箱email格式
url ? 必须是一个地址url
date ? 必须输入正确格式的日期
dateISO ? 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number ? 必须输入合法的数字(负数,小数)
digits ? 必须输入整数
equalTo:'#abc' ? 输入值必须和#abc相同
以下验证规则需加载——additional-methods.min.js
accept ? 验证上传的文件MINE类型,例:accept:"image" ;多种类型逗号(,)隔开
creditcard ? 验证信用卡卡号
extension ? 验证上传的文件的后缀,例:extension:"dll|exe" ;;多种类型逗号(|)隔开
phoneUS ? 验证是否为美国号码
require_from_group ? 设置类目中有N个是必填项
mobile_phone: { require_from_group: [1, ".phone-group"] //这边的1表示 三项中只需要填写一项就可以,后面是class名 }, home_phone: { require_from_group: [1, ".phone-group"] }, work_phone: { require_from_group: [1, ".phone-group"] }
4.validate()方法的配置项
debug — 开启关闭debug模式,阻止提交
$(".selector").validate({ debug: true });
submitHandler — 通过验证后运行的函数,可以加上表单的提交方法
$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } }); $(".selector").validate({ submitHandler: function(form) { form.submit(); } });
invalidHandler — 验证没通过,提交时触发的方法
$(".selector").validate({ invalidHandler: function(event, validator) { //event :自定义事件对象 //validator:当前验证的实例 } });
ignore — 对某些元素不进行验证
$("#myform").validate({ ignore: ".ignore" });
rules — 定义校验规则,有个隐藏的参数 depends:在满足什么条件下才验证次规则
$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } } }); $(".selector").validate({ rules: { name: { depends:function(element){reruen true;} //返回true的话才校验,name是否必填 }, email: { email: true, min:{ param:15, //单独值的话 用param 代替 depends:function(element){reruen true;} } } } });
messages — 定义提示信息
$(".selector").validate({ rules: { name: "required", email: { required: true, email: true } }, messages: { name: "请输入您的名字", email: { required: "请输入的的邮箱", email: "请输入正确的邮箱地址" } } });
groups — 对一组元素的验证,用一个错误提示,用errorPlacement 控制出错信息的位置
$("#myform").validate({ groups: { username: "fname lname" }, errorPlacement: function(error, element) { if (element.attr("name") == "fname" || element.attr("name") == "lname" ) { error.insertAfter("#lastname"); } else { error.insertAfter(element); } } });
onsubmit —是否在提交时验证
onfocusout —是否在获取焦点时验证
onkeyup — 是否在敲击键盘时验证
onclick — 是否在鼠标点击数验证
focusInvlid — 提交表单,未通过验证的表单是否获得焦点(默认第一个)
focusCleanup — 提交表单,未通过验证的表单是否移除错误信息
errorClass — 指定错误提示的class类名
validClass — 指定验证通过的class类名
errorElement — 使用什么标记错误标签
$(".selector").validate({ errorElement: "em" }); //<em>错误信息</em>
wrapper — 使用什么标签把上面的errorElement 包起来
errorLableContainer — 把错误信息统一放在一个容器里面
errorContainer — 显示或隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏
showErrors — 可以显示总的多少个未通过验证
errorPlacement:function(error,element) — 自定义错误信息的位置,error:错误信息、element:验证的元素
success — 要验证的元素通过验证后的回调
highlight — 可以为未通过的元素加效果
unhighlight — 可以为通过的元素加效果
以上所述是小编给大家介绍的jQuery插件学习教程之SlidesJs轮播+Validation验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!