jQuery Mobile 重用标题和导航

标签 jquery html jquery-mobile navigation

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

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

<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 是加载新页面的标准方式吗?

如有任何帮助,我们将不胜感激。

谢谢。

最佳答案

您可以使用External Header 和 Popup 并从任何页面访问它们。

将两个 div 分开放在 body 中,而不是放在任何其他页面中。确保除了 body 之外,没有将 Popup div 包装在任何其他 div/容器中。

<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 中的widgets。只需在 head 中添加以下代码即可。

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

Demo

关于jQuery Mobile 重用标题和导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22559039/

相关文章:

javascript - 通过 C# 在 EmailTemplate.html 中打印数组

javascript - map View 未加载 PhoneGap

javascript - iDangero.us Swiper - 处理大型图像集

jquery - 单击时显示同级 <i>

jQuery Masonry 和 margin-right

jquery - toggleClass 当前目标

javascript - 从 Iframe 调用 EXTjs 中的父 Controller 函数

Javascript - 列出网络浏览器正在下载的文件

html - 无法将我网站的主要文本放在侧边菜单旁边,例如标题和其他信息

jquery 移动导航栏和 ListView 项目有时会出现圆角