jquery widget accordion et button
bonjour à la communauté,
je suis nouveau sur le forum je vais donc me présenter rapidement. je m'appelle Alain, j'ai 50 ans, j'ai commencé à programmer sur ZX81 en assembleur (1Ko de mémoire ^^), puis en VB sur d'autres OS. J'ai taté de l'HTML comme tout le monde quand la bulle internet a explosé. Un peu d'ACTIONSCRIPT pour le fun. Je viens d'avaler le PhP et MySQL pour un besoin "familial". Je me lance depuis quelques semaines dans le javascript et surtout Jquery découvert par hasard :(
J'ai mis en place le widget ACCORDEON de jquery. J'ai donc 4 balises H3 qui encadrent les éléments de mon accordeon. A l'intérieur de chacune de ces balises se trouve (entre autre) un bouton pour lesquels j'ai donné un ID : 1,2,3 et 4 ... on peut pas faire plus simple.
Cette accordeon devrait fonctionner de la manière suivante, le premier éléments est ouvert, les trois suivant sont fermés et surtout inaccessible. Quand on a fini de saisir le formulaire dans le premier élément, un bouton [suivant] permet de passer à l'élément suivant, le rendre accessible et rendre l'élément précédent inaccessible. Une image valant mieux que de long discours :
premiere étape
deuxieme étape
Seulement voila, ca ne fonctionne pas ...
voila le script :
<SCRIPT language="javascript" >
$(document).ready(function(){
$('#accordeon').accordion({
heightStyle: "content",
collapsible: true,
active:0
});
$( "input[type=submit], input[type=button]" )
.button()
.click(function() {
var inputId = this.id;
console.log(inputId*2); // input x 2 pour s'assurer que c'est bien un INT
$('#accordeon').accordion("option", "active", inputId); // active l'element suivant
var inputId= this.id - 1;
$('#accordeon > h3:inputId').addClass( "ui-state-disabled" ); // rend inacessible l'element en cours
});
});
</script>et le HTML est construit de cette manière :
<div id="accordeon">
<h3>Informations d'inscription</h3>
<fieldset>
bla bla bla
<input type="button" id="1" value="Suivant"/>
</fieldset>
<h3>2eme élément <h3>
<fieldset>
bla bla bla
<input type="button" id="2" value="Suivant"/>
</fieldset>
etc....le probleme c'est que ca ne fonctionne pas :
$('#accordeon').accordion("option", "active", inputId);
$('#accordeon > h3:inputId').addClass( "ui-state-disabled" );De nombreuse recherche sur le net ne m'ont pas vraiment aidé. Du fait que j'utilise la version 1.10.3, les précédentes versions utilisent une syntaxe différente :
$('#accordeon').accordion("activate", inputId);
Voila désolé pour le pavé, j'ai voulu être le plus clair possible.
Merci de m'avoir lu jusqu'au bout et surtout merci du temps que vous voudrez bien m'accorder.
4 réponses
Salut !
Quand tu cliques sur un bouton, tu veux le disable pour passer à l'étape d'après c'est ça ?
Dans ce cas là, je pense qu'il faut que tu utilise "this" pour dire "ce bouton"
$( "input[type=submit], input[type=button]" )
.button()
.click(function() {
var inputId = this.id;
console.log(inputId*2); // input x 2 pour s'assurer que c'est bien un INT
$('#accordeon').accordion("option", "active", inputId); // active l'element suivant
$(this).addClass("ui-state-disabled");
});
});Le this à l'intérieur de cette fonction veut dire "mon élément actuel", donc celui sur lequel tu as cliqué puisque cette fonction est éxécuté au clic.
Edit 1 :
J'ai jamais utilisé d'accordéon en js, j'ai créé un fiddle, et je comprends pas trop pourquoi il ne veut pas passer à l'étape d'après :
http://jsfiddle.net/Pewel/aKWWN/
Edit 2 :
Bon bah j'ai rien dit, j'avais mis "accordion" au lieu de "accordeon" :D
Je t'explique un peu comment j'ai fait du coup. Quand tu déclare ton accordéon, tu peux lui dire par défaut l'onglet ouvert au chargement de ta fenêtre avec "active". Si tu met active à 0, il va prendre le 1er onglet. Il faudra donc que tu suive cette norme, parce que l'onglet d'après, c'est l'onglet "1", l'autre d'après, c'est le "2" etc.
Du coup, sur l'identifiant de ton bouton/input, soit tu met l'id de ta fenêtre d'accordéon actuelle, que tu incrément par la suite pour activer le prochain, soit tu met directement "l'identifiant" de la fenêtre suivante.
Après tu le récupère et tu active le prochain comme tu avais fait.
Après, le parseInt, c'est pour pouvoir faire l'addition, sinon le js fait une concaténation.
Quand tu fait
inputId +1 //imaginons que input vaut 2le resultat sera "21" alors que l'on veut "2", d'où le parseInt pour lui dire qu'on veut une addition de deux nombres, et pas une concaténation d'une chaine de caratère avec un nombre
Du coup ça donne ça :
http://jsfiddle.net/Pewel/byMnR/
merci pour vos réponses. Effectivement, le problème venait d'un parseInt absent ... Le prob c'est qu'en faisant
console.log(inputId*2);il m'affichait bien la valeur de l'id x 2, je ne me suis donc jamais inquiété de savoir si c'était un string ...
par contre, concernant le disabled, ce n'est pas le bouton qui doit être en disabled, mais la balise H3 et ce qui suit jusqu'à la prochaine, comme si on cliquait sur la balise h3 suivante. Ca ferme la précédente et la rend inaccessible ... je regarde du coté du "this", la solution devrait être dans ce coin ^^
encore merci
j'ai trouvé pour le disabled sur l'élément H3, la syntaxe sur Jquery ui derniere version a changé apparement ...
http://jsfiddle.net/byMnR/2/