JQuery мобильная навигация push

У меня возникла проблема с расположением jquery mobile. Когда я нажимаю на кнопку для открытия навигации, мой заголовок перемещается.JQuery мобильная навигация push

Кто-то знает, почему мой текст не движется вправо? на моей первой странице он работает нормально, потому что я положил мой текст в заголовке на моей второй странице у меня есть главное и что не движется

выпуск изображения

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>

источник

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 мобильная навигация push

ответ

Смежные вопросы