jQuery Mobile各ページに固有の個別の読み込みメッセージ

jQuery Mobileの特定のページに異なる読み込みメッセージを付けることはできますか？jQuery Mobile各ページに固有の個別の読み込みメッセージ

私はmobile.loadingMessageを使用していますが、私もmobile.showPageLoadingMsgを試しましたが、私はこれに対する答えを見つけることができませんでした。以下は

私はアプリ全体に表示するメッセージのために持っているものです。

$(document).bind('mobileinit',function(){ 
      $.extend($.mobile, { 
       loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....", 
       pageLoadErrorMessage: 'Sorry, there was an error while loading!', 
      }); 
      $.mobile.page.prototype.options.addBackBtn = true; 
     });

出典

2012-02-15 John Kim

あなたはpageshowイベントをリッスンし、そのページに固有のロードメッセージを設定することができます。

サンプルコード：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Mobile Sample</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script> 
     $("#page1").live("pageshow",function(){ 
      $.mobile.loadingMessage = "Loading message for page1"; 
     }); 
     $("#page2").live("pageshow",function(){ 
      $.mobile.loadingMessage = "Loading message for page2"; 
     }); 
     $(".showBtn").live("click",function(){ 
      $.mobile.showPageLoadingMsg(); 
      setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000); 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
    </head> 

    <body> 
     <div data-role="page" id="page1"> 

     <div data-role="header"> 
      <h1>Page1</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <a data-role="button" class="showBtn">Show loading message</a> 
      <a data-role="button" href="#page2">Go to page 2</a> 
     </div> 
     </div><!-- /page --> 
     <div data-role="page" id="page2"> 

     <div data-role="header"> 
      <h1>Page2</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <a data-role="button" class="showBtn">Show loading message</a> 
      <a data-role="button" href="#page1">Go to page 1</a> 
     </div> 
     </div> 
    </body> 
</html>

ここでデモ - http://jsfiddle.net/SugTr/

編集からswitchステートメントを使用して、すべてのページと目標のために、各ページを単一pageshowリスナーを使用して別のバージョン - http://jsfiddle.net/SugTr/1/

編集2 - 読み込み中のメッセージが表示されます別のhtmlファイルとして作成されたページをロードしようとしている場合にのみ、jqmフレームワークによって作成されます。data-role="page" divが1ページ内にある場合、jqmフレームワークにはロードメッセージは表示されません。 $.mobile.showPageLoadingMsg()を使用してpagebeforeshowハンドラに手動で表示し、$.mobile.hidePageLoadingMsg()を使用してpageshowハンドラに非表示にします。ただし、メッセージが画面に表示される時間は無視できるため、目立った変更はありません。

実際にページ読み込みメッセージが表示されている（別のHTMLを読み込んでいる）場合は、ページが読み込まれる直前に$.mobile.loadingMessageを設定することで、特定の読み込みメッセージを表示できます。

アンカータグは、この

<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>

と、このフォームの対応するスクリプト

$("gotopage2).live("click",function(){ 
    $.mobile.loadingMessage = "Loading message for page1"; 
    $.mobile.changePage("page2.html"); 
});

ことができますならば、私に教えてくださいようなものにすることができます。

出典

2012-02-15 11:43:40 user700284

こんにちは、ありがとう！しかし、別のページへのリンクがクリックされたときに表示と非表示を切り替える方法はありますか？ –

私は与えたsetTimeoutについてお話していますか？ちょうどそのメッセージが読み込みポップアップで変更されたことを示すためのものです。 – user700284

答えが更新されました。 – user700284

これは、単純なjavascriptとhtml要素を使用してメッセージを読み込む別の方法です。ブログ：

http://aspnetsample.blogspot.in/2012/09/page-loading-message-javascript-main.html

あなたが完全な記事のための私のブログを訪問することができます。ここで

サンプルコード：

$function getpage(val) 
{ 
    hideFrame(); 
    var mframe; 
    mframe=document.getElementById("MyFrame"); 
    mframe.src=val; 
    mframe.onload=function() 
    { 
     document.getElementById("MyFrame").style.display="block"; 
     document.getElementById("loadingDiv").style.display="none"; 
    } 
} 
function hideFrame() 
{ 
    document.getElementById("MyFrame").style.display="none"; 
    document.getElementById("loadingDiv").style.display="block"; 
} 
function showFrame() 
{ 
    document.getElementById("MyFrame").style.display="block"; 
    document.getElementById("loadingDiv").style.display="none"; 
} 
function showdiv() 
{ 
    document.getElementById("loadingDiv").style.display="block"; 
} 
function changeHome(val) 
{ 
    window.location=val; 
} 


     $ <table> 
       <tr> 
        <td> 
         <div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')"> 
          Page1 
         </div> 
        </td> 
        <td> 
         <div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')"> 
          Page2 
         </div> 
        </td> 
        <td> 
         <div class="menu_div" onclick="getpage('page2.aspx')"> 
          Page3 
         </div> 
        </td> 
        <td> 
         <div class="menu_div" onclick="changeHome('page3.aspx')"> 
          Page4 
         </div> 
        </td> 
       </tr> 
      </table> 

     $ <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()" 
       onload="javascript:showFrame()" style="display: none;"></iframe> 
      <div id="loadingDiv" class="loadingDiv"> 
       <table style="width: 100%; height: 100%;"> 
        <tr> 
         <td align="center" valign="middle"> 
          Page is Loading... 
         </td> 
        </tr> 
       </table> 
      </div>

あなたが実現しながら、その$記号を削除する必要があります。

完全なコードを取得するには

出典

2012-10-01 17:14:18

jQuery Mobile各ページに固有の個別の読み込みメッセージ

答えて

関連する問題