jQuery Mobile - ヘッダーが2番目のページに表示されない

誰かが私を悲惨さから救い、なぜこれがうまくいかないのか教えてください。jQuery Mobile - ヘッダーが2番目のページに表示されない

私は、単純な2ページのテストサイトを持っている - 各ページは、ヘッダーと、他のページへのリンクを持っている - ので、あなただけのときに、サイト

すべてが正常に見える1から次と背中などにクリックすることができます負荷 - ページ1にヘッダーが表示されます。ページ2のボタンをクリックすると、ページはロードされますが、ヘッダーはページ1のようにレンダリングされません。

私はこのような単純なテストに特別なことをしなくてはならないとは思っていませんでした。

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <title>Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="pg_1"> 
     <div data-role="header" data-position="fixed"> 
      <h1>Page 1</h1> 
     </div> 
     <div data-role="content"> 
      <a data-role="button" data-rel="close" href="#pg_2">Goto Page 2</a> 
     </div> 
    </div> 
    <div data-role="page" id="pg_2"> 
     <div data-role="header" data-position="fixed"> 
      <h1>Page 2</h1> 
     </div> 
     <div data-role="content"> 
      <a data-role="button" data-rel="close" href="#pg_1">Goto Page 1</a> 
     </div> 
    </div> 
</body> 
</html>

私はjQuery 1.7でも同様の結果を試しています。

私は何か変わったことをしているに違いありませんが、それを見ることはできません。どんな助けも大いに評価されました。

よろしく Nymor

編集：私は初心者が、ページ1とページ2だと彼らは私を探して画像を追加することはできません

http://i104.photobucket.com/albums/m186/Nymor/misc/jqm_t1-1.png 
http://i104.photobucket.com/albums/m186/Nymor/misc/jqm_t1-2.png

出典

2012-05-01 Nymor

で見ることができますが、削除する必要がリンクからdata-rel="close"ここで

がソリューションです：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <title>Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="pg_1" data-position="fixed"> 
     <div data-role="header"> 
      <h1>Page 1</h1> 
     </div> 
     <div data-role="content"> 
      <p><a data-role="button" href="#pg_2">Goto Page 2</a></p> 
     </div> 
    </div> 
    <div data-role="page" id="pg_2" data-position="fixed"> 
     <div data-role="header"> 
      <h1>Page 2</h1> 
     </div> 
     <div data-role="content"> 
      <p><a data-role="button" href="#pg_1">Goto Page 1</a></p> 
     </div> 
    </div> 
</body> 
</html>

出典

2012-05-01 14:14:58 phemios

ありがとうphemiosが - それはそこに入ったのか分かりません。 – Nymor

利用可能なすべての属性を確認できます[docのデータ属性参照]（http://jquerymobile.com/demos/1.0/docs/api/data-attributes.html） – phemios

jQuery Mobile - ヘッダーが2番目のページに表示されない

答えて

関連する問題