jQuery - événement de sélection de l'onglet de piégeage
Je suis un noob jQuery et j'essaie de comprendre comment piéger l'événement sélectionné dans l'onglet. Utilisation de jQuery 1.2.3 et des onglets jQuery UI correspondants (pas mon choix et je n'ai aucun contrôle dessus). Il s'agit d'un onglet imbriqué avec le nom div de premier niveau - onglets. Voici comment 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 ou les propriétés (onglet sélectionné, lorsque l'onglet est cliqué, etc.). J'apprécierais toute aide à ce sujet ...
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.
Voici 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>
La méthode correcte pour capturer l'événement de sélection d'onglet consiste à définir une fonction comme valeur pour l'option select lors de l'initialisation des onglets (vous pouvez également les définir dynamiquement par la suite), comme suit:
$('#tabs, #fragment-1').tabs({
select: function(event, ui){
// Do stuff here
}
});
Vous pouvez voir le code réel 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 pense?). Certaines choses ont évidemment changé depuis. Il n'y avait pas d'objet ui séparé qui était séparé de l'objet event d'origine. 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);
}
});
Phew. S'il y a quelque chose à apprendre ici, c'est que la prise en charge du code hérité est difficile. Voir le jsfiddle pour plus: http://jsfiddle.net/qCfnL/1/
il semble que les anciennes versions de jquery ui ne prennent plus en charge l'événement select.
Ce code fonctionnera avec les nouvelles versions:
$('.selector').tabs({
activate: function(event ,ui){
//console.log(event);
console.log(ui.newTab.index());
}
});
Cette publication montre un fichier HTML complet de travail comme exemple de déclenchement du code à exécuter lorsqu'un onglet est cliqué. La méthode .on () est désormais la façon dont jQuery suggère de gérer les événements.
historique de développement de jQuery
Pour que quelque chose se produise lorsque l'utilisateur clique sur un onglet, il est possible de donner un identifiant à l'élément de liste.
<li id="list">
Se référant ensuite à l'id.
$("#list").on("click", function() {
alert("Tab Clicked!");
});
Assurez-vous que vous utilisez une version actuelle de l'API jQuery. En référençant l'API jQuery de Google, vous pouvez obtenir le lien ici:
https://developers.google.com/speed/libraries/devguide#jquery
Voici une copie de travail complète d'une page à onglets qui déclenche une alerte lorsque l'utilisateur clique sur l'onglet horizontal 1.
<!-- 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>
Dans les versions ultérieures de JQuery, ils ont changé la fonction de select à activer. http://api.jqueryui.com/tabs/#event-activate
D'après ce que je peux dire, selon la documentation ici: http://jqueryui.com/demos/tabs/#event-select , il semble que vous n'ayez pas tout à fait l'initialisation correcte. Les démos indiquent que vous avez besoin d'un enveloppé principal <div> élément, avec un <ul> ou éventuellement <ol> élément représentant les onglets, puis un élément pour chaque page à onglet (vraisemblablement un <div> ou <p>, éventuellement un <section> si nous utilisons HTML5). Ensuite, vous appelez $ (). Tabs () sur le principal <div>, pas le <ul> élément.
Après cela, vous pouvez vous lier à l'événement tabsselect sans problème. Découvrez ce violon pour un exemple basique et basique:
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 un nom de 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>