jQuery超炫注册三部曲

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

分类：表单代码 > 注册登录框难易：初级

查看演示下载资源下载积分： 26 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

HTML

首先我们引入jquery库和滚动插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="scrollable.js"></script>

接着我们创建注册菜单，和菜单对应的内容.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>

jQuery

调用scrollable.js插件，非常简单：

$(function(){ 
    $("#wizard").scrollable(); 
});

注册时我们要切换tab样式和验证表单：

$(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; 
                } 
            } 
        } 
    }); 
});