UI Tabs, id pour ajout d'onglets

**Ellis_** · 19/03/2011, 18h10

Bonjour,

Depuis un peu moment j'essaie de créer des onglets avec un id qui change en fonction d'une variable.

J'ai donc essayé de changer le tabTemplate qui détermine la forme de chaque nouvel onglet créé.

Par défaut

Code HTML :

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

<li><a href="#{href}"><span>#{label}</span></a></li>

J'ai essayé de le changer en rajoutant ma variable et en changeant également le constructeur add de tabs

Code HTML :

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

<li id="#{id}"><a href="#{href}"><span>#{label}</span></a></li>

Code JAVASCRIPT :

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

$tabs.tabs("add", variable_id, "#tabs-" + tab_counter, tab_title )

Mais ça ne veut pas marcher.

J'ai essayé en injectant la variable directement comme ceci :

Code HTML :

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

<li id="+variable_id+"><a href="#{href}"><span>#{label}</span></a></li>

Mais j'ai l'impression que tabTemplate est statique donc logiquement avec une variable, ça marche moyen.

J'ai également essayé avec .attr(id, variable_id) sur le li correspondant mais sans succès.

Existe il moyen efficace de le faire ?

Le but final est de permettre d'envoyer par ajax avec sortable("toArray"), les modifications ( par l'ordre des id ) réalisées par l'utilisateur. Et la méthode sortable requiert un id pour chaque li. Enfin si j'ai bien compris.

J'ai fait pas mal de recherches sur internet et trouvé peu de réponses. Donc j'aimerais au moins savoir si ce que j'essaie de faire est possible ou si il existe une solution alternative plus simple.

Merci d'avance !

**danielhagnoul** · 19/03/2011, 23h00

Bonsoir

Vous utilisez jQuery 1.8.11 UI Tabs et UI Sortable ? Vous parlez de cet exemple : http://jqueryui.com/demos/tabs/#sortable ?

Un ID doit être unique dans la page web, et à mon avis il ne doit pas être modifié en cours d'utilisation du DOM.

On peut connaître l'ordre des tabs en suivant l'ordre des tags a, 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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
        img {border:none; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* Test */
        #tabs, #ordreTabs {width:80%; margin:12px; padding:6px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Tab 1</a></li>
				<li><a href="#tabs-2">Tab 2</a></li>
				<li><a href="#tabs-3">Tab 3</a></li>
			</ul>
			<div id="tabs-1">
				<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
			</div>
			<div id="tabs-2">
				<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
			</div>
			<div id="tabs-3">
				<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
				<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
			</div>
		</div>
 
		<div id="ordreTabs"></div>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
			var tabArray = [];
 
			$("#tabs").tabs({
				show: function(event, ui){
					tabArray = [];
 
					$("#tabs").find("a").each(function(i, item){
						tabArray.push(item.href.split("#")[1]);
					});
 
					$("#ordreTabs").text("Ordre des tabs : " + tabArray.join(", "));
				}
			}).find(".ui-tabs-nav").sortable({
				axis: "x",
				stop: function(event, ui) {
					tabArray = [];
 
					$("#tabs").find("a").each(function(i, item){
						tabArray.push(item.href.split("#")[1]);
					});
 
					$("#ordreTabs").text("Ordre des tabs : " + tabArray.join(", "));
				}
			});
		});
	</script>
</body>  
</html>

**Ellis_** · 20/03/2011, 16h38

Je viens de tester votre code, et ça marche parfaitement bien.

Je vais maintenant essayer d'envoyer ce tableau en ajax et d'enregistrer les positions dans la BDD.

Merci beaucoup pour votre aide

:

UI Tabs, id pour ajout d'onglets

jQuery

Vue hybride

Discussions similaires

Partager

Partager