jQuery超炫注册三部曲

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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