jQuery.scrollable.js点击下一步按钮滑动表单注册分步向导提示代码



214 854 285



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

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