jQuery電網申請分步驟流程代碼



458 1830 611



特效描述:申請 分步驟流程,

代碼結構

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

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

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