jQuery电网申请分步骤流程代码



306 1222 408



特效描述:申请 分步骤流程,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/onlinebusinesshall/newexpand/css/index-debug.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="static/lib/jquery-step/css/jquery.step.css">

2. 引入JS

<script src="static/lib/jquery/1.8/jquery.min.js"></script>
<script src="static/lib/jquery-step/js/jquery.step.js"></script>

3. HTML代码

<div class="step-body" id="myStep">
	<div class="step-header" style="width:80%">
		<ul>
			<li><p>阅读流明</p></li>
			<li><p>用电申请</p></li>
			<li><p>完成</p></li>
		</ul>
	</div>
	<div class="step-content">
		<div class="step-list">
			<div class="page-panel-title">
					<h3 class="page-panel-title-left">流程说明</h3>
					<h3 class="page-panel-title-right" >注:黄色为需要你配合的环节</h3>
			</div>
			<div class="intro-flow">
				<div class="intro-list">
					<div class="intro-list-left">
						业务受理
					</div>
					<div class="intro-list-right">
						<span>1</span>
						<div class="intro-list-content">
							无需您出门,请备齐相关资料,并保持联系电话的畅通,我们会及时受理您的申请,与您预约进行现场堪察,届时会同步收取相关资料。若资料不齐全的,需要您亲自到实体营业厅补交。
						</div>
					</div>
				</div>
				<div class="intro-list intro-list-active">
					<div class="intro-list-left">
						现场堪察
					</div>
					<div class="intro-list-right">
						<span>2</span>
						<div class="intro-list-content">
							根据实际现场堪察内容补充。
						</div>
					</div>
				</div>
				<div class="intro-list">
					<div class="intro-list-left">
						现场堪察答复客户
					</div>
					<div class="intro-list-right">
						<span>3</span>
						<div class="intro-list-content">
							我局将就电网对您业务是否具备供电能力进行勘察,并向您回复相关情况。
						</div>
					</div>
				</div>
				<div class="intro-list">
					<div class="intro-list-left">
						申报俊工检查
					</div>
					<div class="intro-list-right">
						<span>4</span>
						<div class="intro-list-content">
							我局将对受电工程进行竣工检验。
						</div>
					</div>
				</div>
				<div class="intro-list intro-list-active">
					<div class="intro-list-left">
						供用电合同及装(换)计量装置
					</div>
					<div class="intro-list-right">
						<span>4</span>
						<div class="intro-list-content">
							我局将与您预约上门签订供用电合同、装表接电的事宜,请保持电话申能并留意接收。为保障双方的合法权益,请业主在场签约(盖章)
						</div>
					</div>
				</div>
				<div class="intro-list intro-list-last">
					<div class="intro-list-left">
						完成
					</div>
					<div class="intro-list-right">
						<span>4</span>
						<div class="intro-list-content">
							您可以享受到安全可靠的电源 了。请在网厅进行注册,并绑定您的用户编号,以后您可以便捷地使用电费查询、电费缴纳、账单订阅等服务。
						</div>
					</div>
				</div>
			</div>
			<div class="footer-btn">
				<div class="common-btn">
					<a href="javascript:void(0);" id="applyBtn">马上申请</a>
				</div>
			</div>
		</div>
		<div class="step-list">
			<div class="footer-btn">
				<div class="common-btn">
					<a href="javascript:void(0);" id="submitBtn">提交</a>
				</div>
			</div>
		</div>
		<div class="step-list">
			<div class="apply-finish">
				<div class="apply-finish-header">
					<img src="images/success.png">
					<div class="apply-finish-msg">恭喜您,提交成功!</div>
				</div>
				<div class="apply-finish-footer">
					<p>尊敬的用户,您已提交成功,受理编号为<span id="proNo">LS23423432</span>。</p>
					<p><a href="http://www.17sucai.com/">17素材网</a></p>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$(function() {
		var step= $("#myStep").step({
			animate:true,
			initStep:1,
			speed:1000
		});
		$("#preBtn").click(function(event) {
			var yes=step.preStep();
		});
		$("#applyBtn").click(function(event) {
			var yes=step.nextStep();
		});
		$("#submitBtn").click(function(event) {
			var yes=step.nextStep();
		});
		$("#goBtn").click(function(event) {
			var yes=step.goStep(3);
		});
	});
</script>



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


热门标签: 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 跳转 步骤 注册框 表单提交

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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