jQuery Mobile 重用标题和导航
Posted
技术标签:
【中文标题】jQuery Mobile 重用标题和导航【英文标题】：jQuery Mobile Reusing a Header and Navigation 【发布时间】：2014-04-28 20:05:07 【问题描述】：我是 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 是加载新页面的标准方法吗？
任何帮助将不胜感激。
谢谢。
【问题讨论】：
【参考方案1】：您可以使用 External Header 和 Popup 并让它们从任何页面访问。
将两个 div 分开放在body 内，而不是放在任何其他页面内。确保不要将 Popup div 包装在任何其他 div/容器中，而是 body。
<body>
<div data-role="header" data-theme="a">
</div>
<div data-role="popup">
</div>
<div data-role="page">
</div>
</body>
由于两者都是外部小部件，您需要手动初始化它们。调用.toolbar() 来初始化 Header，调用.popup() 来初始化 Popup。如果 Popup 包含其他 jQM 小部件，例如listview，您需要调用.enhanceWithin() 来初始化 Popup 中的小部件。只需在head 中添加以下代码即可。
$(function ()
$("[data-role=header]").toolbar(); /* initialize header */
$("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
);
Demo
【讨论】：
以上是关于jQuery Mobile 重用标题和导航的主要内容，如果未能解决你的问题，请参考以下文章
用于 hashbang 导航的 jQuery Mobile 和“查询参数”
如何使用 OnClick 事件设置 Jquery Mobile 导航