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

Version imprimable

06/12/2009, 16h59
Alexdezark

UI Tabs, rendre disabled l'onglet que l'on vient de quitter
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:

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
06/12/2009, 17h40
Alexdezark
Bonsoir après pas mal de tests, il semble que cela ne fonctionne qu'en utilisant :
Code:

1 2 $tabs.tabs('disable',2);
Les autres codes :
Code:

1 2 3 $tabs.data("disabled.tabs", [2]); $tabs.tabs({ disabled: [2] });
ne semblent pas fonctionner dans ce cas précis.

Bonne soirée
06/12/2009, 23h02
danielhagnoul
Bonsoir.

Voir : http://jqueryui.com/demos/tabs/#option-disabled
Citation:
Get or set the disabled option, after init.

Code:

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

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:

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:

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" ;)

Bonjour.

Chez moi, cela fonctionne parfaitement. Exemple :

Code:

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>