Вкладки мобильной навигации jQuery
Я хочу иметь вкладку в моем проекте jQuery Mobile. Я знаю, что могу использовать роль "navbar" для передачи данных, но я хочу изменить контент ниже этого навигатора без перехода на новую страницу. До сих пор у меня могло быть только несколько разных страниц с одним и тем же навигационным соединением, но это не то, что я хочу.
Кто-нибудь может мне помочь?
Заранее благодарю
Ответы
Ответ 1
Вы можете использовать jQuery Mobile navbar styling, но используйте свой собственный обработчик кликов, поэтому вместо смены страниц щелчок просто скроет/покажет правильный контент на той же странице.
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 (или любой другой контейнер, который вы хотите использовать), который будет отображаться.
Обновление
Через 1 год я вернулся к этому ответу и заметил, что делегированный обработчик обработчика событий может быть оптимизирован немного, чтобы использовать класс, а не атрибут (что намного быстрее поиска):
$(document).delegate('.ui-navbar a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
});
Обновление
Этот код можно сделать более модульным с помощью относительных селекторов, а не абсолютных (например, $('.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();
});
Это позволяет вам вставлять вкладки и/или иметь несколько наборов вкладок на страницах или псевдостранах.
Используется некоторая документация для "относительных селекторов":
Вот пример: http://jsfiddle.net/Cfbjv/25/ (теперь он отключен)
Ответ 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;
});
});
Ответ 3
@Майк Бартлетт
Я боролся с этим сам, но после того, как он нарушил код Джаспера, похоже, что есть небольшой нюанс из его опубликованного кода и на странице jsfiddle.
Где он разместил
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });
Мне было полезно изменить последнюю строку, чтобы просто вызвать любой контент, который вы установили для значения "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 затем читает
<div data-role="navbar">
<ul>
<li><a href="#" data-href="#a">One</a></li>
<li><a href="#" data-href="#b">Two</a></li>
</ul>
Это почти то же самое, что и у него, но по какой-то причине я не получил сообщение об ошибке загрузки страницы. Надеюсь, что это поможет...
Ответ 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>
спасибо
Ответ 5
Я заметил, что вопрос был задан четыре года назад, поэтому я не уверен, был ли виджет Tab доступным с JQ Mobile в то время. в любом случае я парень с 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>
Ответ 6
Мне понравился ответ @Ryan-Haney, но я подумал, что добавлю свой собственный черновик, если кто-нибудь сможет найти более эффективный способ сделать это, добавьте комментарий.. спасибо
Я сделал это так, потому что у меня есть куча "включенных" файлов, которые загружаются в DOM во время выполнения, поэтому я не смог бы жестко записать, что n-я вкладка подсвечена/активна для каждой страницы, такой как Ryan мог. У меня также есть роскошь наличия только одного табло в моем приложении.
$(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');
});