Onglets de navigation mobile jQuery

Vous pouvez utiliser le jQuery Mobile barre de navigation de style, mais utiliser votre propre cliquez sur gestionnaire de sorte qu'au lieu de changer de pages le clic juste masquer/afficher le contenu sur la même 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;
}

Ici est un jsfiddle le code ci-dessus: http://jsfiddle.net/3RJuX/

REMARQUE:

• Chacun des liens dans la barre de navigation ont une "data-href" attribut la valeur de l'id de la div (ou autre récipient que vous voulez utiliser) qui sera affiché.

Mise à jour

Après 1 an, je suis revenu à cette réponse et a remarqué que le délégué du gestionnaire d'événement sélecteur peut être optimisé un peu pour utiliser une classe plutôt qu'un attribut (qui est beaucoup plus rapide de la recherche):

$(document).delegate('.ui-navbar a', 'click', function () {
    $(this).addClass('ui-btn-active');
    $('.content_div').hide();
    $('#' + $(this).attr('data-href')).show();
});

Mise à jour

Ce code peut être fait pour être plus modulaire en utilisant relative sélecteurs plutôt qu'absolues ( $('.content_div') , comme cela va sélectionner tous les éléments dans le DOM, plutôt que seulement ceux par rapport au bouton cliqué).

//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();
});​

Cela vous permet d'imbriquer des onglets et/ou d'avoir plusieurs paires de languettes sur l'une des pages ou des pseudo-pages.

De la documentation pour la "relative sélecteurs" utilisé:

• .closest() : http://api.jquery.com/closest
• .siblings() : http://api.jquery.com/siblings

Ici est un exemple: http://jsfiddle.net/Cfbjv/25/ (Il est hors ligne maintenant)

@Mike Bartlett

J'ai lutté avec moi-même, mais après la rupture du parc de code vers le bas, il semble comme il y a une légère nuance de son posté code et que sur le jsfiddle page.

Où il a posté une

$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });

J'ai trouvé utile de modifier la dernière ligne de simplement appeler le contenu que vous définissez le "data-href" valeur dans votre barre de navigation.

$('div[data-role="navbar"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $($(this).attr('data-href')).show();
  });

ma navbar html puis lit

<div data-role="navbar">
<ul>
    <li><a href="#" data-href="#a">One</a></li>
    <li><a href="#" data-href="#b">Two</a></li>
</ul>

Qui est à peu près le même que le sien, mais pour une raison que je n'ai pas d'erreur "erreur de chargement de la page" message. Espère que ça aide...

J'ai remarqué que la question a été posée il y a quatre ans, donc je ne suis pas sûr de savoir si l'Onglet widget étaient disponibles avec JQ Mobile à l'époque. de toute façon je suis un gars de 2015

le génial solution que j'utilise comme ci-dessous avec 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>