jQuery Mobile重用页眉和导航 [英] jQuery Mobile Reusing a Header and Navigation
问题描述
我是jQuery Mobile的新手，在理解重复使用标题和常规导航时遇到了问题。
所以我创建了一个标题，其上有一个菜单按钮正确的。点击这个菜单栏会出现一个弹出窗口，其中包含指向其他页面的链接：
< div data-role =header>
< h1>主页< / h1>
< div data-role =popupid =popupMenudata-theme =astyle =top：22px; right：-12px>
< li>< a href =test1.html>主页< / a>< / li>
< li>< a href =test2.html>第二个< / a>< / li>
< / ul>
< / div>
< / div>
我可以在所有页面上复制这段代码，但是从我简要阅读的内容中，jQuery为我做了这些自动。这是真的。如果不是我如何得到它。
从这个问题来看，在浏览页面和重用头文件时， 任何帮助都将被赞赏。 谢谢。 您可以使用外部标题和弹出窗口， p> 将div 分开放置在 因为两者都是外部小部件，所以您需要 initialize 手动。调用 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: 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 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 Since both are External widgets, you need to initialize them manually. Call
这篇关于jQuery Mobile重用页眉和导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
body 中，而不在其他任何页面内。确保你不会在任何其他div /容器中包装Popup div，但
<身体GT;
< div data-role =headerdata-theme =a>
< / div>
< div data-role =popup>
< / div>
< div data-role =page>
< / div>
< / body>
.toolbar（）来 initialize 标题， .enhanceWithin（）来初始化 Popup中的小部件。只需在头部中添加以下代码即可。
$（function（） {
$（[data-role = header]）。toolbar（）; / * initialize header * /
$（[data-role = popup]）。popup（）。enhanceWithin （）; / *初始化弹出* /
}）;
<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>
a href the standard way to do load new pages?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>
.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 */
});
