2

我是 jquery mobile 的新手，需要一些帮助才能在我的应用程序中进一步移动

我使用带有两个按钮视图的 NAVBAR，两个按钮可以正常导航并显示不同的列表视图，当我单击列表视图项时，页面正在导航到另一个 HTML 页面并显示相关数据，但问题是我无法查看导航栏在下一页...

我希望导航栏对于所有页面都保持不变，例如 android 中的标签组活动。任何人都请帮助我提供良好的示例和应用程序，或者向我展示一些好的链接来实现这一目标......

<body>
<div data-role="page" id="page1">
    <div data-role="content">
        <div data-role="navbar" id="nav1">
            <ul>
                <li><a href="#" data-href="dashboard" class="ui-btn-active" datafld="list">Dashboard</a></li>
                <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
            </ul>
        </div>
        <div class="ui-grid-but" id="list">
            <div class="ui-block-a">
                <a  href="#lv1" data-role="button" id="button1" >
                    <img src="task.png" alt="Tasks" /></a>
            </div>
            <div class="ui-block-b">
                <a  href="#lv2" data-role="button" id="button2">
                    <img src="reminder.png" alt="Reminders" /></a>
            </div>
          </div>
          <div class="def_content_div" id="dashboard">
            <ul data-role="listview" data-inset="true">
                <li><a href="#lv1">List View 1</a> </li>
                <li><a href="#lv2" >List View 2</a> </li>
                <li><a href="#lv3" >List View 3</a> </li>
                <li><a href="#lv4" >List View 4</a> </li>
             </ul>
            </div>
            <div class="content_div" id="deals">
                <ul data-role="listview"data-inset="true">
                    <li> <a href="#lv5">List View 5</a></li>
                    <li> <a href="#lv6">List View 6</a></li>
                    <li><a href="#lv7">List View 7</a></li>
                    <li><a href="#lv8">List View 8</a></li>
                </ul>
             </div>
         </div>
4

2 回答 2

0

实现这一点的最佳方法是将导航栏放在 JQM 标头中，并为每个标头使用相同的 data-id。IE

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard" class="ui-btn-active" datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>

您必须在每个列表视图页面中包含上述代码片段。这将给出一个恒定的固定导航菜单的外观。

这是请求http://jsfiddle.net/codaniel/z5VYF/1/的示例

于 2012-04-12T15:13:44.110 回答
0

我从http://jquerymobile.com/demos得到了解决方案

根据 codaniel 的回答，我们需要在每个列表视图页面中包含代码片段。

然后，我们需要将以下类添加到每个页面的“当前”导航按钮。

class="ui-btn-active ui-state-persist"

对于第一页：

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard" class="ui-btn-active ui-state-persist" datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>

第二页：

<div data-role="header" data-posistion="fixed" data-id="constantNav">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-href="dashboard"  datafld="list">Dashboard</a></li>
            <li><a href="#" data-href="deals" class="ui-btn-active ui-state-persist" datafld="list1">Deals</a></li>
        </ul>
    </div>
</div>
于 2012-09-02T15:12:59.020 回答