jQuery插件学习教程之SlidesJs轮播+Validation验证
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验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
原生JS轮播图插件
代码分两个部分:1.HTML部分,根据注释处理即可:2.play.js插件部分,引到HTML里面即可. 1.HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>/*style标签及其内的内容,在实际项目中可以不要*/ * { margin: 0; p
-
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播(carousel)插件来展示文章中的图片.我在程序中自动抓取文章的第一张图片作为该轮播控件中要显示的图片,由于文章的图片大小不一,而轮播插件的大小基本是固定的,所以展示的时候图片出现了变形.在网上找了很多中方式也没有解决(过程曲折,不再赘述),直到找到了这款Jquery的缩放插件--jqthumb.js.下面来看看如何使用它以及如何利用它来控制轮播控件中图片的大小,而且能够做到不变形,可以显示图片的主要部分(类似于微信朋友圈的图片混排效果--不知
-
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件. 在这12个jQuery插件中,最常用的有图片轮播car
-
js轮播图的插件化封装详解
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u
-
基于cssSlidy.js插件实现响应式手机图片轮播效果
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"> <figure id="slidy"> <a href='#' target='_blank'><img src="img/2.jpg" alt="jQuery.nicescroll美化滚动条" data-cap
-
原生JS实现旋转木马式图片轮播插件
本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果 由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
-
BootStrap的JS插件之轮播效果案例详解
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 案例 下面展示的就是此插件和相关组件制作的轮播案例. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class
-
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
深入解析js轮播插件核心代码的实现过程
轮播效果在网页中用的很多,swiper是其中最有代表性的作品,它支持水平和竖直滑动,还有反弹效果,兼容移动端和pc端.当然代码量也是相当大的,单是js就有5300行(3.4.0的未缩版本),若不考虑代码利用率和加载速度直接就用了,在移动端比较慎重,比如京东(m.jd.com)的轮播就没有用它,而是自己实现了类似的功能,代码量很少的样子(格式化之后看起来二三百行左右的样子).那么这个功能如果自己来实现,要怎么做呢? 准备工作 1. 准备几张图片(我这里放了四张) 2. 搭建目录结构(html+cs
-
非常优秀的JS图片轮播插件Swiper的用法
最近在一个微信公众号中用到了swiper图片轮播插件.接下来为大家介绍插件的用法 首先需要下载Swiper 1:加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body