jQuery Mobile 重用标题和导航
[英] jQuery Mobile Reusing a Header and Navigation
本文介绍了jQuery Mobile 重用标题和导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 jQuery Mobile 的新手，在理解重用标题和一般导航方面有问题.
所以我创建了一个标题，其右侧有一个菜单按钮.单击此菜单栏时会出现一个弹出窗口，其中包含指向其他页面的链接:
<h1>主页</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">菜单</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">首页</a></li><li><a href="test2.html">第二</a></li>
我可以在所有页面上复制此代码，但从我简要阅读的内容来看，jQuery 会自动为我执行此操作.这是真的.如果不是，我怎么得到它.
在涉及导航页面和重用标题时，根据这个问题是 a href 加载新页面的标准方法吗?
任何帮助将不胜感激.
谢谢.
解决方案
您可以使用 External Header 和 Popup，并可以从任何页面访问它们.
将两个 div 单独 放在 body 内，而不是放在任何其他页面内.确保您没有将 Popup div 包装在任何其他 div/容器中，但 body.
<div data-role="header" data-theme="a">
<div data-role="popup">
<div data-role="页面">
由于两者都是外部小部件，您需要手动初始化它们.调用 .toolbar() 来初始化 Header，调用 .popup() 来初始化 Popup.如果 Popup 包含其他 jQM 小部件，例如listview，您需要调用.enhanceWithin() 来初始化 Popup 中的小部件.只需在 head 中添加以下代码即可.
$(function () {$("[data-role=header]").toolbar();/* 初始化头文件 */$("[data-role=popup]").popup().enhanceWithin();/* 初始化弹出窗口 */});
<块引用>
演示
I'm new to jQuery Mobile and have having issues understanding reusing a header and general navigation.
So I've created a header which has a menu button on the right. On clicking this menu bar a popup appears with links to other pages:
<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>
I can duplicate this code across all pages but from what I've briefly read jQuery does that for me automatically. Is this true. If not how do i get it to.
Following from this question when it comes to navigating pages and reusing headers is the a href the standard way to do load new pages?
Any help would be appreciated.
Thanks.
解决方案
You can use External Header and Popup and have them accessible from any page.
Place both div separately inside body not inside any other page. Make sure you don't wrap Popup div in any other div/container but body.
<body>
<div data-role="header" data-theme="a">
</div>
<div data-role="popup">
</div>
<div data-role="page">
</div>
</body>
Since both are External widgets, you need to initialize them manually. Call .toolbar() to initialize Header, and .popup() to initialize Popup. If Popup contains other jQM widgets e.g. listview, you need to call .enhanceWithin() to initialize widgets inside Popup. just add the below code in head.
$(function () {
$("[data-role=header]").toolbar(); /* initialize header */
$("[data-role=popup]").popup().enhanceWithin(); /* initialize popup */
});
Demo
这篇关于jQuery Mobile 重用标题和导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
