jQuery注册向导

scrollable.js插件带您一起体验可以滚动的分步注册向导，用户体验十分友好。

创建注册菜单，和菜单对应的内容.page：

<form action="#" method="post">  
  <div id="wizard">  
    <ul id="status">  
        <li class="active"><strong>1.</strong>创建账户</li>  
        <li><strong>2.</strong>填写联系信息</li>  
        <li><strong>3.</strong>完成</li>  
    </ul>  
  
    <div class="items">  
        <div class="page">  
           -----任意html内容-----  
           <div class="btn_nav">  
              <input type="button" class="next right" value="下一步»" />  
           </div>  
        </div>  
        <div class="page">  
           -----任意html内容-----  
           <div class="btn_nav">  
               <input type="button" class="prev" style="float:left" value="«上一步" />  
               <input type="button" class="next right" value="下一步»" />  
           </div>  
        </div>  
        <div class="page">  
           -----任意html内容-----  
           <div class="btn_nav">  
               <input type="button" class="prev" style="float:left" value="«上一步" />  
               <input type="button" class="next right" id="sub" value="确定" />  
           </div>  
        </div>  
    </div>  
  </div>  
</form>

插件调用：

$(function(){  
    $("#wizard").scrollable({  
        onSeek: function(event,i){ //切换tab样式  
            $("#status li").removeClass("active").eq(i).addClass("active");  
        },  
        onBeforeSeek:function(event,i){ //验证表单  
            if(i==1){  
                var user = $("#user").val();  
                if(user==""){  
                    alert("请输入用户名！");  
                    return false;  
                }  
                var pass = $("#pass").val();  
                var pass1 = $("#pass1").val();  
                if(pass==""){  
                    alert("请输入密码！");  
                    return false;  
                }  
                if(pass1 != pass){  
                    alert("两次密码不一致！");  
                    return false;  
                }  
            }  
        }  
    });  
});

教程
演示
下载:idea: