Javascript 是否仅在一个元素上显示微调器（$.mobile.showPageLoadingMsg（））？

是否有一种简单的方法可以在一个元素/区域上显示微调器（

$.mobile.showPageLoadingMsg（）

）

---

我正在通过AJAX加载这个元素的内容，所以在它完成之前，我必须阻止它并显示这个微调器。

恐怕你不能。看看，您可以自定义消息或隐藏微调器，但不能使其适合某个元素。

---

如果您只想在某些元素加载时显示微调器，请使用

ajax

方法的

beforeSend

和

complete

选项隐藏/显示它

您可以将加载微调器的CSS位置设置为显示在特定区域上。下面是一个代码示例，显示并隐藏了元素上的加载微调器：

//this is an IIFE, it creates an enclosure around the code that separates it from global code
(function ($) {

    //a flag so we know what state the loading spinner is in
    var isShowing = false;

    //this example is binding to all link elements
    $('a').on('click', function () {

        //check if the loading spinner is already showing
        if (isShowing === false) {

            //the loader is not showing, so create an overlay in the container element
            var $con = $('#container').append('<div class="container-overlay"></div>');

            //now position the loader over the container
            $('.ui-loader').css({
                position : 'absolute',
                top      : ($con.offset().top + ($con.height() / 2)),
                left     : ($con.offset().left + ($con.width() / 2))
            });

            //fade-in the overlay and show the loading spinner
            $con.children('.container-overlay').fadeIn(500);
            $.mobile.showPageLoadingMsg();

            //set the flag so next time around we hide the spinner
            isShowing = true;
        } else {

            //fade-out the overlay
            $('#container').children('.container-overlay').fadeOut(500, function () {

                //remove the overlay from the DOM
                $(this).remove();

                //hide the loader
                $.mobile.hidePageLoadingMsg();

                //reset the CSS of the loader element
                $el.css({
                    position : 'fixed',
                    top      : '50%',
                    left     : '50%'
                });
            });

            //set the flag so next time around we show the loading spinner
            isShowing = false;
        }
    });​
})(jQuery);

也可以将loader元素附加到您想要“加载”的任何容器中，但是

$.mobile.showPageLoadingMsg（）

会自动重置loader元素，因此您必须在jQuery mobile include中禁用该代码（这就是我在上面的较轻CSS版本中使用此代码的原因）

更新

这可能更像你所想的：

$.fn.customMobileSpinner = function (options) {

    var defaults = {
            url             : null,
            fadeDuration    : 500,
            bgColor         : 'rgba(0, 0, 0, 0.75)',
            bgColorFallback : '#000'
        };

    //merge the defaults and options objects
    options = $.extend({}, defaults, options);

    //make sure the URL is specified
    if (options.url !== null) {

        //only work with the first element passed-in
        var $element = this.eq(0);
        $element.append(
            $('<div class="container-overlay" />').css({
                display    : 'none',
                height     : '100%',
                width      : '100%',
                background : options.bgColorFallback,
                background : options.bgColor
            })
        ).children('.container-overlay').fadeIn(options.fadeDuration);

        //update loader CSS
        $('.ui-loader').css({
            position : 'absolute',
            top      : ($element.offset().top + ($element.height() / 2)),
            left     : ($element.offset().left + ($element.width() / 2))
        });

        //show spinner
        $.mobile.showPageLoadingMsg();

        //create AJAX call
        $.ajax({
            url : options.url,
            success : function (response) {
                $element.fadeOut(options.fadeDuration, function () {
                    $element.html(response).fadeIn(options.fadeDuration);
                    $.mobile.hidePageLoadingMsg();

                    //reset loader CSS
                    $(".ui-loader").css({
                        position : 'fixed',
                        top      : '50%',
                        left     : '50%'
                    });
                });
            }
        });
    }
};

---

仅供参考，如果可能，请改为使用$.mobile.loading（'show'）。$。JQM 1.2I中不推荐使用mobile.showPageLoadingMsg（）。我应该提到$。mobile.loading方法仅在JQM 1.2b中使用，因为第一句话。这是可能的，只是不是默认的。@Jasper继续并发布您的答案，我们都会很高兴学到一些东西new@Jasper，我同意戴维斯的观点，我很高兴知道如何才能做到这一点。提前谢谢。看看我的答案，有一种方法可以做到。贡献很大！！我们可以讨论这个解决方案的简单性，因为@Tal的问题开始说“是否有一个简单的方法来显示微调器…”，但这并不会让这个答案变得更糟。我更新了我的答案，以一个具体的例子。我将代码转换为jQuery插件，现在在elements上调用它是一个单行程序。您的解决方案很棒，而且易于使用，但是当@Tal询问是否有一种简单的方法可以在容器中显示

$.mobile.showPageLoadingMsg（）

，我考虑了方法选项或配置，而不是编写插件。因此，使用一堆jQuery可以做很多事情，但是问问你自己，你是否愿意为了给定的目的使用这种方法。有一些缺点，例如，您正在修改加载程序的类，如果您想像往常一样使用

$.mobile.showPageLoadingMsg（）

，会发生什么？我不会说你的解决方案是错的。。。我的也不是。我建议在决定为什么有些东西不起作用之前先进行实验。例如，每次调用

$.Mobile.showPageLoadingMsg（）

，jQuery Mobile都会自动重置加载微调器，这是我在处理此答案的代码时发现的。我可以保证的一件事是，如果您一直探索各种选项，您将成为一名知识更丰富的开发人员。我想这实际上是关于你愿意花多少时间在开发上。为了回答你的问题，是的，我会使用这个解决方案，但那是因为我花了很多时间，所以我对它的工作原理有了深入的了解。我担心这不是“一种简单的方法”，因为只有几行代码。然而，我真的很感谢你在这里的努力，这真的很鼓舞人心。

$.fn.customMobileSpinner = function (options) {

    var defaults = {
            url             : null,
            fadeDuration    : 500,
            bgColor         : 'rgba(0, 0, 0, 0.75)',
            bgColorFallback : '#000'
        };

    //merge the defaults and options objects
    options = $.extend({}, defaults, options);

    //make sure the URL is specified
    if (options.url !== null) {

        //only work with the first element passed-in
        var $element = this.eq(0);
        $element.append(
            $('<div class="container-overlay" />').css({
                display    : 'none',
                height     : '100%',
                width      : '100%',
                background : options.bgColorFallback,
                background : options.bgColor
            })
        ).children('.container-overlay').fadeIn(options.fadeDuration);

        //update loader CSS
        $('.ui-loader').css({
            position : 'absolute',
            top      : ($element.offset().top + ($element.height() / 2)),
            left     : ($element.offset().left + ($element.width() / 2))
        });

        //show spinner
        $.mobile.showPageLoadingMsg();

        //create AJAX call
        $.ajax({
            url : options.url,
            success : function (response) {
                $element.fadeOut(options.fadeDuration, function () {
                    $element.html(response).fadeIn(options.fadeDuration);
                    $.mobile.hidePageLoadingMsg();

                    //reset loader CSS
                    $(".ui-loader").css({
                        position : 'fixed',
                        top      : '50%',
                        left     : '50%'
                    });
                });
            }
        });
    }
};

$('#some-container').customMobileSpinner({
    url : 'some-url'
});