1. fullpage 插件(全屏)
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,
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: 700;
}
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);
})