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;
  }
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM