Question

我的jquery mobile布局有问题。当我点击按钮打开导航时，只有我的标题移动了。

有人知道为什么我的文字没有向右移动？在我的第一页是它工作正常，因为我已将我的文本放在标题中在我的第二页上，我有一个主要的，并没有移动

问题图片

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

Answer 1

我建议您用<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/

Jquery移动导航推送

1 个答案: