2017-08-03 10 views
0

同じボタンを画面の下部にある&の下部に配置する必要があります。私はちょうどLadda &がこれら2つのLaddaボタンの状態を同期させておく方法を見つけたいと思っています。私はそれを行う方法についていくつかのアイデアを持っていますが、ほとんどがかなり醜いです。2つのLaddaボタンを同期させておく方法

Q: 2つのLaddaボタンの実行状態を同期させるにはどうしたらよいですか?

enter image description here

HTML:
両方のボタンが同じマークアップを持っています。

<button class="btn btn-sm btn-next ladda-button ladda-button-success" data-style="expand-left"> 
    <span class="ladda-label">Next</span> 
    <i class="fa fa-arrow-right"></i> 
    <span class="ladda-spinner"></span> 
</button> 

JavaScriptイベント:

btnNext: function (e) { 

    var action = that.settings.actions.next; 
    var l = Ladda.create(this); 
    l.start(); // <-- How can I "force" a start across multiple buttons? 

    // Do other stuff... 
} 

答えて

0

誰かがより雄弁な答えを持っている場合

    ...私は間違いなく正しいとTHEIRSを迎えますが、これは私のためにどのような作品です
  • ユーザーと同じHTML(上記と同じ)
  • LADDA EVENTを設定します(Initialize関数を参照)。 PageControllerで)
  • セットアップ各DOM ELEMENTボタンのコール(PageControllerで中btnNext関数を参照してください)

PAGEコントローラで:
私はちょうど全体のコントローラを貼り付けるつもりです。 LaddaはjQueryオブジェクトを理解していないようです。だから、私はこの道を行く必要があった。

var PageController = (function ($, Ladda) { 

      function PageController(options) { 
       var that = this, 
        empty = {}, 
        dictionary = { 
         elements: { form: null, btnNext: null }, 
         selectors: { form: 'form', btnNext: '.btn-next'} 
        }; 

       var initialize = function (options) { 
        that.settings = $.extend(empty, $.isPlainObject(options) ? options : empty); 

        // Elements 
        dictionary.elements.form = $(dictionary.selectors.form); 
        dictionary.elements.btnNext = $(dictionary.selectors.btnNext, dictionary.elements.form); 

        // Events 
        dictionary.elements.btnNext.on('click', that.on.click.btnNext); 

        Ladda.bind(dictionary.elements.btnNext); 
       }; 

       this.settings = null; 
       this.on = { 
        click: { 
         btnNext: function (e) { 

          // Notice I had to point to the actual DOM ELEMENT for each button  
          var action = that.settings.actions.next; 
          var topLadda = Ladda.create(dictionary.elements.btnNext[0]); 
          var bottomLadda = Ladda.create(dictionary.elements.btnNext[1]); 
          topLadda.start(); 
          bottomLadda.start(); 

          dictionary.elements.form.attr('action', action); 
          dictionary.elements.form.submit(); 
         } 
        } 
       }; 

       initialize(options); 
      } 

      return PageController; 
     })(jQuery, Ladda); 
関連する問題