$ .mobile.changePage $ .mobile.loading動畫

我在這個問題上苦苦掙扎了一段時間。我的目的是向用戶顯示轉輪，而$ .mobile.changePage方法將他重定向到另一個頁面。然而，我找到的解決方案都不適合我。它必須是changePage方法的一些問題，殺死加載動畫，因爲當我放棄changePage方法，然後旋轉輪顯示。謝謝你的幫助。

這裏是我的代碼片段：

<!DOCTYPE HTML> 
    <head> 
    <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript"> 
     $(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 = ""; 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
    </head> 
    <body onload="onBodyLoad();"> 
    <!-- LOGIN PAGE --> 
    <div data-role="page" id="login_page"> 
     <div data-role="content" id="login_content"> 
     <div id="buttons"> 
      <button value="Login" id="login">Login</button> 
      <button value="Logout" id="logout">Logout</button> 
     </div> 
     </div> 
    </div> 
    <!-- TIMELINE PAGE --> 
    <div data-role="page" id="timeline_page"> 
     <div data-role="header" id="timeline_head" data-nobackbtn="true"> 
     <h1>BlueBirdGap</h1> 
     <h2>Timeline</h2> 
     <a id="timeline_button_back" data-icon="arrow-l" class="ui-btn-left" 
     href="javascript:return true;" data-role="button" data-inline="true">Zpět</a> 
     <div data-role="controlgroup" class="ui-btn-right"> 
      <a id="logout_button" data-icon="delete" data-role="button">Logout</a> 
      <a id="new_tweet_button" data-icon="plus" data-role="button" data-theme="b">Tweet</a> 
      <hr> 
     </div> 
     </div> 
     <div data-role="content" id="timeline_content"> 
     <div id="new_tweet_area"> 
      <textarea id="tweet_text"></textarea> 
      <button data-role="button" data-icon="plus" data-theme="b" class="ui-btn-right" onclick="Twitter.post()">Post</button> 
     </div> 
     <div id="home_timeline"></div> 
     </div> 
     <div data-role="footer" id="timeline_footer"></div> 
    </div> 



    <script> 
    function onBodyLoad() { 
      document.addEventListener("deviceready", onDeviceReady, false); 

     } 

    function onDeviceReady() { 
      cb = window.plugins.childBrowser; 
      $('html').addClass("ui-loading"); 

      if(localStorage.getItem(twitterKey)){ 
       showLogin(1); 
       $.mobile.loading('show'); 
       Twitter.timeline(); 
       $.mobile.changePage('#timeline_page', {transition: "slide"}); 
       $.mobile.loading('hide'); 
      } 
    } 
    </script>

我要補充一點，我正在使用的PhoneGap框架和JQM 1.3.0 Android應用程序。

來源

2013-03-27 Štěpán Heller

使用$.mobile.showPageLoadingMsg();和$.mobile.hidePageLoadingMsg();而不是$.mobile.loading();。

但是，如果他們不工作，使用下面的代碼。

顯示加載微調器。

$('div.ui-loader').show();

隱藏它。

$('div.ui-loader').hide();

加載微調器隱藏在</body>之前的div中，如下所示。所有你需要的是show();它或hide();它。

<div class="ui-loader ui-corner-all ui-body-a ui-loader-default" style="display: block;"> 
<span class="ui-icon ui-icon-loading"> 
</span> 
<h1>loading</h1> 
</div>

來源

2013-03-27 18:19:22 Omar

'$ .mobile.showPageLoadingMsg（）'折舊。你不應該使用它。 – 2013-03-28 04:04:35

感謝@MayuMayooresan提示;） – Omar 2013-03-28 07:13:31

Mayu是正確的。然而，這些方法仍然存在，並推遲對優先方法的調用：$ .mobile.loading然後調用'loaderWidget'。該小部件僅在'pagecontainerCreate'事件觸發後才存在。（參見JQM 1.3.1，行：1115-1117）更多細節：[jqmDoco]（http://jquerymobile.com/demos/1.2.0/docs/pages/loader.html） – 2013-06-04 01:38:33

$ .mobile.changePage $ .mobile.loading動畫

回答

相關問題