1

私はしばらくの間、この問題に苦労しています。私の意図は、 $.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 アプリケーションに取り組んでいることを付け加えておきます。

4

1 に答える 1

2

の代わりに$.mobile.showPageLoadingMsg();とを使用します。$.mobile.hidePageLoadingMsg();$.mobile.loading();

ただし、うまくいかなかった場合は、以下のコードを使用してください。

ローディングスピナーを表示します。

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

それを非表示にします。

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

ローディングスピナーは、次のように の前の div に隠されて</body>います。必要なのは、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-27T18:19:22.920 に答える