导航栏在jQuery Mobile的

我是新来的jQuery Mobile的，需要一些帮助，在我的应用进一步移动所有页面remian不断导航栏在jQuery Mobile的

我用导航条有两个按钮查看和两个按钮导航罚款和显示不同的列表意见&当我点击列表视图项目该页面正在导航到另一个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>

来源

2012-04-12 android phonegap

我已经发布我的HTML code.hope现在u得到一些想法是我的尝试。 – 2012-04-12 13:50:13

实现这一目标的最好办法是把你的导航栏一个JQM头内，使用相同的数据 - 每个标题的ID。即

<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-12 15:13:44 codaniel

嗨codaniel谢谢你的回应，但它不适合我 – 2012-04-13 06:06:16

请给我更多的代码，然后请。你的列表视图页面是什么样的？ – codaniel 2012-04-13 06:16:07

嗨，你可以ü请看看这个链接中的图像http://www.pocketmagic.net/wp-content/uploads/2010/01/android_tab_control_2.jpg我想像这样的东西像image.I得到标签和不同的列表视图下每个选项卡。当我从列表中选择一项，它显示其他页面中的细节，但标签不可见只有数据是可见的，我希望标签在所有页面中可见...希望我能够现在给你一些想法 – 2012-04-13 12:20:12

我从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-02 15:12:59 wangeek

导航栏在jQuery Mobile的

回答

相关问题