利用jQuery实现分步注册向导代码



35 137 46



特效描述:利用jQuery实现 分步注册向导,利用jQuery实现分步注册向导代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/main.css" />

2. 引入JS

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

3. HTML代码

<div id="main">
   <h2 class="top_title">jQuery实现一个滚动的分步注册向导</h2>
   <p style="height:24px; line-height:24px; margin:16px">注:这只是一个演示demo,51前端不会记录用户输入的信息,请放心使用。</p>
   <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">
               <h3>创建一个账户<br/><em>请填写您的注册账户信息,用于登录。</em></h3>
               <p><label>用户名:</label><input type="text" class="input" id="user" name="username" /></p>
               <p><label>密码:</label><input type="password" class="input" id="pass" name="password" /></p>
               <p><label>确认密码:</label><input type="password" class="input" id="pass1" name="password1" /></p>
               <div class="btn_nav">
                  <input type="button" class="next right" value="下一步&raquo;" />
               </div>
            </div>
			<div class="page">
               <h3>填写联系信息<br/><em>请告诉我们您的联系方式。</em></h3>
               <p><label>E-mail:</label><input type="text" class="input" name="email" /></p>
               <p><label>QQ:</label><input type="text" class="input" name="qq" /></p>
               <p><label>手机号码:</label><input type="text" class="input" name="mobile" /></p>
               <div class="btn_nav">
                  <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                  <input type="button" class="next right" value="下一步&raquo;" />
               </div>
            </div>
			<div class="page">
               <h3>完成注册<br/><em>点击确定完成注册。</em></h3>
               <h4>Txcomcom欢迎您!</h4>
               <p>请点击“确定”按钮完成注册。</p>
               <br/>
               <br/>
               <br/>
               <div class="btn_nav">
                  <input type="button" class="prev" style="float:left" value="&laquo;上一步" />
                  <input type="button" class="next right" id="sub" value="确定" />
               </div>
            </div>
		</div>
	</div>
</form><br />
</div>
<script type="text/javascript">
$(function(){
	$("#wizard").scrollable({
		onSeek: function(event,i){
			$("#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;
				}
			}
		}
	});
	$("#sub").click(function(){
		var data = $("form").serialize();
		alert(data);
	});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 切换按钮 表单 表单美化 表单插件 表单美化插件 滑动选项卡 滑动切换 注册框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到