jqueryのモバイルpageContainer問題

私が上で正しくドキュメントを読んでいた場合：pageContainerを使用してhttp://jquerymobile.com/demos/1.1.0/docs/api/methods.html jqueryのモバイルpageContainer問題

、それがテンプレートヘッダーとフッターであるかのような役割は、例えば、私の現在のページに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」のため、代わりに「ページ1」の交換のこの負荷は、私は新しい空のページにリダイレクトページ2

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

です。私が間違っていることを指摘してもらえれば幸いです。

出典

2012-05-08 Juan Carlos Moreno

がここに残念ながらフォーマットにこの方法は、しかし、ない要素を保持しません直接jQueryの負荷を利用し、APIを介してこれを実現する方法です。

$(document).bind('pageload',function(evt,data){ 
    $(document).unbind('pageload'); 
    $(data.page).fadeIn(); 
}); 
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});

出典

2012-05-09 04:35:49

これは 'changePage'でなぜうまくいかないのですか？最初の引数としてjQueryコレクションを使用する必要があります。 – Robin

私は、pagechangeはloadPageのchangePageとpageLoadに使用されるイベントだと思います。私はなぜchangePageのページを徹底的に注入できなかったのか分かりませんが、これは私のために働いていました。 –

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

console.log($.mobile.pageContainer)を実行すると、bodyという要素：http://jsfiddle.net/8T35d/が表示されます。

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

あなたが永続的なヘッダ/フッタを探しているなら、ドキュメントで、このページを見てみましょうに：http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

出典

2012-05-08 16:18:12 Jasper

あなたがここにあなたのIDに構文エラーがあります。

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

変更それはへ（ハッシュを削除する）：

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

および関連質問Open links in div container in JQuery Mobileによると、changePageは（）ロードサーバcontenのために動作していないようページ内の特定のコンテナに移動します。ページ全体を変更したい。

これは動作します：

$(document).ready(function(){ 
    $("#content_container").load("page2.html"); 
});

出典

2012-05-08 17:08:23 jdi

jquery mobileは、提供されているものとしてはあまり意味がないようです。通常、jqueryに固執する方がよいでしょう。 –

jqueryのモバイルpageContainer問題

答えて

関連する問題