jQuery Mobile导航选项卡

Question

我想在我的jQuery Mobile项目中有一个选项卡导航。我知道我可以使用数据角色“navbar”，但我只想更改该导航栏下方的内容，而不必滑动到新页面。到目前为止，我只能使用相同的导航栏链接到彼此的几个不同的页面，但这不是我想要的。

任何人都可以帮助我吗？

预先感谢您

Answer 1

您可以使用jQuery Mobile的导航栏样式，但使用自己的点击处理程序，以便而不是改变页面的点击只会隐藏/显示在同一页面上适当的内容。

HTML

<div data-role="navbar"> 
    <ul> 
     <li><a href="#" data-href="a">One</a></li> 
     <li><a href="#" data-href="b">Two</a></li> 
    </ul> 
</div><!-- /navbar --> 
<div class="content_div">onLoad Content</div> 
<div id="a" class="content_div">Some 'A' Content</div> 
<div id="b" class="content_div">Some 'B' Content</div> 

JAVASCRIPT

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
    return false;//stop default behavior of link 
}); 

CSS

.content_div { 
    display: none; 
} 
.content_div:first-child { 
    display: block; 
} 

这里是上面的代码的一个的jsfiddle：http://jsfiddle.net/3RJuX/

注：

• 导航栏中的每个链接都有一个“data-href”属性，设置为要显示的div（或任何您想使用的容器）的id。

更新

一年后我又回到了这个答案，发现委派的事件处理程序选择器可优化了一下，利用类，而不是一个属性（这是快了很多查找）：

$(document).delegate('.ui-navbar a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
}); 

更新

该代码可以做成更MODULA通过使用相对选择符而不是绝对值（例如$('.content_div')，因为这将选择DOM中的所有匹配元素，而不仅仅是相对于单击的按钮）。

//same selector here 
$(document).delegate('.ui-navbar ul li > a', 'click', function() { 

    //un-highlight and highlight only the buttons in the same navbar widget 
    $(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active'); 

    //this bit is the same, you could chain it off of the last call by using two `.end()`s 
    $(this).addClass('ui-navbar-btn-active'); 

    //this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM 
    $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide(); 
});​ 

这允许您在页面或伪页面上嵌套制表符和/或具有多组制表符。

有些文档所用的 “相对选择”：

• .closest()：http://api.jquery.com/closest
• .siblings()：http://api.jquery.com/siblings

下面就是一个例子：http://jsfiddle.net/Cfbjv/25/（现在是离线）

Answer 2

更新：看看我的jsfiddle在http://jsfiddle.net/ryanhaney/eLENj/

我只是花了一些时间弄清楚这一点，所以我想我会回答这个问题。注意我正在使用多页单个文件YMMV。

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
      <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
      <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
     </ul> 
    </div> 
</div> 

$("div[data-role=page]").bind("pagebeforeshow", function() { 
    // prevents a jumping "fixed" navbar 
    $.mobile.silentScroll(0); 
}); 

$("a[data-role=tab]").each(function() { 
     // bind to click of each anchor 
     var anchor = $(this); 
     anchor.bind("click", function() { 
      // change the page, optionally with transitions 
      // but DON'T navigate... 
      $.mobile.changePage(anchor.attr("href"), { 
       transition: "none", 
       changeHash: false 
     }); 

     // cancel the click event 
     return false; 
    }); 
}); 

Answer 3

@Mike巴特利特

我挣扎着这个自己，但打破Jasper的代码下来以后，它看起来像有从他贴出的代码略有细微差别，而且的jsfiddle页面上。

他在那里已经发布

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
$(this).addClass('ui-btn-active'); 
$('.content_div').hide(); 
$('#' + $(this).attr('data-href')).show(); }); 

我认为应该改变的最后一行简单地调用任何内容设置“数据HREF”的价值在你的导航栏。

$('div[data-role="navbar"] a').live('click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('div.content_div').hide(); 
    $($(this).attr('data-href')).show(); 
    }); 

我的导航栏HTML然后读取

<div data-role="navbar"> 
<ul> 
    <li><a href="#" data-href="#a">One</a></li> 
    <li><a href="#" data-href="#b">Two</a></li> 
</ul> 

这是几乎一样的他，但由于某种原因，我没有“错误加载页面”的消息。希望可以帮助...

Answer 4

请在jQuery中是指这下面链接所有类型的导航栏

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar"> 
    <ul> 
    <li><a href="a.html" class="ui-btn-active">One</a></li> 
    <li><a href="b.html">Two</a></li> 
    </ul> 
</div> 

感谢

Answer 5

我喜欢@瑞恩 - 哈尼的答案，但思想我会添加自己的草稿，如果有人可以找到一个更有效的方式做到这一点，然后请添加评论..谢谢

我这样做是因为我有一堆在运行时加载到DOM中的“包含”文件，所以我无法硬编码第n个选项卡突出显示/激活每个页面，如Ryan可以。我也有我的应用程序只有一个单一的tabbar豪华。

$(document).delegate('.ui-navbar a', 'tap', function() 
{ 
    $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active'); 
    $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active'); 
}); 

Answer 6

我注意到这个问题是在四年前问的，所以我不确定当时是否有JQ Mobile的Tab小部件。反正我是从2015年

的真棒解决一个家伙，我下面使用与jQuery Mobile的1.4.5

<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-ignore.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>