jQuery Steps 实现滑动切换效果

jQuery提供的steps函数非常好用。简单讲一下如何使用。

<form id="example-form" action="#">
    <div>
        <h3>Account</h3>
        <section>
            <label for="userName">User name *</label>
            <input id="userName" name="userName" type="text" class="required">
            <label for="password">Password *</label>
            <input id="password" name="password" type="text" class="required">
            <label for="confirm">Confirm Password *</label>
            <input id="confirm" name="confirm" type="text" class="required">
            <p>(*) Mandatory</p>
        </section>
        <h3>Profile</h3>
        <section>
            <label for="name">First name *</label>
            <input id="name" name="name" type="text" class="required">
            <label for="surname">Last name *</label>
            <input id="surname" name="surname" type="text" class="required">
            <label for="email">Email *</label>
            <input id="email" name="email" type="text" class="required email">
            <label for="address">Address</label>
            <input id="address" name="address" type="text">
            <p>(*) Mandatory</p>
        </section>
        <h3>Hints</h3>
        <section>
            <ul>
                <li>Foo</li>
                <li>Bar</li>
                <li>Foobar</li>
            </ul>
        </section>
        <h3>Finish</h3>
        <section>
            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
        </section>
    </div>
</form>

<-- js 代码 -->
<script>
var form = $("#example-form");//得到from 表单

//验证表单的正确性
form.validate({
    errorPlacement: function errorPlacement(error, element) { element.before(error); },
    rules: {
        confirm: {
            equalTo: "#password"
        }
    }
});
//得到表单字标签div并实现阶梯
form.children("div").steps({
    headerTag: "h3",     //设置头标签  也就是默认情况下的标题
    bodyTag: "section",  //设置身体标签 就是具体滑动的块
    transitionEffect: "slideLeft", //设置滑动方向
    onStepChanging: function (event, currentIndex, newIndex) //当滑动时的事件，点击上一步下一步时触发
    {
        form.validate().settings.ignore = ":disabled,:hidden";
        return form.valid();
    },
    onStepChanged: function(event, newIndex) {   //当滑动动作 完成后触发

    },
    onFinishing: function (event, currentIndex)  //当点击完成是触发 
    {
        form.validate().settings.ignore = ":disabled";
        return form.valid();
    },
    onFinished: function (event, currentIndex) //当完成以后触发
    {
        alert("Submitted!");
    }
});
</script>