快捷導(dǎo)航

基于jquery步驟進度條源碼分享

更新時間：2015年11月12日 09:21:53 投稿：mrr

本文給大家分享基于jquery步驟進度條源碼分享，實現(xiàn)功能是這樣的，在輸入框中輸入第3步，點擊重新生成按鈕，相應(yīng)的步驟顏色就會加深，對jquery步驟進度條感興趣的朋友一起看看吧

基于jQuery網(wǎng)頁步驟流程進度條代碼里面包含兩款不同效果的jQuery步驟進度條特效。效果圖如下：

html代碼：

<div class="step_context test"></div>
當前步驟：
第<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: "第七步" }];
  //當前進行到第幾步
  var currentStep = 5;
  //new一個工具類
  var StepTool = new Step_Tool_dc("test", "mycall");
  //使用工具對頁面繪制相關(guān)流程步驟圖形顯示
  StepTool.drawStep(currentStep, stepListJson);
  //回調(diào)函數(shù)
  function mycall(restult) {
    // alert("mycall"+result.value+":"+result.text);
    StepTool.drawStep(result.value, stepListJson);
    //TODO...這里可以填充點擊步驟的后加載相對應(yīng)數(shù)據(jù)的代碼
  }
</script>

以上代碼就是小編給大家分享的基于jquery步驟進度條源碼分享，希望大家喜歡。

您可能感興趣的文章:

相關(guān)文章

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