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);

})

最新文章

  1. 数据存储_ SQLite（3）
  2. Silicon C8051F340之时钟系统
  3. 彻底搞定char/wchar_t/unicode
  4. 在Linq to Entity 中使用lambda表达式来实现Left Join和Join
  5. iOS之 随笔-静态库创建Xcode7
  6. 使用SVN提示“工作副本已经锁定”的解决办法
  7. 本地或者是koala软件编译less文件为css
  8. 完全步卸载oracle11g步骤
  9. C# static 干货全解析
  10. nginx的请求接收流程（一）
  11. iOS判断机型
  12. 古老server源代码迁移到新server
  13. highcharts设置Y轴范围及根据Y轴范围设置不同颜色
  14. Assert中的静态方法
  15. LeetCode之“动态规划”：Unique Binary Search Trees &amp;&amp; Unique Binary Search Trees II
  16. Kotlin 的优缺点
  17. mvn打包到私服的命令
  18. nodejs模块——网络编程模块
  19. 10.2.翻译系列：使用Fluent API进行属性映射【EF 6 Code-First】
  20. topcoder srm 400 div1

热门文章

  1. keras Lambda 层
  2. maven windows环境nexus3.0私服搭建
  3. Pig order by用法举例
  4. Django Redis配合Mysql验证用户登录
  5. PyQt4（简单计算器）
  6. 6.servlet和jsp的区别
  7. 国内一元钱 正常搭建android开发环境
  8. JBoss jmx-console中的秘密
  9. Oracle GoldenGate DDL 详细说明 使用手册(较早资料)
  10. 转：.net设计模式之单例模式