Jquery mobile Navigation push

Ich habe ein Problem mit dem Layout von Jquery Mobile. Wenn ich auf die Schaltfläche zum Öffnen der Navigation klicke, wird nur meine Kopfzeile verschoben.Jquery mobile Navigation push

Jemand weiß, warum mein Text nicht nach rechts bewegt? auf meiner ersten Seite ist es gut funktioniert, weil ich meinen Text in der Kopfzeile auf meine zweite Seite gestellt haben habe ich eine Haupt und bewegt sich nicht

Ausgabe Bild

picture

<!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>

Quelle

2016-04-09 user2978798

Ich schlage vor, Sie ersetzen Sie <header> und <main> Tags mit <div>.

Empfohlene Dokumentation: http://demos.jquerymobile.com/1.4.0/pages/

Außerdem habe ich Ihren Code ein bisschen aufgeräumt, und machte eine Geige (unten):

<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>

Arbeits Geige: https://jsfiddle.net/8s2gpqmp/

Quelle

2016-04-11 20:02:01

Danke für den Code, Es funktioniert gut, aber wenn ich meine Js-Datei implementieren, habe ich das gleiche Problem wie zuvor. – user2978798

Können Sie Beispielcode präsentieren, der das Problem veranschaulicht? –

Der Code, den ich verwendet habe, ist dein Code. Aber mit einem zusätzlichen js-Skript für mein Panel auf der linken oder rechten Seite. Ich habe auch ein Bild obenauf gepostet. dieser Seite – user2978798

Antwort

Verwandte Themen