Jeu de Jquery ui onglet actif sur la page de chargement/rechargement
Je suis en utilisant une implémentation de base de Jquery UI Tabs qui fonctionnent très bien, mais je veux mettre (ou reset) de l'onglet actif de façon dynamique en fonction d'une action de l'utilisateur.
- Comment puis-je régler l'onglet actif basé sur une valeur querystring? Avec mon précédent onglet solution que j'ai été en mesure de passer à une querystring de la valeur et de l'ensemble de l'onglet actif lorsque la page est chargée. (J'ai dû abandonner cette ancienne solution à d'autres problèmes techniques.)
- Lorsque l'utilisateur sélectionne le bouton Enregistrer dans mon navigateur, et la page du navigateur recharge, comment puis-je maintenir l'accent sur l'onglet elles étaient avant ils ont appuyé sur enregistrer?
- Comment puis-je régler l'onglet actif lorsque l'utilisateur retourne à la page des Tâches de mon navigateur? Par exemple, tous les dans mon application web, si l'utilisateur accède à la page des Projets et retourne ensuite à la page de la Tâche, comment puis-je réinitialiser l'onglet elles ne l'étaient auparavant?
Javascript:
$(function() {
$("#tabs").tabs();
});
HTML Exemple de code:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Description</a></li>
<li><a href="#tabs-2">Action</a></li>
<li><a href="#tabs-3">Resources</a></li>
<li><a href="#tabs-4">Settings</a></li>
</ul>
<div id="tabs-1">
<p>Description content</p>
</div>
<div id="tabs-2">
<p>Action content</p>
</div>
<div id="tabs-3">
<p>Resources content</p>
</div>
<div id="tabs-4">
<p>Settings </p>
</div>
</div>
analyser les url pour définir la valeur de option
OriginalL'auteur user1405736 | 2013-03-14
Vous devez vous connecter pour publier un commentaire.
J'ai résolu mon propre jQuery onglet questions après d'autres recherches et d'essais et d'erreurs. Voici un exemple de travail. Je ne sais pas si c'est la solution la plus élégante, mais il fonctionne. J'espère que cette aide.
Voici comment j'ai répondu à chacune de mes questions précédentes.
1. Comment puis-je régler l'onglet actif basé sur une valeur querystring?
J'ai fini par ne plus avoir besoin d'utiliser une chaîne de requête. J'ai ajouté le #tabs-x à la fin de mon url. Par exemple, si je voulais un lien directement à l'Onglet 3 j'ai codé un lien comme:
2. Lorsque l'utilisateur sélectionne le bouton Enregistrer dans mon navigateur, et la page du navigateur recharge, comment puis-je maintenir l'accent sur l'onglet elles étaient avant ils ont appuyé sur enregistrer?
J'ai résolu ce problème en s'emparant de l'événement de clic, l'obtention de l'onglet index, puis la configuration d'une des formes cachées de l'élément "currentTab" pour stocker l'onglet actuel de la valeur. Puis retour dans la Servlet Java j'ai récupéré les formes cachées et réinitialisation lorsque le rechargement de la page.
3. Comment puis-je régler l'onglet actif lorsque l'utilisateur retourne à la page de Projet de mon navigateur? Par exemple, tous les dans mon application web, si l'utilisateur accède à la page de la Tâche, puis retourne à la page du Projet, comment puis-je réinitialiser l'onglet elles ne l'étaient auparavant?
Ce problème est résolu par la définition d'une variable de session dans ma Servlet Java pour stocker les formes cachées de l'élément "currentTab". De cette façon, quand je retourne sur la page du Projet, je peux réinitialiser le "currentTab" valeur de la même façon que je l'ai mis dans l'Enregistrer formes d'action.
J'espère que cet exemple peut aider quelqu'un d'autre avec leur jQuery onglet questions!
OriginalL'auteur user1405736
jQuery UI Tabs peut prendre dans les options. Ceux qui sont particulièrement utiles pour vos questions sont
cookie
etselected
. Vous pouvez lire sur les options ici.$( ".selector" ).tabs({ selected: 3 });
fera le 4ème onglet initialement actif et$( ".selector" ).tabs({ cookie: { expires: 30 } });
permettra de garder l'onglet actif dernière fois pour 30 jours. Remarque: vous aurez besoin du plugin cookie: archive.plugins.jquery.com/project/CookieOriginalL'auteur Erica Xu
Remarque: Lorsque Sel_tab est champ caché.
onclick sur les onglets acor lien attribuer de la valeur à caché feild
OriginalL'auteur Prianca