web-dev-qa-db-fra.com

onglets de navigation jQuery Mobile

Je souhaite avoir une navigation par tabulation dans mon projet jQuery Mobile. Je sais que je peux utiliser le rôle de données «barre de navigation», mais je souhaite uniquement modifier le contenu situé sous cette barre de navigation sans passer à une nouvelle page. Jusqu'à présent, je ne pouvais avoir que plusieurs pages différentes avec la même barre de navigation, mais ce n'est pas ce que je veux.

Quelqu'un peut-il m'aider?

Merci d'avance

javascriptjquerytabsjquery-mobilenavbar
15
Matteo

Vous pouvez utiliser le style de la barre de navigation de jQuery Mobile, mais utilisez votre propre gestionnaire de clics pour que, au lieu de changer de page, le clic ne fasse que masquer/afficher le contenu approprié 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;
}

Voici un jsfiddle du code ci-dessus: http://jsfiddle.net/3RJuX/

REMARQUE:

  • Chacun des liens de la barre de navigation possède un attribut "data-href" défini sur l'id de la div (ou le conteneur que vous souhaitez utiliser) qui sera affiché.

Mise à jour

Au bout d'un an, je suis revenu à cette réponse et j'ai remarqué que le sélecteur de gestionnaire d'événements délégué peut être optimisé un peu pour utiliser une classe plutôt qu'un attribut (ce qui est beaucoup plus rapide d'une 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 rendu plus modulaire en utilisant des sélecteurs relatifs plutôt que des absolus (comme $('.content_div'), car cela sélectionnera tous les éléments correspondants dans le DOM plutôt que seulement ceux relatifs 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 ensembles d'onglets sur une page ou une pseudo-page.

Quelques documents sur les "sélecteurs relatifs" utilisés:

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

32
Jasper

MISE À JOUR: Découvrez mon jsfiddle à http://jsfiddle.net/ryanhaney/eLENj/

Je viens de passer un peu de temps à comprendre cela, alors j'ai pensé répondre à cette question. Remarque J'utilise plusieurs fichiers uniques, 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;
    });
});
4
Ryan Haney

@ Mike Bartlett 

J'ai moi-même eu du mal à le faire, mais après avoir décomposé le code de Jasper, il semble qu'il y ait une légère nuance dans son code posté et dans la page jsfiddle. 

Où il a posté 

$(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 changer la dernière ligne pour appeler simplement le contenu pour lequel vous définissez la valeur "data-href" 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 barre de navigation html lit alors

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

Ce qui est à peu près le même que le sien, mais pour une raison quelconque, je n'ai pas reçu le message "Erreur de chargement de la page". J'espère que cela pourra aider...

2
Ralph Marchant

S'il vous plaît se référer ce lien ci-dessous pour tout type de barre de navigation dans 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>

merci

1
Rajarshi Das

J'ai remarqué que la question avait été posée il y a quatre ans. Je ne sais donc pas si le widget Onglet était disponible avec JQ Mobile à cette époque. de toute façon je suis un gars de 2015

la solution géniale 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>
1
rashidnk

J'ai bien aimé la réponse de @ Ryan-Haney, mais je pensais que j'ajouterais mon brouillon, si quelqu'un peut trouver un moyen plus efficace de le faire, merci d'ajouter un commentaire .. merci

Je l'ai fait de cette façon parce que j'ai un tas de fichiers "include" qui sont chargés dans le DOM lors de l'exécution, je ne pouvais donc pas coder en dur que le n-ème onglet soit mis en surbrillance/actif pour chaque page comme Ryan pourrait le faire. J'ai également le luxe de n'avoir qu'un seul onglet dans mon application.

$(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');
});
0
Ads