UI Tabs, Changer un label ?

Version imprimable

08/12/2009, 09h57
Alexdezark

UI Tabs, Changer un label ?

Bonjour à tous,

Je cherche à changer un label dans un tabs ?

Rien dans la doc jquery...

quelqu'un sait-il comment faire ?

Bonne journée à tous

Porrais tu

préciser ta demande. Car tu n'indiques pas à quel moment tu désires changer de label. Mais sinon ce n'est pas trop compliqué. Par exemple le cas ou on sélectionne un des onglets (tabs).
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> $(function() { $("#tabs").tabs({ select: function(event, ui) { $(ui.tab).text('Salut jquery ui'); } }); }); </script>
Ce qui et intéressant , entre autre , avec jquery ui c'est que l'on peut facilement récupérer les évènements pour pouvoir faire des traitements.

Si le cœur t'en dis , essaye ce code avec firefox et firebug.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> $(function() { $("#tabs").tabs({ select: function(event, ui) { console.debug(ui); $(ui.tab).text('Salut jquery ui'); } }); }); </script>
Avec console debug tu récupères un objet qui contient en tas d'informations précieuses.

Si tu veux plus de précisions sur ce que tu fais , laisse une description précise de ce tu désires réaliser.

08/12/2009, 11h36
Alexdezark

Bonjour sourisseau,

Merci de ta réponse.

Quelques précisions :

L'évènement déclencheur est produit par un click sur un bouton hors du tabs.

Lorsque l'on clique sur ce bouton, l'onglet 5 de mon tabs qui se nommait "calendrier" doit se nommer "inserer".

Son url change alors aussi avec :

Code:

$tabs.tabs("url",5,url);

Mais ce que je cherche c'est comment changer à la volée le label de l'index 5.

Merci

pour la précision . Voici une fonction simple pour gérer ton titre d'onglet :
Code:

1 2 3 4 5 6 7 8 9 10 <script type="text/javascript"> $(function() { $("#tabs").tabs(); }); function change_label(x){ $("a[href='#tabs-" + x + "']").text('inserer') } </script>
et dans ton html ton boutton :
Code:

1 2 <input type="button" value='test' onclick='change_label(5)'>
Dis moi si cette solution te convient.

J'ai essayé de l'integrer à ma fonction de façon basique mais cela ne fonctionne pas :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 creActi=function(){ var IDClient=$("#IDClient").val(); url="actis/Ajax/acti.php?IDClient="+IDClient+'&psswd='+psswd+'&login='+login; $tabs.tabs('option', 'disabled', [0,1,2,3,4]); $tabs.tabs("url",5,url); $tabs.tabs("enable",5); $tabs.tabs("option", "selected",5); $("a[href='#tabs-5']").text('inserer'); };
D'un autre coté je ne sais pas si le href correspond bien puisqu'il correspond à l'url changée plus haut ???

PS : je vais être absent jusqu'à 13h00 je me reconnecte au retour ;)

ok je vois mieux

Ce que tu est en train de faire ...
dans ta fonction remplace :

Code:

1
2
 
$tabs.tabs('option', 'disabled', [0,1,2,3,4]);

par

Code:

1
2
3
4
5
6
7
8
 
$("#tabs").tabs({
			disabled: [0, 1 , 2 , 3 , 4 ],
			enable: function(event, ui) { 
				if (ui.index==4) $(ui.tab).text('Inserer');
			}
 
		});

Voili j'espère que cela va marcher ...

c'est pas tout à fait ça en fait.

Parce que ce n'est pas systématiquement que le label change lorsqu'il est enable, c'est juste quand on clique sur ce bouton.

le click sur un autre bouton rend le tab index 5 "enable" aussi mais sans changement de label...

Mon tabs lui est initialisé dans la page qui le charge comme ceci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(document).ready(function() { $tabs=$("#example").tabs({ disabled:[2,3,4,5], collapsible:true, load:function(event, ui){ if((ui.index!=2)&&($("#divExistClient").length!=0)) $("#divExistClient").remove(); if((ui.index==0)||(ui.index==1)){ $tabs.tabs('disable',2); $tabs.tabs('disable',3); $tabs.tabs('disable',4); }; }, }); });
c'est donc une fonction liée à un bouton qui doit déclencher (uniquement dans ce cas) le changement de label

une variable de test

serait bien utile , cela donnerai le code suivant

Code:

1
2
3
4
5
6
7
8
9
 
var text_inserer = false;
$("#tabs").tabs({
			disabled: [0, 1 , 2 , 3 , 4 ],
			enable: function(event, ui) { 
				if (ui.index==4 &&  text_inserer) $(ui.tab).text('Inserer');
			}
 
		});

et dans ton boutton , sur le onclick tu passe cette valeur a true ;

Code:

1
2
 
<input type="button" value='test' onclick='text_inserer = true;ma_fonction()'>

alors voila ou j'en suis :

ceci sur le bouton fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
creActi=function(){
var IDClient=$("#IDClient").val();
url="actis/Ajax/acti.php?IDClient="+IDClient+'&psswd='+psswd+'&login='+login;
$tabs.tabs('option', 'disabled', [0,1,2,3,4]);
 
$("#example :children").each(function(event, ui){
if(ui.index==5) $(ui).text('Inserer');
});
 
$tabs.tabs("url",5,url); 
$tabs.tabs("enable",5);
 
$tabs.tabs("option", "selected",5);
 
};

Comme j'ai toujours le cas de l'autre bouton, donc changement de nouveau du label vers le label d'origine

J'essaye de plutot faire comme ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4,5], 
collapsible:true,
load:function(event, ui){
if((ui.index!=2)&&($("#divExistClient").length!=0)) $("#divExistClient").remove();
if((ui.index==0)||(ui.index==1)){ 
$tabs.tabs('disable',2);
$tabs.tabs('disable',3);
$tabs.tabs('disable',4);
};
},
enable:function(event, ui){
if(ui.index==5) $(ui).text(($(ui).text=='Calendrier') ? 'Inserer' : 'Calendrier');
}
 
});
});

Mais pour le moment cela ne fonctionne pas...

J'ai essayé de mettre

Code:

1
2
3
enable:function(event, ui){
alert(ui.index);
}

Mais curieusement le seul qui ne renvoi rien au moment ou il est enabled est index 5

une idée ?

Faire simple

pour le moment c'est un peu trop compliqué pour moi de comprendre la logique de ce que tu fais et je ne peux te proposer une solution sans que cela n'entraine un autre problème.

Si le label doit changer en fonction de tel ou tel action , la valeur de text_insert n'est plus un boolean mais une string que tu définir à Calendrier par exemple au départ et puis en fonction du bouton sur lequel tu cliques tu changes sa valeur.

Mais j'ai un peu peur de ne pas saisir exactement ce que tu veux faire.
Code:

1 2 3 4 5 6 7 8 9 10 var text_inserer ='Calendrier'; $("#tabs").tabs({ disabled: [0, 1 , 2 , 3 , 4 ], enable: function(event, ui) { if (ui.index==4 && text_inserer) $(ui.tab).text('Inserer'); } });
et
Code:

1 2 3 <input type="button" value='test' onclick="text_inserer = 'Insérer';ma_fonction()">
Concernant 'Mais curieusement le seul qui ne renvoi rien au moment ou il est enabled est index 5 ' c'est que la numérotation commence a 0 , par conséquent si tu as 5 onglets les index sont 0,1,2,3 et