Javascript Girl
  1. Javascript Girl
  3. Jquery force mobile ui-btn-active sur le bouton de la barre de navigation
Intereting Posts
Comment mettre à jour l'élément dans la liste avec ImmutableJS? JavaScript / Angular2 LocalStorage peut tout obtenir Accès refusé erreur sur XDomainRequest $ (Document) .ready () dans un script groupé Boîte de texte pré-remplie dans le site Web de tiers – c # Charger le graphique Morris.js dans l'onglet actif (bootstrap) Trigger cliquez sur le fichier de saisie Invocation du service WCF via Javascript Gamme de curseurs jQuery Cochez toutes les cases à cocher dans la page via les outils de développement Croiser navigateur preventDefault () sans jQuery Comment chiffrer l'URL Arguments Javascript.lallee pour quoi Dessiner un cercle sur le canevas en utilisant des événements de souris Comment différencier les requêtes Ajax des requêtes Http normales?

Jquery force mobile ui-btn-active sur le bouton de la barre de navigation

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" à une autre 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 passez à 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 sur le bouton 2 fois pour que cela se fasse mieux.

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

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

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

Le problème semble exister en cliquant sur le lien actif bien que vous soyez déjà sur cette page, puis vous déplacez loin de cette page et retournez-y.

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

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