Question

我是jQuery mobile的新手。我想知道在页面之间导航的最佳做法是什么。假设我有page1.html page2.html。在page1.html内，我点击链接<a href='page1.html'>load</a>

所以我想知道有两种可能性

要么只加载整个page2.html
只需在<div role="main" class="ui-content">

在jqm的背景下推荐哪一个？

Answer 1

您可以JQuery Mobile Tabs的形式创建导航栏（还创建了JSFiddle）

这将允许您在网页顶部创建一个固定标题，其中一个整页内有多个页面。这是一项伟大的技术。

提供的链接示例HTML：

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>

您可以使用data-role属性识别功能并分配角色，在这种情况下，您可以将data-role分配给div元素，以充当选项卡菜单包装页面。

要识别您使用<a>元素链接到每个页面的页面，请在选项卡列表中。将ID分配给<div>以充当页面，您可以在选项卡式菜单中引导这些链接，以显示所呈现的<div>内的内容。

我更喜欢这个选项，但您可以选择其他各种选项。

进一步阅读

数据角色＆＃34; navbar＆＃34; W3C Navbar
JQuery Mobile Navigation

Answer 2

您还可以使用面板，您通常会看到一个汉堡包菜单。您可以点击它并从左侧或右侧（再次由您决定）菜单动画（您可以选择动画形式）。 ......这是他们的文档http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/

的演示

推荐的jquery mobile页面导航方式

2 个答案: