JQuery步骤条

JQuery步骤条

在做项目的时候需要一个步骤条，来根据订单的状态显示不同的信息。

首先是在GitHub上找到了一个开源的JQuery步骤条组件。（git地址：https://github.com/mateagar/progressStep）

1. 下载源代码

2. 将代码代码导入项目中

样式如下：

3. 修改源代码

由于和我的项目要求有些不同因此要对组件的css样式和js代码进行修改。将该组件修改成根据状态判断节点位置的形式。

（1）修改步骤栏的大小
修改在目录 progressStep-master\demo\stylesheets 下的style.css中的样式。将步骤栏设置为100%宽， 105px高。

p {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: lighter;
}

button {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.0em;
}

div#progressBar {
  width: 100%;
  height: 105px;
}

(2) 修改js
修改progressStep-master\demo目录下的index.html 中的js代码。编写js函数，根据传入函数的num值让步骤条显示不同的步骤。

//获取步骤条
function getStepBar(num) {
  var $progressDiv = $("#progressBar");
  var $progressBar = $progressDiv.progressStep();
  $progressBar.addStep("待审核");
  $progressBar.addStep("审批通过");
  $progressBar.addStep("待发货");
  $progressBar.addStep("已发货");
  $progressBar.addStep("完成");

  $progressBar.refreshLayout();
  startLoop(num);
  //开始循环
  var counter = 0;
  var intervalId = null;
  function startLoop(num) {
    if (intervalId) {
      // continue
    }
    else {
      intervalId = setInterval(function () {
        $progressBar.setCurrentStep(counter);
        if (num == counter) {
          stopLoop();
          return;
        }
        counter++;
        if (counter > 4) {
          counter = 0;
        }
      }, 500);
    }
  }
  //停止循环
  function stopLoop() {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
    }
  }
}