jQuery Mobile 导航选项卡 [英] jQuery Mobile Navigation Tabs
问题描述
我想在我的 jQuery Mobile 项目中有一个选项卡导航.我知道我可以使用数据角色导航栏"，但我只想更改导航栏下方的内容，而无需滑动到新页面.到目前为止，我只能让几个不同的页面使用相同的导航栏相互链接，但这不是我想要的.
有人可以帮我吗?
提前致谢
您可以使用 jQuery Mobile 导航栏样式，但使用您自己的点击处理程序，因此点击将隐藏/显示相同的内容而不是更改页面页面.
HTML
<ul><li><a href="#" data-href="a">一个</a></li><li><a href="#" data-href="b">两个</a></li></div><!--/navbar --><div class="content_div">onLoad Content</div><div id="a" class="content_div">一些A"内容</div><div id="b" class="content_div">一些B"内容</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;//停止链接的默认行为});
CSS
.content_div {显示:无；}.content_div:第一个孩子{显示:块；}
这是上面代码的jsfiddle:http://jsfiddle.net/3RJuX/
注意:
- 导航栏中的每个链接都有一个data-href"属性，该属性设置为将显示的 div(或您想要使用的任何容器)的 id.
更新
1 年后我回到这个答案并注意到委托的事件处理程序选择器可以稍微优化以利用类而不是属性(查找速度要快得多):
$(document).delegate('.ui-navbar a', 'click', function () {$(this).addClass('ui-btn-active');$('.content_div').hide();$('#' + $(this).attr('data-href')).show();});
更新
通过使用相对选择器而不是绝对选择器(例如 $('.content_div')，可以使此代码更加模块化，因为这将选择 DOM 中的所有匹配元素，而不仅仅是相对于点击的按钮).
//这里是同一个选择器$(document).delegate('.ui-navbar ul li > a', 'click', function () {//取消突出显示并仅突出显示同一导航栏小部件中的按钮$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');//这一点是一样的，你可以通过使用两个`.end()`将它与最后一次调用链接起来$(this).addClass('ui-navbar-btn-active');//这开始相同，但只选择兄弟`.content_div`元素隐藏而不是全部在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/(现在下线了)
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?
Thank you in advance
解决方案 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
$(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;
}
Here is a jsfiddle of the above code: http://jsfiddle.net/3RJuX/
NOTE:
- Each of the links in the navbar have a "data-href" attribute set to the id of the div (or whatever container you want to use) that will be displayed.
Update
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();
});
Update
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
Here was an example: http://jsfiddle.net/Cfbjv/25/ (It's offline now)
这篇关于jQuery Mobile 导航选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
