UI Tabs, rendre disabled l'onglet que l'on vient de quitter

**Alexdezark** · 06/12/2009, 16h59

Bonjour,

J'utilise jQuery UI et je cherche à ce qu'un onglet soit immédiatement rendu 'disabled' lorsque on selectionne un autre onglet.

j'ai essayé de plusieurs manières mais autant j'arrive à rendre disabled un onglet qui n'est pas celui qui était sélectionné avant une nouvelle sélection autant lorsqu'il s'agit de l'onglet qui était sélectionné avant... rien à faire.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4], 
collapsible:true,
load:function(event, ui){
if(ui.index==0) $tabs.data('disabled.tabs',[2]);
}
});
});

mais lorsque l'on clique sur l'onglet index 0 c'est bien lui qui se sélectionne, l'onglet index 2 est déselectionné mais pas disabled...

Que faire ?

Merci d'avance pour vos réponses

**Alexdezark** · 06/12/2009, 17h40

Bonsoir après pas mal de tests, il semble que cela ne fonctionne qu'en utilisant :

Code :

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

1
2
 
$tabs.tabs('disable',2);

Les autres codes :

Code :

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

1
2
3
 
$tabs.data("disabled.tabs", [2]);
$tabs.tabs({ disabled: [2] });

ne semblent pas fonctionner dans ce cas précis.

Bonne soirée

**danielhagnoul** · 06/12/2009, 23h02

Bonsoir.

Voir : http://jqueryui.com/demos/tabs/#option-disabled

Get or set the disabled option, after init.

Code :

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

1
2
3
4
//getter
var disabled = $('.selector').tabs('option', 'disabled');
//setter
$('.selector').tabs('option', 'disabled', [1, 2]);

**Alexdezark** · 07/12/2009, 09h55

Bonjour Daniel,

Merci de ta réponse

Même si j'avais oublié de le marquer plus haut, j'avais testé d'abord cette solution, j'ai toujours un de mes onglets Firefox ouvert sur jquery.com ou jqueryui.com et je ne pouvais pas passer à coté...

Je confirme, et j'ai re-testé immédiatement, que dans le cas ou l'onglet que l'on cherche à rendre "disabled" est celui que l'on quitte que ceci ne fonctionne pas.

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4], 
collapsible:true,
load:function(event, ui){if(ui.index==0){ 
$tabs.tabs('option', 'disabled', [2, 3]);
}}
});
});

ça fonctionne sans problèmes quand on veut rendre "disabled" des onglets qui sont "enabled" mais pas sélectionnés.

Ceci fonctionne quand l'onglet était celui sélectionné:

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$tabs=$("#example").tabs({
disabled:[2,3,4], 
collapsible:true,
load:function(event, ui){if(ui.index==0){ 
$tabs.tabs('disable',2);
$tabs.tabs('disable',3);
}}
});
});

J'ai trouvé cette discussion alors que je désespérais de trouver une solution : http://old.nabble.com/jQuery-UI-tabs...599s27240.html

Et même si le sujet évoqué n'est pas exactement le même, cela m'a permis d'essayer cette solution que je n'avais pas encore essayé et qui marche.

Bonne journée.

ps : j'ai pris bonne note du message concernant le "titre"

**danielhagnoul** · 07/12/2009, 12h11

Bonjour.

Chez moi, cela fonctionne parfaitement. Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
	<style type="text/css">
		body {
			background-color:#696969;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
	</style>
	<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#tabs").tabs();
 
			$("#tabs").bind("tabsshow", function(event, ui) {
				$("#tabs").tabs('option', 'disabled', [(ui.index > 0)?(ui.index - 1):(4)]);
 
				console.log("tabs disabled = " + $("#tabs").tabs('option', 'disabled'));
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="tabs">
			<ul>
				<li><a href="#developez">developez</a></li>
				<li><a href="#jquery">jQuery</a></li>
				<li><a href="#javascript">Javascript</a></li>
				<li><a href="#json">JSON</a></li>
				<li><a href="#xmlxslt">XML XSLT</a></li>
			</ul>
			<div id="developez">
				<p>Essai</p>
			</div>
			<div id="jquery">
				<p>Essai</p>
			</div>
			<div id="javascript">
				<p>Essai</p>
			</div>
			<div id="json">
				<p>Essai</p>
			</div>
			<div id="xmlxslt">
				<p>Essai</p>
			</div>
		</div>
		<div id="affiche"></div>
	</div>
</body>
</html>

UI Tabs, rendre disabled l'onglet que l'on vient de quitter

jQuery

Vue hybride

Discussions similaires

Partager

Partager