Question

我要求在顶部和顶部放置相同的按钮。屏幕下方。我刚刚发现了Ladda＆amp;想找到一种方法来保持这两个Ladda Button状态同步。我对如何做到这一点有一些想法，但大多数都非常难看。

问：如何保持2个Ladda按钮的运行状态同步？

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 EVENT：

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

Answer 1

这对我来说可以使用jQuery选择器同时激活页面所有Ladda按钮上的微调器：

// Create a new instance of ladda for the specified button
var btns = $('.ladda-button').ladda();

// Start loading
btns.ladda('start');

// Stop loading
btns.ladda('stop');

Answer 2

如果有人有更有说服力的答案，我肯定会将他们标记为正确，但这对我有用......

使用相同的HTML（如上）
设置LADDA EVENT（请参阅PageController中的Initialize函数）
为每个DOM ELEMENT按钮设置一个调用（参见PageController中的btnNext函数）

PAGE CONTROLLER：
我要粘贴整个控制器。 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);

如何保持2个Ladda按钮同步

2 个答案: