jQuery Steps 슬라이딩 전환

10964 단어 jQuery
jQuery에서 제공하는 steps 함수는 매우 유용합니다.간단하게 어떻게 사용하는지 설명해 주세요.
<form id="example-form" action="#">
    <div>
        <h3>Accounth3>
        <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>(*) Mandatoryp>
        section>
        <h3>Profileh3>
        <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">Addresslabel>
            <input id="address" name="address" type="text">
            <p>(*) Mandatoryp>
        section>
        <h3>Hintsh3>
        <section>
            <ul>
                <li>Fooli>
                <li>Barli>
                <li>Foobarli>
            ul>
        section>
        <h3>Finishh3>
        <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>

좋은 웹페이지 즐겨찾기