jQuery移动导航选项卡 [英] jQuery Mobile Navigation Tabs
问题描述
我希望在我的jQuery Mobile项目中有一个标签导航。我知道我可以使用数据角色'navbar'但我只想更改导航栏下面的内容而不刷新到新页面。到目前为止，我只能有几个不同的页面，相同的导航栏相互链接，但这不是我想要的。
I want to have a tab-navigation in my jQuery Mobile project. I know I can use the data-role 'navbar' but I only want to change the content below that navbar without swiping to a new page. So far I could only have several different pages with the same navbar linking to each other but that's not what I want.
任何人都可以帮助我吗？
Can anyone help me?
提前谢谢
推荐答案
你可以使用jQuery Mobile导航栏样式但是使用你自己的click-handler所以不是更改页面，而是单击将隐藏/显示同一页面上的正确内容。
You can use the jQuery Mobile navbar styling but use your own click-handler so instead of changing pages the click will just hide/show the proper content on the same page.
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
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/
Here is a jsfiddle of the above code: http://jsfiddle.net/3RJuX/
注意：
- 导航栏中的每个链接都有一个data-href属性设置为div的id（或者你想要使用的任何容器）将显示。
更新
1年后，我回到这个答案，发现委托事件处理程序选择器可以进行一些优化，以利用类而不是属性（查找速度快得多）：
After 1 year I came back to this answer and noticed that the delegated event handler selector can be optimized a bit to utilize a class rather than an attribute (which is a lot faster of a lookup):
$(document).delegate('.ui-navbar a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
更新
通过使用相对选择器而不是绝对选择器（如 $（'。content_div'）），可以使此代码更加模块化，因为这将选择所有匹配的元素DOM，而不仅仅是相对于点击按钮的那些。）
This code can be made to be more modular by using relative selectors rather than absolute ones (like $('.content_div'), as this will select all matching elements in the DOM rather than just ones relative to the button clicked).
//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();
});
这允许你嵌套选项卡和/或在页面或伪页面上有多组选项卡。
This allows you to nest tabs and/or have multiple sets of tabs on a pages or pseudo-pages.
使用的相对选择器的一些文档：
Some documentation for the "relative selectors" used:
-
.closest（）： http://api.jquery.com/closest -
.siblings（）： http://api.jquery.com/siblings
.closest(): http://api.jquery.com/closest.siblings(): http://api.jquery.com/siblings
以下是一个例子： http://jsfiddle.net/ Cfbjv / 25 / （现在离线）
Here was an example: http://jsfiddle.net/Cfbjv/25/ (It's offline now)
这篇关于jQuery移动导航选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
