Search jQuery

jQuery Forum

mobile jQuery navi examble to tabs

in jQuery Mobile • 4 months ago

Hi,

I have study jQuery and mobile jquery and have surfed throught different websites. Can I somehow use this mobile jquery navigation funtionality http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../ that way that it works like tabs. Tabs just hide and show contents, which are on same url.

1) Is there any change to get jqueymobile examble to work like tabs?

2) http://jsfiddle.net/E86M9/3/ can I use safetely these kind exambles? Does they work on every platform?

3) Why that examble above works only with jQuery 1.6.4?

-R

Replies(8)

Godsbest

Re: mobile jQuery navi examble to tabs

4 months ago

I would suggest you take a look at the documentation & demos for the latest version of jQuery: http://jquerymobile.com/demos/1.2.0/

Godsbest

Re: mobile jQuery navi examble to tabs

4 months ago

The closest thing to tabs that jQM has is collapsible lists: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-collapsible.html. In what platform do you want to use tabs?

You can check out the platforms supported by jQM 1.2.0 here: http://jquerymobile.com/gbs/

haga0054

Re: mobile jQuery navi examble to tabs

4 months ago

I think he is talking about the navbar - and yes you can use navbars safely. Look at navbars in the documentation.

recon66

Re: mobile jQuery navi examble to tabs

4 months ago

Hi,

Thank You for for reply. Maybe I did not describe my problem clearly, sorry I am noobie :)

I'll try again.

Here http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../ when you click Intro to jQuery mobile have great slider to page content. Can I somehow make this navigation functionalities to tabs, which are working only on one page like this do http://jsfiddle.net/E86M9/3/ (hide and show different contents)

and is it safe to use that jsfiddle code if there are no any other solutions?

-R

haga0054

Re: mobile jQuery navi examble to tabs

4 months ago

Are you talking about having transitions for the navbar? If so it's easy... I don't understand the issue here. Is this a simple question about the transitions?

Here is a fiddle that can hopefully answer all questions you have.

http://jsfiddle.net/GsxcP/2/

Navigation to page 2 contains a slide transition
Navigation to page 1 has no transition
The navbar stays with transitions
Navbar button has the active state for current page.
Header stays with transition.

Godsbest

Re: mobile jQuery navi examble to tabs

4 months ago

If you are looking for the slide transition when links in the navbar are clicked, just change "none" to "slide" as shown below:

$("a[data-role=tab]").each(function () {
var anchor = $(this);
anchor.bind("click", function () {
$.mobile.changePage(anchor.attr("href"), {
transition: "slide",
changeHash: false
});
return false;
});
});

http://jsfiddle.net/E86M9/3/

recon66

Re: mobile jQuery navi examble to tabs

4 months ago

Hi,

I have now my own testsite with transitions here http:// Every code has been taken from examples. Why it wont work correctly. Transition works, but when navigation is pressed like two times it get jammed littl bit on the left side on the screen and texts are fuzzy (chrome browser).

-R