jQuery - piégeage onglet sélectionnez l'événement

Je suis un jQuery noob et j'en suis à essayer de comprendre comment intercepter l'onglet événement sélectionné.
À l'aide de jQuery 1.2.3 et correspondant jQuery UI tabs (pas mon choix et je n'ai aucun contrôle sur elle). C'est un imbriquée onglet avec le premier niveau de la div nom - tabs. C'est ainsi que j'ai initialisé les onglets

$(function() {
       $('#tabs ul').tabs();
});

$(document).ready(function(){
    $('#tabs ul').tabs('select', 0); 
});

Je ne suis pas en mesure de comprendre comment intercepter les événements et les propriétés (onglet sélectionné, lors de l'onglet cliqué, etc). Serais reconnaissant de toute aide sur ce...

J'ai essayé des choses comme:

$('#tabs ul').bind('tabsselect', function(event, ui) {
    selectedTab = ui.index;
    alert('selectedTab : ' + selectedTab);
});

              (OR)

$('#tabs').bind('tabsselect', function(event, ui) {

sans succès.

Ci-dessous est le balisage

<div id="tabs">
<UL>
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>

<DIV id=fragment-1>
<UL>
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
.

</DIV>

Est-ce un jquery-ui question? si oui, veuillez étiqueter correctement

InformationsquelleAutor Bob76 | 2010-09-04

41

La méthode correcte pour la capture de l'onglet de sélection de l'événement est de définir une fonction comme valeur pour le select option lors de l'initialisation des onglets (vous pouvez également définir de façon dynamique par la suite), comme suit:
```
$('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    //Do stuff here
  }
});
```
Vous pouvez voir le code en action ici: http://jsfiddle.net/mZLDk/

Edit: Avec le lien que vous m'avez donné, j'ai créé un environnement de test pour jQuery 1.2.3 avec jQuery UI 1.5 (je crois?). Certaines choses évidemment changé depuis lors. Il n'y avait pas séparé ui objet qui a été séparé de l'original event objet. Le code ressemble à ceci:
```
//Tab initialization
$('#container ul').tabs({
    select: function(event) {
        //You need Firebug or the developer tools on your browser open to see these
        console.log(event);
        //This will get you the index of the tab you selected
        console.log(event.options.selected);
        //And this will get you it's name
        console.log(event.tab.text);
    }
});
```
Ouf. Si il y a quelque chose à apprendre ici, c'est que le soutien de l'héritage de code est dur. Voir le jsfiddle pour plus d': http://jsfiddle.net/qCfnL/1/
- Cela fonctionne à merveille dans le jsfiddle, mais quand je copie mon code, j'obtiens un "indice" est null ou n'est pas un objet d'erreur. Pensées?
- Vous êtes à l'aide de jQuery 1.2.3, droit? Cette démo a été mis en place avec 1.3.2, avec l'INTERFACE utilisateur de jQuery 1.7.2. C'est la version la plus ancienne qu'ils ont. Il est impossible de trouver le besoin de documentation pour les versions anciennes, c'est à peu près autant que nous pourrions le faire, bien que vous pouvez essayer de remplacer select avec tabselect - le changelog indique que select a été introduite peu de temps après tabselect pour le remplacer.
- Merci beaucoup Yi. Je pense que notre code est basé sur cse-mjmcl.cse.bris.ac.uk/blog/2008/05/15/1210851116949.html et qui utilise une très ancienne version de l'interface utilisateur onglets. J'ai été la lecture par les docs du site de cette démo a été à la base et je vois des références à tabsselect comme vous l'avez mentionné. Espère que je suis capable de trouver une solution. Merci.
- Trouvé! Enfin...
- C'est fantastique, Yi. Je vous remercie beaucoup. Je ne pense pas que j'aurais compris cela jamais. J'ai essayé le violon, les "options.sélectionné" donne-moi précédemment sélectionné, l'onglet index. Voulez-vous savoir tout ce qui pourrait donner à la sélection de l'onglet index? L'onglet.le texte ne semble pas fonctionner dans IE6 (désolé, pas de mon choix. la politique de l'entreprise:) ) Mais, je suis content que le recouvrement de l'événement fonctionne maintenant, et si rien ne fonctionne, je pourrais être en mesure de mettre une sorte de hack pour le faire fonctionner.
- Je pense à l'aide de "montrer" au lieu de "sélectionner" pourrait faire l'affaire. Merci.
- Sur une note de côté: activate: a fonctionné pour moi. Depuis JQueryUI - 1.10 select événement n'est plus!
- Merci. Si est nécessaire de faire une action sur le contenu de l'onglet devrait être utilisé "show" au lieu de "sélectionner"
InformationsquelleAutor Yi Jiang
59

il semble que l'ancienne version de jquery ui ne supportent pas l'événement select plus.

Ce code fonctionne avec les nouvelles versions:
```
$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});
```
- cela fonctionne pour moi sur jQuery 1.9.x. Juste ce dont j'avais besoin merci!
- vous êtes un épargnant de vie, merci!!!!!!
- utilisation beforeActivate comme un remplacement. voir les docs jqueryui.com/upgrade-guide/1.9/...
- Ironiquement, j'ai été en utilisant une ancienne version de jQuery, et votre commentaire m'a sauvé un peu de sérieux de la frustration. Merci!
- Je souhaite que ce soit la réponse choisie pour cette question. Je vous remercie.
InformationsquelleAutor Pjl

Ce post montre un travail complet fichier HTML comme un exemple de déclenchement code de s'exécuter lorsqu'un onglet est sélectionné. L' .sur() la méthode est désormais la voie que jQuery vous propose de gérer les événements.

jQuery développement de l'histoire

De faire quelque chose lorsque l'utilisateur clique sur un onglet peut être fait en donnant la liste de l'élément d'identifiant.

<li id="list">

Ensuite référence à l'id.

$("#list").on("click", function() {
 alert("Tab Clicked!");
});

Assurez-vous que vous utilisez une version actuelle de l'api jQuery. Référencement du jQuery api de Google, vous pouvez obtenir le lien ici:

https://developers.google.com/speed/libraries/devguide#jquery

Ici est un travail de copie d'une page à onglets qui déclenche une alerte lors de la tabulation horizontale 1 est cliqué.

<!-- This HTML doc is modified from an example by:  -->
<!-- http://keith-wood.name/uiTabs.html#tabs-nested -->
<head>
<meta charset="utf-8">
<title>TabDemo</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">
<style>
pre {
clear: none;
}
div.showCode {
margin-left: 8em;
}
.tabs {
margin-top: 0.5em;
}
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0;
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active {
border-color: #D4CCB0;
}
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
}
.ui-tabs-panel p {
margin-top: 0em;
}
#minImage {
margin-left: 6.5em;
}
#minImage img {
padding: 2px;
border: 2px solid #448844;
vertical-align: bottom;
}
#tabs-nested > .ui-tabs-panel {
padding: 0em;
}
#tabs-nested-left {
position: relative;
padding-left: 6.5em;
}
#tabs-nested-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-nested-left .ui-tabs-nav li {
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !important;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-nested-left .ui-tabs-nav li.ui-state-active {
border-right: 1px solid transparent;
}
#tabs-nested-left .ui-tabs-nav li a {
float: right;
width: 100%;
text-align: right;
}
#tabs-nested-left > div {
height: 10em;
overflow: auto;
}
</pre>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function() {
$('article.tabs').tabs();
});
</script>
</head>
<body>
<header role="banner">
<h1>jQuery UI Tabs Styling</h1>
</header>
<section>
<article id="tabs-nested" class="tabs">
<script>
$(document).ready(function(){
$("#ForClick").on("click", function() {
alert("Tab Clicked!");
});
});
</script>
<ul>
<li id="ForClick"><a href="#tabs-nested-1">First</a></li>
<li><a href="#tabs-nested-2">Second</a></li>
<li><a href="#tabs-nested-3">Third</a></li>
</ul>
<div id="tabs-nested-1">
<article id="tabs-nested-left" class="tabs">
<ul>
<li><a href="#tabs-nested-left-1">First</a></li>
<li><a href="#tabs-nested-left-2">Second</a></li>
<li><a href="#tabs-nested-left-3">Third</a></li>
</ul>
<div id="tabs-nested-left-1">
<p>Nested tabs, horizontal then vertical.</p>
<form action="/sign" method="post">
<div><textarea name="content" rows="5" cols="100"></textarea></div>
<div><input type="submit" value="Sign Guestbook"></div>
</form>
</div>
<div id="tabs-nested-left-2">
<p>Nested Left Two</p>
</div>
<div id="tabs-nested-left-3">
<p>Nested Left Three</p>
</div>
</article>
</div>
<div id="tabs-nested-2">
<p>Tab Two Main</p>
</div>
<div id="tabs-nested-3">
<p>Tab Three Main</p>
</div>
</article>
</section>
</body>
</html>

InformationsquelleAutor Alan Wells

2

De ce que je peux dire, par la documentation ici: http://jqueryui.com/demos/tabs/#event-select, il semble que vous n'êtes pas tout à fait l'initialisation de ce droit. Les démos de l'état que vous avez besoin d'un principal enveloppé <div> élément, avec un <ul> ou éventuellement <ol> élément représentant les onglets, puis un élément pour chaque page de l'onglet (présumable un <div> ou <p>, peut-être un <section> si nous sommes à l'aide de HTML5). Ensuite, vous appelez $().les onglets() sur les principaux <div>, pas la <ul> élément.

Après cela, vous pouvez lier à la tabsselect cas pas de problème. Découvrez ce violon de base, de base exemple:

http://jsfiddle.net/KE96S/

InformationsquelleAutor rossipedia
2

Dans les versions ultérieures de JQuery ils ont changé la fonction de select pour l'activer.
http://api.jqueryui.com/tabs/#event-activate

InformationsquelleAutor Vinay Anantharaman

Simplement:

$("#tabs_div").tabs();
$("#tabs_div").on("click", "a.tab_a", function(){
console.log("selected tab id: " + $(this).attr("href"));
console.log("selected tab name: " + $(this).find("span").text());
});

Mais vous devez ajouter le nom de la classe à vos ancres nommées "tab_a":

<div id="tabs">
<UL>
<LI><A class="tab_a" href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
<LI><A class="tab_a" href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
<LI><A class="tab_a" href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
<LI><A class="tab_a" href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>
<DIV id=fragment-1>
<UL>
<LI><A class="tab_a" href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
<LI><A class="tab_a" href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
<LI><A class="tab_a" href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
</DIV>

InformationsquelleAutor Muhammad Soliman

-1

Simplement utiliser le clic de l'événement pour l'onglet.
```
$(document).on('shown.bs.tab', 'a[href="#tab"]', function (){
});
```
- La Question est à propos de Jquery UI tabs, pas de BS onglets.
InformationsquelleAutor Rizwan Mughal

Vous devez vous connecter pour publier un commentaire.