8

ドキュメントを正しく読んでいる場合: http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

pageContainer と role を使用すると、1 つのページのコンテンツを現在のページに置き換える必要があります。たとえば、ヘッダーとフッターは保持されているが、コンテンツのみが変更されているテンプレートであるかのように。

これがどのように機能するかを理解するために簡単な例を作成しようとしていますが、非常に苦労しています。

これが私の超簡単な例です。

<!DOCTYPE html>
<html>
  <head>
  <title></title>

  <link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" />   
  <script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>        
  <script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){
        $.mobile.changePage('page2.html',{
            'pageContainer': $('#content_container'),
            'role':'content'
        });
    });

  </script>
  </head>
  <body >
      <div data-role="page">
          <div data-theme="a" data-role="header">
              <div data-role="navbar" data-iconpos="top">
                  My Header
              </div>
          </div>
          <div id='content_container' data-role="content">
              <p>Page 1 </p>
          </div>
          <div data-theme="a" data-role="footer">
              My Footer
          </div>
      </div>                 
  </body>
</html>

そしてこれが2ページ目

<html>
    <body>
        <div data-role="page">
            <p>Page 2</p>
        </div>
    </body>
</html>

これが読み込まれると、「ページ 1」を「ページ 2」に置き換える代わりに、新しい空のページにリダイレクトされます。私が間違っていることへのポインタをいただければ幸いです。

4

3 に答える 3

3

APIを介してこれを実現する方法は次のとおりです。残念ながら、jqueryの負荷を直接利用しても、このメソッドが保持する要素の形式は保持されません。

$(document).bind('pageload',function(evt,data){ 
     $(document).unbind('pageload');  
     $(data.page).fadeIn(); 
});
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});
于 2012-05-09T04:35:49.377 に答える
3

ID に構文エラーがあります: 

<div id='#content_container' data-role="content">

次のように変更します (ハッシュを削除):

<div id='content_container' data-role="content">

また、関連する質問Open links in div container in JQuery Mobileによると、 changePage() は、サーバー コンテンツをページ内の特定のコンテナーにロードするために機能しないようです。ページ全体を変更したい。

これは機能します：

$(document).ready(function(){
    $("#content_container").load("page2.html");
});
于 2012-05-08T17:08:23.703 に答える
1

data-role="content"2 番目のページに要素を追加する必要があります。メソッドのpageContainerオプションはchangePage()、特定のページのコンテナーではなく、すべてのページのコンテナーを変更することを目的としています (このオプションを使用したことはありませんが、これがアイデアだと思います)。

a を実行すると、それが要素console.log($.mobile.pageContainer)であることがわかります: http://jsfiddle.net/8T35d/。body

このオプションの目的は、メソッドを呼び出しても変更されない永続的な UI を作成できるようにすることですchangePage()。

永続的なヘッダー/フッターを探している場合は、ドキュメントのこのページをご覧ください: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

于 2012-05-08T16:18:12.620 に答える