1

こんにちは！！

質問がありますが、どこにも解決策が見つかりません...

そのため、非常に長いリストを持つ内部 div ページ(#page2)にリンクするボタンがあります。移行が開始される前に、内部 div ページを「ロード」する必要があります...

これは非常に単純なサンプル コードです。

<!-- Page #1 -->
<!-- ... -->
        <div data-role="content">    
        <p>View internal page: <a href="#page2">goto Page 2</a></p>
         </div>
<!-- ... -->
    <!-- Start of Page #2 -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Bar</h1>
        </div><!-- /header -->
        <div data-role="content">   
    <ul><li>...</li>
    <li>...</li>
    <!-- About 300+ of: <li>...</li> -->
    </ul>
    </div>

したがって、#page2 へのリンクをクリックすると、jquery mobile の「ロード中...」が表示され、コンテンツが「ロード」された後、トランジションが開始されます。ページに挿入するのと同じページでそれを行う理由#2 div 動的にすべての facebook の友達 (長いリスト) をクリックしてから移行が始まるまでに長い時間がかかります...

ここに私が必要とするものの良い例があります: http://www.mpdtunes.com ただ行く: Live Demo -> Login -> Click Artists...

どんな提案も大歓迎です！

どうもありがとうございました！！！！

4

1 に答える 1

2

基本的にあなたはこれをしたい：

  1. 次のようなボタンを使用します。

    <a href="#" id="to-page2">goto Page 2</a>

  2. クリック イベントを追加します。

    $(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#to-page2', function(){ 
        // Load internal page content
    });       
});

    #indexボタンを含むページのIDはどこにありますか。

  3. ローディング アニメーション (別名 ajax ローダー) を表示する

    setTimeout(function(){
    $.mobile.loading('show');
},1);

    Web キット ブラウザーでは、動的にトリガーされる ajax ローダーに問題があるため、 SetTimeoutが必要です。

  4. 内部ページのコンテンツを読み込みます。複数のページで 1 つの HTML ページを使用している場合、新しいコンテンツをリストビューにすぐに追加できます。これは、listview が既に DOM に読み込まれているためです。複数の HTML ページを使用している場合は、ページのコンテンツをlocalstorage変数に保存します。

  5. 再び setTimeout を使用して ajax ローダーを非表示にします。

  6. 次のようにページ遷移を開始します。

    $.mobile.changePage("#page2");

  7. HTML ページが 1 つある場合は、これで終わりです。ページ コンテンツをlocalstorage内に保存した場合は、次のように、2 番目のページのpagebeforeshowイベント中にコンテンツをロードする必要があります。

    $(document).on('pagebeforeshow', '#page2', function(){ 
    // Load internal page content from local-storage and append it
});

  8. 最後のステップは、リストビュー ページのコンテンツの初期化です。それについては、私の他の回答を見てください。リストビューに関するトピックを探してください。

于 2013-05-23T14:46:47.210 に答える