快捷導(dǎo)航

基于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)頁(yè)步驟流程進(jìn)度條代碼里面包含兩款不同效果的jQuery步驟進(jìn)度條特效。效果圖如下：

在線預(yù)覽源碼下載

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)度條源碼分享，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

jQuery的position()方法詳解
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見(jiàn)元素有效。
2015-07-07
jquery隊(duì)列queue與原生模仿其實(shí)現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對(duì)于一系列需要按次序運(yùn)行的函數(shù)特別有用。特別animate動(dòng)畫(huà)，ajax，以及timeout等需要一定時(shí)間的函數(shù)
2014-03-03
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載
基于jQuery實(shí)現(xiàn)交互體驗(yàn)社會(huì)化分享代碼附源碼下載。這是一款鼠標(biāo)點(diǎn)擊分享按鈕向右滑出騰訊微博，新浪微博，QQ空間，豆瓣，微信，二維碼分享等分享平臺(tái)，本段代碼比較實(shí)用，需要的朋友參考下吧
2016-01-01
jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析
這篇文章主要介紹了jQuery內(nèi)部原理和實(shí)現(xiàn)方式淺析,本文試圖從整體來(lái)闡述一下jQuery的內(nèi)部實(shí)現(xiàn),需要的朋友可以參考下
2015-02-02
基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化
這篇文章主要為大家詳細(xì)介紹了基于jQuery的時(shí)間戳與日期間的轉(zhuǎn)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
jquery foreach使用示例
jquery中的foreach想必大家并不陌生吧，使用jquery的朋友肯定會(huì)很熟悉，本文有個(gè)不錯(cuò)的示例大家不妨可以鞏固一下
2013-09-09
JQuery 拾色器插件發(fā)布-jquery.icolor.js
web項(xiàng)目中不少地方需要用到顏色選擇器，比如設(shè)置某個(gè)元素的背景色、邊框色等等，按照我們交互設(shè)計(jì)的期望-設(shè)色器最好簡(jiǎn)單易用，僅顯示常用的那些色塊給用戶(hù)選擇，另外提供一個(gè)輸入框方便用戶(hù)輸入自定義的色值。
2010-10-10
jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡(jiǎn)單2D柱狀圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
Jquery中LigerUi的彈出編輯框(實(shí)現(xiàn)方法)
本篇文章是對(duì)Jquery中LigerUi的彈出編輯框的實(shí)現(xiàn)方法進(jìn)行了分析介紹，需要的朋友可以參考下
2013-07-07
jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法
今天小編就為大家分享一篇jQuery 實(shí)現(xiàn)批量提交表格多行數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08