Question

我是jQuery Mobile的新手，我正在为我的移动网络应用项目使用jQuery Mobile 1.4。我想要的是将选项卡内容放在导航栏上方，以便我可以将导航栏/制表符放在页脚和页眉和页脚之间的内容中。

<div data-role="page" id="northet">
    <div data-role="header" data-theme="a"><a href="#homepage" data-role="button" data-icon="home">Home</a>
    <h1>North Route</h1>
  </div>
  <div data-role="tabs" data-position="fixed">
    <div data-role="navbar" id="navbar" data-iconpos="top" >
      <ul>
        <li><a href="#northlist" data-icon="bullets"  class="ui-btn-active ui-state-persist" >Lists</a></li>
        <li><a href="#northmap"  data-icon="location">Map</a></li>
      </ul>
    </div>
    <!-- End of Northern Rout Tabs -->
    <div id="northlist" class="ui-body-d ui-content ui-state-persist ">
      <ul data-role="listview" data-icon="false" data-theme="a">
        <li><a href="#debrelibanos"> <img src="images/list_thumb/debrelibanos_thumb.jpg" alt="debrelibanos">
          <h3>Debre Libanos</h3>
          <p>103 Km</p>
        </a></li>
        <li><a href="#portugesebridge"> <img src="images/list_thumb/portugesebridge_thumb.jpg" alt="portugesebridge">
          <h3>Portugese Bridge</h3>
          <p> Km</p>
        </a></li>
        <li><a href="#abbaygoarge"> <img src="images/list_thumb/abbaygoarge_thumb.jpg" alt="abbaygoarge">
          <h3>Blue Nile Goarge</h3>
          <p>103 Km</p>
        </a></li>
        <li><a href="#abbayfall"> <img src="images/list_thumb/bulefall_thumb.jpg" alt="abbayfall">
          <h3>Blue Nile Fall</h3>
          <p>592 Km</p>
        </a></li>
        <li><a href="#gefersa"> <img src="images/list_thumb/gefersa_thumb.jpg" alt="Gefersa">
          <h3>Gefersa Reservoer</h3>
          <p>18 Km</p>
        </a></li>
   </ul>
    </div>

    <div id="northmap" class="ui-body-d ui-content" >
      <h3> Map Of Northern Ethiopia</h3>
    </div>
  </div>
  <div data-role="footer" data-position="fixed">
    <h4>Footer</h4>
  </div>

Answer 1

您可以将标签按钮移动到页脚，但是您必须添加javascript以使按钮单击隐藏并显示标签。对于您的示例，您可以向所有选项卡按钮（tabButton）添加一个类，为可以隐藏和显示的所有视图添加第二个类（tabView）。

然后在pagecreate事件中，首先隐藏除应该可见的默认视图之外的所有视图。第二个处理选项卡按钮上的click事件：

$(document).on("pagecreate", "#northet", function(){
    //start with only viewone visible
    $("#northmap").hide();

    $(".tabButton").on("click", function(){
        $(".tabButton").removeClass("ui-btn-active");        
        $(".tabView").hide();
        var href = $(this).prop("href");
        $(href.substr(href.indexOf('#'))).show();        
        $(this).addClass("ui-btn-active");
        return false;
    });
});

单击按钮时，从按钮中删除活动类，隐藏所有视图，找到应显示的视图（单击按钮的href），显示该视图，并使当前按钮处于活动状态。

这是 DEMO

在jQuery mobile 1.4中向上对齐标签

1 个答案: