Javascript jQuery Mobile 导航选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6849019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile Navigation Tabs
提问by Matteo
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.
我想在我的 jQuery Mobile 项目中有一个选项卡导航。我知道我可以使用数据角色“导航栏”，但我只想更改导航栏下方的内容，而无需滑动到新页面。到目前为止，我只能让几个不同的页面使用相同的导航栏相互链接，但这不是我想要的。
Can anyone help me?
谁能帮我？
Thank you in advance
先感谢您
回答by Jasper
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.
您可以使用 jQuery Mobile 导航栏样式，但使用您自己的点击处理程序，因此点击不会更改页面，而是在同一页面上隐藏/显示正确的内容。
HTML
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
CSS
.content_div {
display: none;
}
.content_div:first-child {
display: block;
}
Here is a jsfiddle of the above code: http://jsfiddle.net/3RJuX/
这是上述代码的jsfiddle：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.
- 导航栏中的每个链接都有一个“data-href”属性，该属性设置为将显示的 div（或您想要使用的任何容器）的 id。
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).
通过使用相对选择器而不是绝对选择器（例如$('.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();
});?
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
Here was an example: http://jsfiddle.net/Cfbjv/25/(It's offline now)
这是一个例子：http: //jsfiddle.net/Cfbjv/25/（现在离线）
回答by Ryan Haney
UPDATE: Check out my jsfiddle at http://jsfiddle.net/ryanhaney/eLENj/
更新：在http://jsfiddle.net/ryanhaney/eLENj/查看我的 jsfiddle
I just spent some time figuring this out, so I thought I would answer this. Note I am using multi-page single file, YMMV.
我只是花了一些时间来解决这个问题，所以我想我会回答这个问题。注意我使用的是多页单文件 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;
});
});
回答by Ralph Marchant
@Mike Bartlett
@迈克巴特利特
I struggled with this myself but after breaking Jasper's code down it looks like there is a slight nuance from his posted code and that on the jsfiddle page.
我自己为此而苦苦挣扎，但在将 Jasper 的代码分解后，他发布的代码和 jsfiddle 页面上的代码似乎存在细微差别。
Where he has posted
他发帖的地方
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });
I found it useful to change the last line to simply call whatever content you set the "data-href" value to be in your navbar.
我发现更改最后一行以简单地调用您将“data-href”值设置为导航栏中的任何内容很有用。
$('div[data-role="navbar"] a').live('click', function () {
$(this).addClass('ui-btn-active');
$('div.content_div').hide();
$($(this).attr('data-href')).show();
});
my navbar html then reads
我的导航栏 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>
Which is pretty much the same as his but for some reason I got no "error loading page" message. Hope that helps...
这与他的几乎相同，但由于某种原因，我没有收到“错误加载页面”消息。希望有帮助...
回答by Rajarshi Das
Please refers this below link for all kind of nav bar in jquery
有关 jquery 中所有类型的导航栏，请参考以下链接
http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html
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>
thanks
谢谢
回答by rashidnk
I noticed that the question was asked four years ago, so i'm not sure whether the Tab widget were available with JQ Mobile at that time. anyway i'm a guy from 2015
我注意到这个问题是四年前提出的，所以我不确定当时 JQ Mobile 是否提供 Tab 小部件。无论如何，我是 2015 年的男人
the awesome solution that i use as below with Jquery Mobile 1.4.5
我在 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>
回答by Ads
I liked @Ryan-Haney's answer, but thought I'd add my own rough draft in, if anyone can find a more efficient way of doing this, then please add a comment.. thanks
我喜欢@Ryan-Haney 的回答，但我想我会添加我自己的草稿，如果有人能找到更有效的方法，请添加评论..谢谢
I did it this way because I have a bunch of "include" files that get loaded into the DOM at runtime, so I couldn't hard-code that the n-th tab is highlighted/active for each page like Ryan could. I also do have the luxury of having only a single tabbar in my app.
我这样做是因为我有一堆“包含”文件在运行时加载到 DOM 中，所以我无法像 Ryan 那样硬编码每个页面的第 n 个选项卡是突出显示/活动的。我也有幸在我的应用程序中只有一个标签栏。
$(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');
});
