2

jquery-mobile スピナーを使用しようとしていますが、機能していないようです

公式ドキュメント(http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html)から、これをクロムコンソールで実行してみましたが、動作します

$.mobile.loading( 'show', {
    text: 'foo',
    textVisible: true,
    theme: 'z',
    html:  "<i class='icon-spinner icon-4x'></i>"
});

しかし、これを application.html.haml またはコンソールから実行しようとすると、動作しないようです

$( document ).bind( 'mobileinit', function(){
  $.mobile.loader.prototype.options.text = "loading";
  $.mobile.loader.prototype.options.textVisible = false;
  $.mobile.loader.prototype.options.theme = "a";
  $.mobile.loader.prototype.options.html = "<i class='icon-spinner icon-4x'></i>";
});

スピナーの代わりに影が表示されます:-? .

ここで何が欠けていますか?

ありがとう :)

4

1 に答える 1

3

解決策:

jsFiddle の作業: http://jsfiddle.net/Gajotres/vdgB5/

Mobileinitイベントは、jQuery Mobile が初期化される前、jQuery の後に初期化する必要があります。また、これを機能させるには、css にいくつかの追加変更を行う必要があります。

まず、デフォルトui-loader-defaultのクラスをオーバーライドする必要があります。これは、不透明度が低すぎて、最後のスピナーが見えにくいためです。不透明度の値を好きなように変更します。

.ui-loader-default {
    opacity: 1 !important;      
}

そして、これが私たちのスピナーです。カスタム i タグを使用しているため、 を使用する必要がありますdisplay: block。これがないと、スピナーは非表示になります。

.custom-spinner {
    width: 37px !important;
    height: 37px !important;
    background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
    display: block;
}

これが実際の例です:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style>

            .ui-loader-default {
                opacity: 1 !important;      
            }

            .custom-spinner {
                width: 37px !important;
                height: 37px !important;
                background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
                opacity: 1 !important;
                display: block;
            }
        </style>
        <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
        <script>
            $( document ).bind( 'mobileinit', function(){
                $.mobile.loader.prototype.options.text = "loading";
                $.mobile.loader.prototype.options.textVisible = false;
                $.mobile.loader.prototype.options.theme = "a";
                $.mobile.loader.prototype.options.html = "<i class='custom-spinner'></i>";
            }); 
        </script>       
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
        <script>
            $(document).on('pageshow', '#index', function(){        
                $.mobile.loading( 'show');          
            }); 
        </script>
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">

            </div>

            <div data-theme="a" data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>   
于 2013-04-06T13:50:22.273 に答える