jQuery插件学习教程之SlidesJs轮播+Validation验证


Posted in Javascript onJuly 12, 2016

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验证,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
Prototype框架详解
Nov 25 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
JavaScript中的事件委托及好处
Jul 12 #Javascript
原生js实现class的添加和删除简单代码
Jul 12 #Javascript
JavaScript动态添加事件之事件委托
Jul 12 #Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 #Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 #Javascript
javascript加减乘除的简单实例
Jul 12 #Javascript
浅谈javascript中的加减时间
Jul 12 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
python实现保存网页到本地示例
2014/03/16 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python any()函数的使用方法
2019/10/28 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
考察现实表现材料
2014/05/19 职场文书
家长会标语
2014/06/24 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
升学宴家长答谢词
2015/09/29 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
python 安全地删除列表元素的方法
2022/03/16 Python
详解Python中的for循环
2022/04/30 Python