Tabs & Script

Version imprimable

Tabs & Script

Bonjour à tous,

J'ai un soucis avec le widget Tabs de jQuery UI et un script perso.
Lorsque je fais un listing (avec 3 niveaux ) du widget tabs tout se passe bien.
Par contre lorsque je commence à placer du script dans ma p'tite balise script (peu importe le script) j'ai l'affichage de mon tabs qui pars en vrille....

Je n'arrive pas à comprendre ce qu'il se passe.
L'un d'entre vous aurait-il une idée?

Voici mon code script:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function{ 
	$('.cocheTout').click(function(){
		 var cases = $('.cat_niv_2').find(':checkbox'); // on cherche les checkbox qui dépendent de la liste cases
		if(this.checked){ // si cocheTout est coché
			cases.attr('checked', true); // on coche les cases
			$('#cocheTout').html('Tout decocher'); // mise à jour du texte de cocheText
		}else{ // si on décoche cocheTout
			cases.attr('checked', false);// on coche les cases
			$('#cocheTout').html('Cocher tout');// mise à jour du texte de cocheText
	});
});
 
$(function() {
	$( "#tabs" ).tabs();
});

Et voici le code source de mon tab:

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
<ul>
    <li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="AU" /><a href="#AU">Audio</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="EI" /><a href="#EI">Electronique / Informatique</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="JD" /><a href="#JD">Jeux de Rôle</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="JJ" /><a href="#JJ">Jeux Jouets</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="JV" /><a href="#JV">Jeux Vidéo</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="MO" /><a href="#MO">Mobilier</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="PD" /><a href="#PD">Produits derivés</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="TA" /><a href="#TA">Téléphonie Tablette</a></li><li><input type="checkbox" class="categorie_1" name="categorie_check[]" value="VI" /><a href="#VI">Vidéo</a></li>	</ul>
   <div id="AU"><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="AUHEAD" /> Casques / Ecouteurs<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADB" /> Bluetooth<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADF" /> Filaire<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADW" /> Wireless<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="AUHP" /> Enceintes /Hauts Parleurs<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPB" /> Bluetooth<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPF" /> Filaire<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPW" /> Wireless<br />
</div><div style="clear:both"></div></div><div id="EI"><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIA" /> Autre<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIBA" /> Batteries<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EICA" /> Cables<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EICAV" /> Audio/Vidéo<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EICAU" /> Autres<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EINE" /> Nettoyage<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIPA" /> Papeterie<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIPRO" /> Protections<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EISC" /> Scanners<br />
</div><div class="cat_niv_2"><input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIS" /> stockage mémoire<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISAUT" /> Autre<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISBLU" /> Blu-Ray<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISCD" /> CD<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISUSB" /> Clé USB<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISDDOEM" /> Disque Dur<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDEXT" /> Externe<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDOEM" /> Interne OEM<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDRET" /> Interne Retail<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDMUL" /> Multimedia<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISDVD" /> DVD<br />

Si l'un d'entre vous à une idée....

Merci beaucoup ! :)

30/07/2013, 11h02
Darkaurora

Ton code ne m'aide pas à trouver la réponse désoler je ne vois pas ou est déclaré la moitié des éléments que tu utilises dans ton script...

Mais pour ne pas poster pour ne rien dire:

Code:

$('.cat_niv_2').find(':checkbox') == $( '.cat_niv_2 :checkbox' ) // mieux vaux utiliser ce genre de notations, plus rapide, moins lourd, gain de place...

Ton code se finit avec </li> </ul> mais pas de balises ouvrantes correspondantes.

et STP trouve un moyen CSS d'enlever ces espaces :)
30/07/2013, 11h19
Bovino

Code:

$('.cat_niv_2').find(':checkbox') == $( '.cat_niv_2 :checkbox' )

Non ! :nono:

C'est loin d'être équivalent en terme de performances.
Dans le premier cas, jQuery va d'abord rechercher les éléments ayant la classe "cat_niv_2" et pourra donc utiliser les méthodes natives de JavaScript (notamment querySelectorAll()) qui sont donc optimisées et très rapides puis parmi ces éléments, rechercher les éléments de type checkbox, mais l'utilisation d'un sélecteur non utilisable par les méthodes natives de JavaScript oblige à des traitements supplémentaires ce qui rend la recherche plus longue. Dans le second cas, le paramètre passé (et donc le sélecteur de checkbox) empêche d'utiliser directement les méthodes natives de JavaScript et la recherche devient donc plus lente.

Lorsque l'on veut utiliser les sélecteurs jQuery non standards (globalement tous ceux commençant par ":"), il est fortement recommandé de séparer la recherche.
30/07/2013, 11h43
Friksstyle

Merci de vos réponses.

@Darkaurora: les deux balises de fin sont dû à un mauvais copier-coller.
Elle ne sont pas à prendre en compte et je vais éditer mon code.
Qu'entends-tu par "trouve un moyen CSS d'enlever ces espaces"

@Bovino: J'ai rien compris. Donc ce qui ferait tomber en carafe le tabs jQuery viendrait du fait de chercher un élément (ici checkbox) non utilisable par Javascript?
30/07/2013, 11h49
Bovino

Non, ma réponse ne concernait pas directement ta question, puisque pour moi

Citation:

l'affichage de mon tabs qui pars en vrille....

n'est pas une indication suffisante pour t'aider à trouver l'erreur.
Je disais juste que contrairement à ce que dit Darkaurora, $('.cat_niv_2').find(':checkbox') n'est pas tout à fait identique à $( '.cat_niv_2 :checkbox' ) en essayant d'en expliquer la raison ! :mrgreen:
30/07/2013, 14h35
Darkaurora

Autant pour moi j'étais persuadé d'avoir lut le contraire. Merci de me corriger ça me fait apprendre et m'aide à me corriger. Je crois que c'est tout le problème d'apprendre Jquery plutôt que JS, je pense pas mal me débrouiller mais je n'ai pas réellement de compétence JS
30/07/2013, 15h02
Friksstyle

Ce que j'entends par "le tabs qui pars en vrille", c'est tout simplement la mise en forme.
Si l'on prend l'exemple sur le site de jQuery UI voici à quoi ressemble mon tabs.
Mais dès que je mets le morceau de code avant ou après ma fonction tabs dans la balise script, l'affichage redevient une liste simple avec les balises ul et li.

C'est vrai que sans expliquer on ne peut pas comprendre le "pars en vrille" ^^
30/07/2013, 15h49
JérémieL

Bonjour,

Citation:

Envoyé par Friksstyle

Mais dès que je mets le morceau de code avant ou après ma fonction tabs dans la balise script, l'affichage redevient une liste simple avec les balises ul et li.

La balise script ? Quelle balise script ? Dans ton code HTML (incomplet), je ne vois pas de balise script. Montre-nous ton code entier, ce serait plus simple. ;)

Par contre, c'est quoi tous ces   ? C'est pour rendre ton code HTML difficilement à lire ?

Bonsoir

Correction des codes CSS,HTML,JS. Mais pour les UI Tabs il nous manque des choses.

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
					var jObjCocheTout = $( ".cocheTout" ),
						jObjLabelCocheTout = jObjCocheTout.prev();
 
					jObjCocheTout.on( "click", function(){
						var cases = $( ".cat_niv_2 input[type='checkbox']" );
 
						if ( $( this ).is( ":checked" ) ){
							cases.prop( "checked", true );
							jObjLabelCocheTout.text( "Tout décocher : " );
						} else {
							cases.prop( "checked", false );
							jObjLabelCocheTout.text( "Cocher tout : " );
						}
					});					
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		li, .categorie_2 { margin-left: 2.4rem; }
		.categorie_3 { margin-left: 4.8rem; }
		.categorie_4 { margin-left: 7.2rem; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<ul>
	<li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="AU" />
    	<a href="#AU">Audio</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="EI" />
    	<a href="#EI">Electronique / Informatique</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="JD" />
    	<a href="#JD">Jeux de Rôle</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="JJ" />
    	<a href="#JJ">Jeux Jouets</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="JV" />
    	<a href="#JV">Jeux Vidéo</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="MO" />
    	<a href="#MO">Mobilier</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="PD" />
    	<a href="#PD">Produits derivés</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="TA" />
    	<a href="#TA">Téléphonie Tablette</a>
    </li>
    <li>
    	<input type="checkbox" class="categorie_1" name="categorie_check[]" value="VI" />
    	<a href="#VI">Vidéo</a>
    </li>
</ul>
 
<label>Cocher tout : </label><input type="checkbox" class="cocheTout">
 
<div id="AU">
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="AUHEAD" /> Casques / Ecouteurs<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADB" /> Bluetooth<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADF" /> Filaire<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHEADW" /> Wireless<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="AUHP" /> Enceintes /Hauts Parleurs<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPB" /> Bluetooth<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPF" /> Filaire<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="AUHPW" /> Wireless<br />
	</div>
	<div style="clear:both">
 
	</div>
</div>
<div id="EI">
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIA" /> Autre<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIBA" /> Batteries<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EICA" /> Cables<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EICAV" /> Audio/Vidéo<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EICAU" /> Autres<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EINE" /> Nettoyage<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIPA" /> Papeterie<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIPRO" /> Protections<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EISC" /> Scanners<br />
	</div>
	<div class="cat_niv_2">
		<input type="checkbox" class="categorie_2" name="categorie_check[]" value="EIS" /> stockage mémoire<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISAUT" /> Autre<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISBLU" /> Blu-Ray<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISCD" /> CD<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISUSB" /> Clé USB<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISDDOEM" /> Disque Dur<br />
		<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDEXT" /> Externe<br />
		<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDOEM" /> Interne OEM<br />
		<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDRET" /> Interne Retail<br />
		<input type="checkbox" class="categorie_4" name="categorie_check[]" value="EISDDMUL" /> Multimedia<br />
		<input type="checkbox" class="categorie_3" name="categorie_check[]" value="EISDVD" /> DVD<br />
	</div>
</div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-30T20:30:39.902+02:00" pubdate>2013-07-30T20:30:39.902+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>