基于jquery步驟進(jìn)度條源碼分享
基于jQuery網(wǎng)頁(yè)步驟流程進(jìn)度條代碼里面包含兩款不同效果的jQuery步驟進(jìn)度條特效。效果圖如下:

html代碼:
<div class="step_context test"></div>
當(dāng)前步驟:
第<input type="text" value="5" id="currentStepVal" />步 <button onclick="StepTool.drawStep(jQuery('#currentStepVal').val(),stepListJson);" type="button">重新生成</button>
<script type="text/javascript">
//所有步驟的數(shù)據(jù)
var stepListJson = [{ StepNum: 1, StepText: "第一步" },
{ StepNum: 2, StepText: "第二步" },
{ StepNum: 3, StepText: "第三步" },
{ StepNum: 4, StepText: "第四步" },
{ StepNum: 5, StepText: "第五步" },
{ StepNum: 6, StepText: "第六步" },
{ StepNum: 7, StepText: "第七步" }];
//當(dāng)前進(jìn)行到第幾步
var currentStep = 5;
//new一個(gè)工具類(lèi)
var StepTool = new Step_Tool_dc("test", "mycall");
//使用工具對(duì)頁(yè)面繪制相關(guān)流程步驟圖形顯示
StepTool.drawStep(currentStep, stepListJson);
//回調(diào)函數(shù)
function mycall(restult) {
// alert("mycall"+result.value+":"+result.text);
StepTool.drawStep(result.value, stepListJson);
//TODO...這里可以填充點(diǎn)擊步驟的后加載相對(duì)應(yīng)數(shù)據(jù)的代碼
}
</script>
以上代碼就是小編給大家分享的基于jquery步驟進(jìn)度條源碼分享,希望大家喜歡。
- jquery+ajax實(shí)現(xiàn)上傳圖片并顯示上傳進(jìn)度功能【附php后臺(tái)接收】
- jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果示例【測(cè)試可用】
- jQuery NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法
- jquery-file-upload 文件上傳帶進(jìn)度條效果
- jQuery實(shí)現(xiàn)可拖動(dòng)進(jìn)度條實(shí)例代碼
- jquery網(wǎng)頁(yè)加載進(jìn)度條的實(shí)現(xiàn)
- jquery 步驟進(jìn)度軸插件的實(shí)現(xiàn)代碼
相關(guān)文章
jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞
jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞,鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)并提示,離開(kāi)后,繼續(xù)滾動(dòng),實(shí)現(xiàn)的代碼如下,需要的朋友可以看看2014-08-08
jQuery基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效,非常的不錯(cuò),有需要的小伙伴可以參考下。2016-02-02
jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery對(duì)象訪(fǎng)問(wèn)是什么及使用方法介紹
這篇文章主要為大家詳細(xì)介紹了jquery對(duì)象訪(fǎng)問(wèn)是什么及使用方法介紹,感興趣的小伙伴們可以參考一下2016-05-05
淺析jQuery的鏈?zhǔn)秸{(diào)用之each函數(shù)
如果對(duì)于jquery的$()包裝器函數(shù)還不是很清楚,請(qǐng)先參閱我的上一篇日志:淺析jQuery的鏈?zhǔn)秸{(diào)用2010-12-12

