Discussion :

[Alexdezark]

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

[Sourrisseau]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[Sourrisseau]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="button" value='test' onclick='change_label(5)'>

Dis moi si cette solution te convient.

[Alexdezark]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sourrisseau]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...