jQuery Mobile 각 페이지에 대한 개별로드 메시지

jQuery Mobile의 주어진 페이지에 다른로드 메시지를 넣을 수 있습니까?jQuery Mobile 각 페이지에 대한 개별로드 메시지

mobile.loadingMessage를 사용하고 있는데 mobile.showPageLoadingMsg도 시도했지만이 답변을 찾을 수 없습니다. 당신은 pageshow 이벤트를 수신하고 해당 페이지에 특정 로딩 메시지를 설정할 수 있습니다

$(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

: 아래

는 메시지가 응용 프로그램을 통해 표시하는 내가 가지고있는 것입니다.

샘플 코드 : 여기

<!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/

편집-http://jsfiddle.net/SugTr/1/

- 모든 페이지와 대상에 대해 switch 문을 사용하여 각 페이지를 하나의 pageshow 수신기를 사용하는 대체 버전

편집 2-로드 메시지가 표시됩니다. jqm 프레임 워크는 별도의 html 파일로 생성 된 페이지를로드하려는 경우에만 표시됩니다. 모든 페이지가 data-role="page" 인 경우 하나의 페이지 내에 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 각 페이지에 대한 개별로드 메시지

답변

관련 문제