0

jquery mobileのドキュメントはすでに見ましたが、モバイルWebサイトに統合する方法を理解できませんでした。ドキュメントはここにあります

http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html

実際、gif画像は2.x androidデバイスではアニメーション化されないため、テキストのみのプリロードウィジェットを作成することを考えています。

このようにcssで変更してみました

.ui-icon-loading {
            background: url(themes/images/custom-ajax-loader.gif);
        }

ただし、新しい画像は適切に拡大縮小されず、古い背景は引き続き表示されます。

私はjavascriptの完全な初心者です。誰かplzがこれを手伝ってくれますか？

4

1 に答える 1

5

あなたはjQM1.2Alpha Docsについて言及しているので、私の答えはこのjQMバージョンに基づいています。

以下に、デフォルトのローダーイメージを変更するための2つのオプションを示します。

解決策1

jQM 1.2 Alpha Docsで述べられているように：

jQuery Mobileが起動すると、ドキュメントオブジェクトでmobileinitイベントがトリガーされます。デフォルト設定を上書きするには、mobileinitにバインドします。mobileinitイベントはすぐにトリガーされるため、jQueryMobileが読み込まれる前にイベントハンドラーをバインドする必要があります。次の順序でJavaScriptファイルにリンクします。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

ロードダイアログをグローバルに構成するには、mobileinitイベント中にプロトタイプで次の設定を定義できます。

$( 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 = "";
});

以下に、 htmlプロトタイプオプションでローダーを完全にカスタマイズできる実用的な例を示します。

例： 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
              $.mobile.loader.prototype.options.text = "loading";
              $.mobile.loader.prototype.options.textVisible = true;
              $.mobile.loader.prototype.options.theme = "a";
              $.mobile.loader.prototype.options.textonly = false;
              $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.loading('show');
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

解決策2

ページローダーの描画に使用されるデフォルトのCSSスタイルをオーバーライドします。

編集済み

jQM 1.1.1バージョンの場合、次の構成可能なオプションがあります。

  • LoadingMessage文字列、デフォルト："loading"
    ページの読み込み中に表示されるテキストを設定します。falseに設定すると、メッセージはまったく表示されません。
  • loadMessageTextVisible boolean、デフォルト：false
    読み込み中のメッセージが表示されたときにテキストを表示するかどうか。読み込みエラーの場合、テキストは常に表示されます。
  • LoadingMessageTheme文字列、デフォルト："a"
    テキストが表示されているときに読み込みメッセージボックスが使用するテーマ。

コード例： 

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
               $.mobile.loadingMessageTheme = 'e';
               $.mobile.loadingMessageTextVisible = true;
                $.mobile.loadingMessage = "test";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.showPageLoadingMsg();
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

さらに、jQMローダーのスタイル設定に使用されるデフォルトのCSSをオーバーライドしてみることができます。より具体的には、ページローダーを表すために使用されるセクション読み込み画面のスタイルとセクション読み込みアイコンのスタイルを変更またはオーバーライドできます。

ここに、jQM1.1.1で使用されているCSSがあります。

/* loading icon */
.ui-icon-loading {
    background: url(images/ajax-loader.gif);
    background-size: 46px 46px;
}

/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }
于 2012-09-01T08:17:41.993 に答える