2011-11-29 9 views
26

jQueryモバイルが起動ページにローディングメッセージを追加しているようです。私は実際に何が起こっているのかわからないが、次の単純なスニペットを考えてみよう。jQueryモバイルは「ローディング見出し」をページに追加します

<!DOCTYPE html> 
<html> 
    <head> 
    <title>sadFace</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 
    <meta charset="utf-8" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    </head> 
    <body> 
    <h1>;__;</h1> 
    </body> 
</html> 

ロードメッセージを見るには下にスクロールしなければならない。だから、私は典型的なjQueryモバイルページの解剖学に従わないので、それが起こるかもしれないと思ったが、:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
    <div data-role="header"> 
     <h1>;_;</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Same shit, different page.</p>  
    </div><!-- /content --> 

    <div data-role="footer"> 
     <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4> 
    </div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html> 

同じ。私はこの行動に全く唖然としています。私は先週からプロジェクトを開始したにもかかわらず、同じ結果でjQuery1.0rc2をテストしても問題ありません。何が起こっているのか<。 <

を参照してください。jQuery Mobile' jsで調べると、このinitializePage: function()はメッセージに責任があると思います。私は

//cue page loading message 
$.mobile.showPageLoadingMsg(); 

またはautoInitializePage: falseを設定をコメントアウトでしたが、私はむしろ(それはバグでない限り)変更jQueryのファイルを含むされていないソリューションを好みます。

答えて

37

あなたは、それは大丈夫だろう、あまりにもCSSを追加する必要があります。具体的には

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 

それは常にあなたの体の下部に次のHTMLを置く:

<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div> 

これは関連するCSSです(あなたが望む場合は多分あなた自身で遊ぶことができます)

.ui-loading .ui-loader { display: block; } 
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; } 

機能showPageLoadingMsgは、HTMLタグにCSSクラスの.uiロード」を追加し、それはあなたがjqueryのモバイルライブラリをロードする前

+0

CSSは、これらのフレームワークのすべてと同じ厄介なことを行います。 ... –

+0

どのように私はh1を置くのをやめますか? – Jayen

16

あなたは、以下の使用してautoInitializePageを停止することができます目に見えるようになる

ここ
jQuery(document).on("mobileinit", function() { 
    jQuery.mobile.autoInitializePage = false; 
}); 

さらに詳しい情報:http://api.jquerymobile.com/global-config/

2

0123あなたのJSファイルの先頭にこれを追加
関連する問題