JQuery向导插件Step——第一个阉割版插件

如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点，就是页面在第一次进入的时候，会进行一次很明显的DOM重绘——页面会闪一下。

尤其是前端代码比较庞大的时候，效果更为明显。

为了解决这个问题，就想使用点轻量级的流程向导。于是网上搜了下，恰好园友有这样一个插件，感谢杨元

不过使用起来还是有点不太喜欢的地方：

1 tooltip样式比较简陋，不好看.
2 间距太窄了，没有响应式.
3 缺少一些上一步下一步的触发动作以及校验.

因此就根据ystep的源码以及JQuery.steps的流程，设计出了下面的插件。虽然使用上还不是完善，但是基本已经能满足JQuery.steps的要求了。

为什么说阉割版呢！主要是因为是从别人的代码上阉割下来的，所以再次对原作者表示感谢！

无图无真相：

喜欢的朋友，可以在github上找到代码，猛戳这里就行！

ystep浅谈

于是首先先阅读了下杨元朋友的源码，去掉了tooltip，代码一下子少了很多。

主要的结构如下

(function($){

  $.fn.extend({

    //初始化

    loadStep: function(params){},

    //跳转到指定步骤

    setStep: function(step) {},

    //获取当前步骤

    getStep: function() {},

    //下一个步骤

    nextStep: function() {},

    //上一个步骤

    prevStep: function() {},

    //通用节点查找

    _searchStep: function (callback) {}

  });

})(jQuery);

原理可以参考下面的图：

说白了就是一些仅显示为圆圈的LI元素，加上一个进度条。

进度条会按照当前索引的位置，显示进度！

源码修改

这里没有在计算的过程中去增加响应式，而是直接使用@media设置样式。这样方便使用的时候根据当前页面的流程节点的个数进行设置宽度。

@media (min-width: 1200px) {

  /*调节总的宽度*/

  .ystep-lg {

    width: 800px;

  }

  /*调节进度条宽度*/

  .ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {

    width: 600px;

  }

  /*调节各个原点之间的跨度*/

  .ystep-lg li {

    margin-right: 100px;

  }

  /*调节按钮位置*/

  .step-button{

    left: 800px;

  }

}

在原有的基础上增加按钮以及校验代码：

loadStep: function(params){

      //基础框架

      var baseHtml =  "<div class='ystep-container ystep-lg ystep-blue'>"+

                        "<ul class='ystep-container-steps'></ul>"+

                        "<div class='ystep-progress'>"+

                          "<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>"+

                        "</div>"+

                      "</div>";

      //步骤框架

      var stepHtml = "<li class='ystep-step ystep-step-undone'></li>";

      var stepButtonHtml = "<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn'>上一步</button>"+

                        "<button type='button' class='btn btn-default nextBtn' id='nextBtn'>下一步</button></div>";

      //支持填充多个步骤容器

      $(this).each(function(i,n){

        var $baseHtml = $(baseHtml),

        $stepHtml = $(stepHtml),

        $ystepContainerSteps = $baseHtml.find(".ystep-container-steps"),

        arrayLength = 0,

        $n = $(n),

        i=0;

        //步骤

        arrayLength = params.steps.length;

        for(i=0;i<arrayLength;i++){

          var _s = params.steps[i];

          //构造步骤html

          $stepHtml.text(_s);

          //将步骤插入到步骤列表中

          $ystepContainerSteps.append($stepHtml);

          //重置步骤

          $stepHtml = $(stepHtml);

        }

        var $stepButtonHtml = $(stepButtonHtml);

        $ystepContainerSteps.append($stepButtonHtml);

        //插入到容器中

        $n.append($baseHtml);

        //绑定两个按钮

        $("#prevBtn").click(function(){

          var index = $n.getStep();

          $n.prevStep();

          params.afterChange(index-1,index);

        });

        $("#nextBtn").click(function(){

          var index = $n.getStep();

          if(!params.beforeChange(index,index+1)){

            return;

          }

          $n.nextStep();

          params.afterChange(index+1,index);

        });

        //默认执行第一个步骤

        $n.setStep(1);

      });

    },

由于去除了一些不使用的参数，这样修改后，页面使用的时候直接绑定三个变量就可以了：

$(".ystep").loadStep({

      steps:["发起","审核","募款","执行"],

      beforeChange: function(nowIndex,nextIndex){},

      afterChange: function(nowIndex,prevIndex){}

});

使用帮助

首先，需要引入github中的JS以及CSS等文件，并添加页面元素，使用class="ystep"进行标识。

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <link rel="stylesheet" href="css/bootstrap.css">

    <link rel="stylesheet" href="css/ystep.css">

  </head>

  <body>

  <!-- ystep容器 -->

  <div class="ystep"></div>

  <!-- 引入jquery -->

  <script src="js/jquery.min.js"></script>

  <!-- 引入bootstrap -->

  <script src="js/bootstrap.min.js"></script>

  <!-- 引入ystep插件 -->

  <script src="js/ystep.js"></script>

  </body>

</html>

其次，在页面底部增加初始化：

	$(".ystep").loadStep({

      steps:["发起","审核","募款","执行"],

      beforeChange: function(nowIndex,nextIndex){

        console.log("跳转前校验:"+nowIndex +" "+nextIndex);

        if(nowIndex === 1 && nextIndex === 2 ){

          return true;

        }else if(nowIndex === 2 && nextIndex === 3){

          return true;

        }else if(nowIndex === 3 && nextIndex === 4){

          return true;

        }

        return true;

      },

      afterChange: function(nowIndex,prevIndex){

        console.log("跳转后动作:"+nowIndex +" "+prevIndex);

        if(nowIndex <1 || nowIndex >5) return;

        /*这里可以搭配其他的页面元素，实现tab页切换的效果

        for(var i = 1; i <= 5; i++){

          if(i === nowIndex){

            $("#page"+i).css("display","block");

          }else{

            $("#page"+i).css("display","none");

          }

        }*/

        if(nowIndex === 2 && prevIndex === 1){

        }else if(nowIndex === 3 && prevIndex === 2){

        }else if(nowIndex === 4 && prevIndex === 3){

        }

      }

    });

最后，调整样式。在当前页的CSS文件中，可以自行根据流程节点的数目调整样式，进行覆盖。

@media (min-width: 768px) {

  /*调节总的宽度*/

  .ystep-lg {

    width: 400px;

  }

  /*调节进度条宽度*/

  .ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {

    width: 300px;

  }

  /*调节各个原点之间的跨度*/

  .ystep-lg li {

    margin-right: 0px;

  }

  /*调节按钮位置*/

  .step-button{

    left: 400px;

  }

}

@media (min-width: 992px) {

  /*调节总的宽度*/

  .ystep-lg {

    width: 600px;

  }

  /*调节进度条宽度*/

  .ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {

    width: 450px;

  }

  /*调节各个原点之间的跨度*/

  .ystep-lg li {

    margin-right: 50px;

  }

  /*调节按钮位置*/

  .step-button{

    left: 600px;

  }

}

@media (min-width: 1200px) {

  /*调节总的宽度*/

  .ystep-lg {

    width: 800px;

  }

  /*调节进度条宽度*/

  .ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {

    width: 600px;

  }

  /*调节各个原点之间的跨度*/

  .ystep-lg li {

    margin-right: 100px;

  }

  /*调节按钮位置*/

  .step-button{

    left: 800px;

  }

}

巴特西