1. fullpage 插件（全屏）
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:0; padding:0; } #nemu{ width: 100%; height: 40px; position: fixed; top:0; left:0; z-index:99; } #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, 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。 |
2.4 修改错误提示与验证通过的样式
css代码
/*.valid是设置验证成功以后的样式*/ .valid{ border: 1px solid yellow; } /*.error是设置验证失败以后的样式 而且错误信息默认是用label装的*/ label.error { color: red; border: 1px solid #ccc; padding:0px 5px; font-weight: 700; }
js 代码
$(function () { $("#myForm").validate({ rules:{…}, messages:{ username:{ required:"用户名不能为空", maxlength:"最多不能多于8位", minlength:"最少不能少于2位" }, pass:{ required:"密码不能为空", maxlength:"最大不能大于8位", minlength:"最小不能小于2位", remote : { url : 'user.php', type :'post', data:{ user: function(){ return $('#username').val(); }, } } }, repass:{ required:true, equalTo:"两次输入密码不一致" }, email:{ required:true, email:"必须输入正确的邮箱格式" }, url:{ required:true, url:"必须输入正确的网址格式" } } }); })