最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery超炫注册三部曲

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-18 23:05浏览(1604)

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

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

jQuery超炫注册三部曲
分类:表单代码 > 注册登录框 难易:初级
查看演示

加我微信,拉你进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; 
                } 
            } 
        } 
    }); 
});
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/57.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    12-13 09:25
    DawnZhao
    可以可以,没毛病!收藏一下
1 2