jQuery.scrollable.js點擊下一步按鈕滑動表單注冊分步向導提示代碼



223 890 297



特效描述:jQuery.scrollable.js 下一步按鈕 滑動表單 注冊分步向導 表單提示,

代碼結構

1. 引入JS

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

2. HTML代碼

<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>
<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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 滑動選項卡 滑動切換 文本框 text文本框 步驟 注冊框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

湖北30选5开奖结果走势图表