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 配置

• 选项

• 方法

• 回调函数

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 验证规则参考

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:"密码不能为空",
                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:"必须输入正确的网址格式"
            }
       }
    });
})