Jquery mobile navigation push

jquery mobileのレイアウトに問題があります。私がナビゲーションを開くためのボタンをクリックすると、私のヘッダーだけが移動しました。Jquery mobile navigation push

テキストが右に移動していない理由を知っている人がいますか？私は私の2ページ目のヘッダーに私のテキストを入れているので、私の最初のページにあるは、それが正常に動作している私は、メインとそれが

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>layout</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
</head> 
<body> 
<div data-role="panel" id="navigation" data-position="left" data-display="push" data-theme="b"> 
    <h1>Navigation</h1> 
    <ul data-role="listview"> 
     <li><a href="#home" data-rel="close">Home</a></li> 
     <li><a href="#sessions" data-rel="close">Sessions</a></li> 
    </ul> 
</div> 

<div data-role="page" id="home"> 

    <header data-role="header" data-position="fixed"> 
     <h1>JSconf</h1> 
     <a href="#navigation" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">Navigation</a> 
    </header> 

<header data-role="header"> 
    <main data-role="main"> 
     <h2>May 3rd 2016</h2> 
     <ul class="linklist" data-role="controlgroup" data-type="horizontal"> 
      <li><a href="#" data-role="button">Buy Ticket</a></li> 
      <li> 
       <a href="#" class="ui-btn">Buy Student ticket</a></li> 
     </ul> 


     <h2> The power of Javascript</h2> 



     <a href="#popup" class="ui-btn ui-btn-inline" data-transition="pop">Keep me informed</a> 

    </main> 
</header> 
</div> 

<div id="sessions" data-role="page" > 
    <header data-role="header" data-position="fixed"> 
     <h1>JSconf</h1> 
     <a href="#navigation" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">Navigation</a> 

    </header> 
    <main data-role="main"> 
     hmmm 
    </main> 


</div> 

<script> 
    $(function(){ 
     $('body>[data-role="panel"]').panel().enhanceWithin(); 
    }); 
</script> 

</body> 
</html>

出典

2016-04-09 user2978798

問題の画像を移動していないを持っています

<header>と<main>タグを<div>に置き換えることをお勧めします。

推奨ドキュメント：http://demos.jquerymobile.com/1.4.0/pages/

はまた、私は少しあなたのコードをクリーンアップしている、と（下）バイオリンを作った：

<div data-role="panel" id="navigation" data-position="left" data-display="push" data-theme="b"> 
    <h1>Navigation</h1> 
    <ul data-role="listview"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#sessions">Sessions</a></li> 
    </ul> 
</div> 

<div data-role="page" id="home"> 
    <div data-role="header" data-position="fixed"> 
    <h1>JSconf</h1> 
    <a href="#navigation" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">Navigation</a> 
    </div> 
    <div data-role="main"> 
    <h2>May 3rd 2016</h2> 
    <ul class="linklist" data-role="controlgroup" data-type="horizontal"> 
     <li><a href="#" data-role="button">Buy Ticket</a></li> 
     <li><a href="#" class="ui-btn">Buy Student ticket</a></li> 
    </ul> 
    <h2> The power of Javascript</h2> 
    <a href="#popup" class="ui-btn ui-btn-inline" data-transition="pop">Keep me informed</a> 
    </div> 
</div> 

<div id="sessions" data-role="page"> 
    <div data-role="header" data-position="fixed"> 
     <h1>JSconf</h1> 
     <a href="#navigation" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-corner-all">Navigation</a> 
    </div> 
    <div data-role="main"> 
     This is page 2 
    </div> 
</div>

の作業フィドル：コードのhttps://jsfiddle.net/8s2gpqmp/

出典

2016-04-11 20:02:01

おかげで、それはうまく動作しますが、私は私のjsファイルを実装するとき私は以前と同じ問題があります。 – user2978798

問題を示すサンプルコードを表示できますか？ –

私が使用したコードはあなたのコードです。しかし、私のパネルを左または右に置くための追加のjsスクリプトを使用します。私はまた、上に写真を掲載しました。このページの – user2978798

Jquery mobile navigation push

答えて

関連する問題