0

$.mobile.showPageLoadingMsg()1 つの要素/領域だけにスピナー () を表示する簡単な方法はありますか?

この要素のコンテンツを 経由AJAXで読み込んでいるので、完了するまでブロックしてこのスピナーを表示する必要があります。

4

2 に答える 2

1

ローディング スピナーの 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);

ここにデモがあります：http://jsfiddle.net/CkUZf/

上記のデモ (リンク) では、オーバーレイ要素に次の CSS を使用しました。

#container .container-overlay {
    display    : none;
    height     : 100%;
    background : #000;
    background : rgba(0, 0, 0, 0.75);
}​

「ロード」したいコンテナーにローダー要素を追加することもできますが、ローダー要素を$.mobile.showPageLoadingMsg()自動的にリセットするため、jQuery Mobile インクルードでそのコードを無効にする必要があります (これが、より軽い 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%'
                    });
                });
            }
        });
    }
};

次に、jQuery オブジェクトでこのメソッドを呼び出すだけです。

$('#some-container').customMobileSpinner({
    url : 'some-url'
});
于 2012-08-22T16:18:33.033 に答える
0

恐れ入りますが、できません。ドキュメントを見てください。メッセージをカスタマイズしたり、スピナーを非表示にしたりすることはできますが、要素に適合させることはできません。要素の読み込み時にスピナーを表示したいだけの場合は、メソッドのbeforeSendandcompleteオプションを使用ajaxして非表示/表示します

于 2012-08-21T11:50:48.327 に答える