利用jQuery實現分步注冊向導代碼



39 154 52



特效描述:利用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

加群請備注:從官網了解到

老夫子电子