jQuery 插件运用

1. fullpage 插件（全屏）

官网：http://www.jq22.com/

jqueryui 官网：http://jqueryui.com/draggable/

1.1 使用方法

• 引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script>
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

• html代码

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section">第四屏</div>
</div>

• js 代码

$(function(){
    $('#fullpage').fullpage();
});

1.2 配置

• 选项

verticalCentered	字符串	true	内容是否垂直居中
resize	布尔值	false	字体是否随着窗口缩放而缩放
slidesColor	函数	无	设置背景颜色
anchors	数组	无	定义锚链接
scrollingSpeed	整数	700	滚动速度，单位为毫秒
easing	字符串	easeInQuart	滚动动画方式
menu	布尔值	false	绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation	布尔值	false	是否显示项目导航
navigationPosition	字符串	right	项目导航的位置，可选 left 或 right
navigationColor	字符串	#000	项目导航的颜色
navigationTooltips	数组	空	项目导航的 tip
slidesNavigation	布尔值	false	是否显示左右滑块的项目导航
slidesNavPosition	字符串	bottom	左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor	字符串	#fff	左右滑块的箭头的背景颜色
loopBottom	布尔值	false	滚动到最底部后是否滚回顶部
loopTop	布尔值	false	滚动到最顶部后是否滚底部
loopHorizontal	布尔值	true	左右滑块是否循环滑动
autoScrolling	布尔值	true	是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow	布尔值	false	内容超过满屏后是否显示滚动条
css3	布尔值	false	是否使用 CSS3 transforms 滚动
paddingTop	字符串	0	与顶部的距离
paddingBottom	字符串	0	与底部距离
fixedElements	字符串	无
normalScrollElements		无
keyboardScrolling	布尔值	true	是否使用键盘方向键导航
touchSensitivity	整数	5
continuousVertical	布尔值	false	是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor	布尔值	true
normalScrollElementTouchThreshold	整数	5

• 方法

moveSectionUp()	向上滚动
moveSectionDown()	向下滚动
moveTo(section, slide)	滚动到
moveSlideRight()	slide 向右滚动
moveSlideLeft()	slide 向左滚动
setAutoScrolling()	设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()	添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()	添加或删除键盘方向键控制
setScrollingSpeed()	定义以毫秒为单位的滚动速度

• 回调函数

afterLoad	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave	滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数： index 是离开的“页面”的序号，从1开始计算； nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

1.3 实际运用

• 将结构和需要的包放入 index.html，修改路径

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

• 自定义menu 菜单

html 代码

<ul id="nemu">
　　<li data-menuanchor="page1"><a href="#page1">导航一</a></li>
　　<li data-menuanchor="page2"><a href="#page2">导航二</a></li>
　　<li data-menuanchor="page3"><a href="#page3">导航三</a></li>
　　<li data-menuanchor="page4"><a href="#page4">导航四</a></li>
</ul>

css 代码

*{
    margin:;
    padding:;
}
#nemu{
    width: 100%;
    height: 40px;
    position: fixed;
    top:;
    left:;
    z-index:;
}
#nemu li{
    list-style: none;
    float:left;
    height: 40px;
    line-height: 40px;
    width: 100px;
    margin:0 10px;
    background: pink;
    text-align: center;
}

2. validate 插件（表单验证）

2.1 在控件中设计验证表单

<form action="02.php" method="post" id="myForm">
    用户名<input type="text" name="username" id="username"><br>
    密码<input type="password" name="pass" id="pass"><br>
    重复密码<input type="password" name="repass" id="repass"><br>
    邮箱<input type="text" name="email" id="email"><br>
    网址<input type="text" name="url" id="url"><br>
    <input type="submit" value="注册">
</form>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery-validate.min.js"></script>

2.2 在js文件中写入规则（rules）

$(function () {
    $("#myForm").validate({
        rules:{
            username:{
                required:true,
                maxlength:8,
                minlength:2
　　　　　　　 },
            pass:{
                required:true,
　　　　　　　　　 rangelength:[5,10],//相当于 maxlength:8,minlength:2
            },
            repass:{
                required:true,
                equalTo:"#pass"
            },
            email:{
                required:true,
                email:true
            },
            url:{
                required:true,
                url:true
            }
        },
    });
})

注：rules 内用的是html 文件中的 name 名，而非 id 名

2.3 验证规则参考

1	required:true	必须输入的字段。
2	remote:"check.php"	使用 ajax 方法调用 check.php 验证输入值。
3	email:true	必须输入正确格式的电子邮件。
4	url:true	必须输入正确格式的网址。
5	date:true	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO:true	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number:true	必须输入合法的数字（负数，小数）。
8	digits:true	必须输入整数。
9	creditcard:	必须输入合法的信用卡号。
10	equalTo:"#field"	输入值必须和 #field 相同。
11	accept:	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength:5	输入长度最多是 5 的字符串（汉字算一个字符）。
13	minlength:10	输入长度最小是 10 的字符串（汉字算一个字符）。
14	rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
15	range:[5,10]	输入值必须介于 5 和 10 之间。
16	max:5	输入值不能大于 5。
17	min:10	输入值不能小于 10。

例：用 AJAX 将数据传入后台验证

//rules中添加的内容
username:{
　　required:true,
　　remote: {
　　　　url: "1.php",     //后台处理文件
　　　　type: "post",               //数据发送方式
　　　　dataType: "json",           //接受数据格式
　　　　data: {                     //传的数据
　　　　　　username: function() {
　　　　　　　　return $("#username").val();//返回结果为 true 或 false
　　　　　　}
　　　　}
　　}
}

//messages 中添加
username:{
　　required:"用户名不能为空",
　　remote :"用户名已存在"
}

2.4 修改错误提示与验证通过的样式

• 简单页面验证

css代码

/*.valid是设置验证成功以后的样式*/
.valid{
　　border: 1px solid yellow;
}
/*.error是设置验证失败以后的样式 而且错误信息默认是用label装的*/
label.error {
　　color: red;
　　border: 1px solid #ccc;
　　padding:0px 5px;
　　font-weight:;
}

js 代码

$(function () {
    $("#myForm").validate({
        rules:{…},
        messages:{
            username:{
                required:"用户名不能为空",
                maxlength:"最多不能多于8位",
                minlength:"最少不能少于2位"
            },
            pass:{
                required:"密码不能为空",
                rangelength:"密码最小5位，最大10位"
            },
            repass:{
                required:true,
                equalTo:"两次输入密码不一致"
            },
            email:{
                required:true,
                email:"必须输入正确的邮箱格式"
            },
            url:{
                required:true,
                url:"必须输入正确的网址格式"
            }
       }
    });
})

• 自定义样式
  • 　　错误样式
    • errorElement 对应字符串标签（放置错误信息），一般设置为 span
    • errorPlacement 对应函数，设置提示信息的位置，两个参数：参数1，error 指放置错误的标签；参数2，element 指用户当前选中的标签

$(function(){
　　$("myForm").validate({
　　　　errorElement: "span",//设置标记错误的标签
　　　　errorPlacement: function(error, element) {
　　　　　　error.appendTo(element.parent());  //设置位置：追加到选择标签的后面
　　　　}
　　})
}

• • 　　成功样式
    • success 通过验证后的动作，若跟字符串，将被当作 css 类，也可跟函数（默认形参label，指放置成功信息的标签）。

$(function(){
　　$("myForm").validate({
　　　　//后面跟函数
　　　　success: function(label) {
　　　　　　label.text("ok!").addClass("valid");
　　　　}
　　})
})

$(function(){
　　$("myForm").validate({
　　　　//后面跟字符串，然后在css中对该类进行样式设置
　　　　success: "valid"
　　})
})

注：errorElement，errorPlacement，success 与rules 平级

css 代码

/*定义错误标签样式*/
span.error{
    background:url(…);
}
/*定义成功标签样式*/
span.success{
    background:url(…);
}

2.5 自定义验证规则

• 添加自定义规则的方法，语法如下：

jQuery.validator.addMethod(“自定义规则名称”,function(value，element){
　　//满足条件时，返回判断值
　　//自定义一个正则表达式，利用正则.test(value)返回结果为布尔值
　　var reg= var tel = /^[\u4e00-\u9fa5\w\-]{4,20}$/;
　　//this.optional(element) 若是标签选择状态，则返回true，即用户是保持了表单的required状态
　　return this.optional(element)||reg.test(value); },”自定义错误提示文字”)

例：

jQuery.validator.addMethod("checkuser",function(value,element){
    var reg=/^[\u4e00-\u9fa5\w\-]{4,20}$/;
    return this.optional(element)||reg.test(value);
},"用户名输入4-20位中文数字字母下划线")；

• 写入 rule

例：（自定义规则：true）

rules:{
    username:{
        required:true,
        checkuser:true
    }
}

2.6 实现随机数验证码

• 自定义验证码规则

jQuery.validator.addMethod("checkverify",function(value,element,param){
    return this.optional(element)||eval(param)==value;
},"验证码错误")；

• 生成随机数

$(function(){
    var x = Math.round(Math.random()*10);
})