Search jQuery

jQuery Forum

How to Make the Navbar Items Function more like Tabs and not like Pages?

in jQuery Mobile • 12 years ago

Hi guys. I'm really loving JQuery Mobile. I have an issue/question though:

I like how easy it is to set up a "navbar", but I don't like how the tabs function just like a regular page links. They initiate a page transition and add a page to the history. I would think they should function more like TABS, that just switched back and forth, without actually transitioning to a new page. What really drives me bonkers is when you click on a tab, then click the "back" button on the header, it doesn't update the active state of the tabs!

Is there any way to just remove the back button on navbar pages or something? Maybe if I could do that, I could just change the animation for the navbar items and it would FEEL like tabs, and not like links.

Thanks,

Lyle

Replies(3)

panela2011

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

11 years ago

I had exactly the same question and could not find anything. So I came up with my own solution.

My header code:

<div data-role="header">
<h1>Rooms</h1>
<div data-role="navbar">
<ul>
<li><a href="" class="ui-btn-active" onClick="suitesClick(); return false;">Suites</a></li>
<li><a href="" onClick="deluxeClick(); return false;">Deluxe</a></li>
</ul>
</div>
</div>

My content:

<div data-role="content">
<div id="suites">
<p>Really nice suites</p>
</div>
<div id="deluxe">
<p>Deluxe rooms are also pretty nice</p>
</div>
</div>

And finally my js:

function deluxeClick(){
$("#suites").hide();
$("#deluxe").show();
}
function suitesClick(){
$("#deluxe").hide();
$("#suites").show();
}

Tested in Google Chrome and on the iPad (1st generation). Works fine and does what we want!

rkingon

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

11 years ago

Panela, use the power of jquery!

<div data-role="header">
<h1>Rooms</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-tab="suites" class="ui-btn-active">Suites</a></li>
<li><a href="#" data-tab="deluxe">Deluxe</a></li>
</ul>
</div>
</div>

<div data-role="content">
<div class="tab-content">
<div id="suites">
<p>Really nice suites</p>
</div>
<div id="deluxe">
<p>Deluxe rooms are also pretty nice</p>
</div>
</div>
</div>

$(function() {
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$('[data-role="navbar"] a').removeClass("ui-btn-active");
$('.tabs-content').children().hide();
$('#' + $(this).attr('data-tab')).show();
$("html,body").animate({scrollTop:0},500);
$(this).addClass("ui-btn-active");
});
});

sirockin

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

10 years ago

Just one more thing:

To stop all the content displaying before a tab is clicked for the first time, add the following after line 9 above:
$('[data-role="navbar"] a:first').click();

This also removes the need for
class="ui-btn-active"
in the declaration of the first tab.

Top Reply

Response title

Attachments

jQuery Forum

How to Make the Navbar Items Function more like Tabs and not like Pages?

Replies(3)

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

Re: How to Make the Navbar Items Function more like Tabs and not like Pages?

Statistics

Tags

Actions

Related Posts