基于jquery步驟進(jìn)度條源碼分享
更新時(shí)間:2015年11月12日 09:21:53 投稿:mrr
本文給大家分享基于jquery步驟進(jìn)度條源碼分享,實(shí)現(xiàn)功能是這樣的,在輸入框中輸入第3步,點(diǎn)擊重新生成按鈕,相應(yīng)的步驟顏色就會(huì)加深,對(duì)jquery步驟進(jìn)度條感興趣的朋友一起看看吧
基于jQuery網(wǎng)頁步驟流程進(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è)工具類 var StepTool = new Step_Tool_dc("test", "mycall"); //使用工具對(duì)頁面繪制相關(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)度條效果示例【測試可用】
- jQuery NProgress.js加載進(jìn)度插件的簡單使用方法
- jquery-file-upload 文件上傳帶進(jìn)度條效果
- jQuery實(shí)現(xiàn)可拖動(dòng)進(jìn)度條實(shí)例代碼
- jquery網(wǎng)頁加載進(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)并提示,離開后,繼續(xù)滾動(dòng),實(shí)現(xiàn)的代碼如下,需要的朋友可以看看2014-08-08jQuery基于muipicker實(shí)現(xiàn)仿ios時(shí)間選擇
本文給大家分享的是把jQuery的muipicker插件修改實(shí)現(xiàn)仿IOS時(shí)間選擇特效,非常的不錯(cuò),有需要的小伙伴可以參考下。2016-02-02jquery獲取所有選中的checkbox實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query獲取所有選中的checkbox實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05淺析jQuery的鏈?zhǔn)秸{(diào)用之each函數(shù)
如果對(duì)于jquery的$()包裝器函數(shù)還不是很清楚,請(qǐng)先參閱我的上一篇日志:淺析jQuery的鏈?zhǔn)秸{(diào)用2010-12-12