[JS] jQuery Wizard

最近工作一直跟匯入的資料處理有關，弄到自己有點頭痛，其中比較頭痛的是 想要美觀的 Wizard 或是 Step 這種步驟式的plugin 大多都沒有達到我的需求

後來在網路上看到一段很簡略的 Step Wizard 應用上了一個案子，運行的很順暢。

不過還是不敷我使用，一直大量用到了之後決定寫成個 plugin 先寫個雛形方便未來修改擴增。

因為是用 Bootstrap 所以CSS範例也是跑 Bootstrap 

HTML 部分很簡單 最主要就是 id=wizard 要包住 wizard-sidebar 導航條，wizard-content 變成內容，一對一對應，內容不需要打標題，產生後會自動 的塞入

  <div class="row wizard" id="wizard">
    <div class="col-md-3">
      <div class="wizard-sidebar list-group">
        <a>Import Step1</a>
        <a>Import Step2</a>
        <a>Import Step3</a>
        <a>Import Step4</a>
        <a>Import Step5</a>
        <a>Import Step6</a>
      </div>
    </div>
    <div class="col-md-9">
        <div id="step1" class="well wizard-content">1</div>
        <div id="step2" class="well wizard-content">2</div>
        <div id="step3" class="well wizard-content">3</div>
        <div id="step4" class="well wizard-content">4</div>
        <div id="step5" class="well wizard-content">5</div>
        <div id="step6" class="well wizard-content">6</div>
    </div>
  </div>

JS的部分

$('#wizard').wizard({
 step_prev : 'Prev Step',
 step_next : 'Next Step',
 move3to4 : function(){
  alert('3to4');
        oWizard.moveToAction('next');
 },
 moveTo4after : function(){
        alert('this is 4');
 },
 move4to3 : function(){
  alert('4to3');
 },
 move4to5 : function(){
  return false;
 },
 move3to2 : function(){
  alert('3to2');
 }
})

基本上可以不用設定，想自訂上一步下一步的字串就自己新增然後是 event

在執行過程中會有 第 N 步到第 N+1 步的動作，只需要寫在 event 裡面 也很直觀的用數字呈現 如果回傳 return false 整個 步驟就暫停，適合對應 Validation 類型的套件

然後有個 倒退的事件，這個不少 plugin 都沒有做，事件寫法是 n to n-1  這種寫法適合用在RESET 資料，當然只要 return false 一樣可以停止退回

另外還寫了一個 moveTo?after 就是移動到 這個步驟之後要執行的 Function ，比較適合用選擇後載入某些AJAX 資料或是欄位關閉開啟變動，以下可以看範例

JS 沒有正式命名或是打上資料，目前先放這樣 XD需要自行複製存為 JS 檔

(function($){
 $.fn.wizard = function(data,opt) {
  var $that = $(this),
  options = {
   step_prev : 'Prev',
   step_next : 'Next'
  };
  if( jQuery.isPlainObject(data) )
  {
    opt = data;
  }
  $.extend(options,data);
  $.each(options,function(k,v){
   if( jQuery.isFunction(v) )
   {
    $that.bind('wizard.'+k,v)
   }
  })
  function init(){
   $that.data({
    'now_step' : 0 ,
   });
   var links = $that.data('wizard-links');
   $that.find('.wizard-sidebar > a').each(function(i,n){
    if( typeof links != 'undefined' )
    {
     links = links.add(n);
    }else{
     links = $(n);
    }
    var title = n.innerHTML;
    $(n)
      .attr('href','#')
      .attr('data-step',(i+1) )
      .data('title',title)
      .addClass('list-group-item')
      .html('<h4 class="list-group-item-heading">'+title+'</h4>');
   })
   $that.data('wizard-links',links);
   var wells = $that.find('.wizard-content');
   $that.data('wizard-wells',wells);
   wells.hide().each(function(i,n){
    var $well = $(n);
    $well.attr('data-step',(i+1));
    if( ! $well.find('.header').lenght ){
     $well.prepend('<div class="header"><h2>'+ links.eq(i).data('title')+'</h2></div>');
    }
    if( ! $well.find('.btn-step-area').lenght ){
     $btnArea = $('<ul />', { class : 'btn-step-area pager' }).appendTo( $well );
    }
    if( i>0 && ! $well.find('.btn-prev').lenght ){
     $btnArea.append('<li class="previous"><a href="#" class="btn btn-info btn-prev">'+options.step_prev+'</a></li>')
    }
    if( ! $well.find('.btn-next').lenght ){
     $btnArea.append('<li class="next"><a href="#" class="btn btn-danger btn-next">'+options.step_next+'</a></li>')
    }
   })
   $that.on('click','.btn-next,.btn-prev',function(e){
    var caseMove = $(this).hasClass('btn-next') ? 'next' : 'prev';
    var $p = $(this).closest('div[data-step]');
    var step = parseInt( $p.data('step') ,10 ) 
     step = caseMove == 'next' ? step+1 : step-1;
     console.log(step)
    $that.moveToAction( step );
       e.preventDefault();
   })
   $that.on('click','.wizard-sidebar > a',function(e){
    //var index = $that.data('links').index( this )
    var index = $('.wizard-sidebar > a').index( this );
    if ( !$(this).hasClass('disabled'))
    {
        $that.moveToAction( index+1 );
       }
       e.preventDefault();
   });
   $.extend($that,{
    eventMoveTo : function( form , to )
    {
     var result = true;
     form = parseInt(form,10);to = parseInt(to,10);
     var case_event = $that.createTo(form,to);
     for(x in case_event ){
      var ev = $that.triggerHandler('wizard.move'+case_event[x]);
      if( ev === false ){
       result = false;
       break;
      }
     }
     return result;
    },
    createTo : function createTo( a , b )
    {
        var arr = [];
        if( b > a )
            for(var i = a;i < b;i++) arr.push( i + 'to' + (i+1)  );
        else if( a > b )
            for(var i = a;i > b;i--) arr.push( i + 'to' + (i-1)  );
        return arr;
    },
    moveToAction : function(new_step){
     var now_step = $that.data('now_step');
     if( typeof new_step =='string'){
      new_step = (new_step=='next') ? now_step+1 : now_step-1;
     }
     var $item = $that.data('wizard-links').filter('[data-step="'+new_step+'"]');
           if( $that.eventMoveTo( $that.data('now_step') , new_step ) )
           {
      $that.data('now_step',new_step)
         $that.data('wizard-links').addClass('disabled').removeClass('active');
      $item.addClass('active');
      $item.removeClass('disabled').prevAll().removeClass('disabled');
      $that.data('wizard-wells').hide().filter('[data-step="'+new_step+'"]').show();
      $that.triggerHandler('wizard.moveTo'+new_step+'after');
           }
    }
   })
   $that.data('wizard' ,true);
   $that.moveToAction(1);
  }
  
  var initz = $that.data('wizard');
  if( initz !== true)
  {
   init();
  }
  return $that;
 }
})(jQuery);