web-dev-qa-db-fra.com

jquery mobile force ui-btn-active on navbar button

J'ai un problème avec la navigation mobile jQuery (navbar).

J'ai 4 pages et j'ai défini la classe = "ui-btn-active" sur une page différente sur chaque page ..

Par exemple:

Page 1:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->

alors si vous allez à la page 2:

Page 1:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

etc...

Mon problème est que ce n'est pas toujours en surbrillance et parfois je dois appuyer 2 fois sur le bouton pour qu'il s'allume.

Quelqu'un at-il une idée sur la façon de forcer cela à fonctionner?

javascriptjqueryjquery-mobile
26
Satch3000

Essayez d'ajouter la classe "ui-state-persist" à votre ancre. ex: class = "ui-btn-active ui-state-persist"

48
Mobius009

définissez le lien sur href=# sur le bouton actif semblait résoudre ce problème pour moi.

Le problème semblait exister lorsque vous cliquez sur le lien actif bien que vous soyez déjà sur cette page, puis que vous vous éloigniez de cette page et que vous y retourniez.

5
TMNetworks

Vous devez ajouter le "ui-state-persist" à toutes les balises d'ancrage, sinon il se casse toujours si vous actualisez une page, puis allez sur une autre page, puis revenez à la page que vous avez actualisée.

5
Marius Stănescu

Cela ne fonctionnait pour moi (dans la v1.3) que si je définissais class = "ui-btn-active ui-state-persist" sur les balises d'ancrage de celles que je voulais mettre en évidence (c.-à-d. Une par page), avec le reste des balises d'ancrage dans cette barre de navigation sans classes définies.

1
Matt Parkins