Question

我是jQuery Mobile的新手，在理解重用标题和常规导航时遇到了问题。

所以我创建了一个标题，右侧有一个菜单按钮。单击此菜单栏会出现一个弹出窗口，其中包含指向其他页面的链接：

<div data-role="header">
       <h1>Home</h1>
       <a href="#popupMenu" data-rel="popup" data-transition="slide" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-right ui-btn-a">Menu</a>
           <div data-role="popup" id="popupMenu"  data-theme="a" style="top: 22px; right: -12px">
                  <ul data-role="listview" data-inset="true" style="min-width:250px; min-height: 698px;">
                      <li><a href="test1.html">Home</a></li>
                      <li><a href="test2.html">Second</a></li>
                 </ul>
           </div>
</div>

我可以在所有页面上复制此代码，但是从我简要阅读的内容中，jQuery会自动为我做这些。这是真的。如果不是我如何得到它。

关于导航页面和重用标题的问题是a href加载新页面的标准方法吗？

任何帮助都将不胜感激。

感谢。

Answer 1

您可以使用外部标题和弹出框，并可以从任何页面访问它们。

将div 单独放在body内，而不是放在任何其他页面内。确保不要将Popup div包装在除body之外的任何其他div /容器中。

<body>
  <div data-role="header" data-theme="a">
  </div>

  <div data-role="popup">
  </div>

  <div data-role="page">
  </div>
</body>

由于两者都是外部小部件，因此您需要手动初始化它们。致电.toolbar()至初始化标头，并.popup()至初始化弹出窗口。如果Popup包含其他jQM小部件，例如 listview ，您需要在Popup中调用.enhanceWithin()到初始化小部件。只需在head。

中添加以下代码即可

$(function () {
   $("[data-role=header]").toolbar(); /* initialize header */
   $("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});

<强> Demo

jQuery Mobile重用标题和导航

1 个答案: