Slide toggle - Scriptaculous ou Jquery ?

**pierre50** · 18/12/2008, 08h25

Pour faire un effet de slide toggle (affichage d'une div qui repousse plus pas le contenu dejà affiché, j'ai utilisé la librairie scriptaculous

Je viens de découvrir jquery

Lequel vous semble le plus optimisé en terme de ressource ?

**Bovino** · 18/12/2008, 08h33

Juste pour faire un slide toggle ? Pas besoin de scriptaculous ni de jQuery, ça se code facilement sans ajouter des montagnes de scripts.
Du reste, j'avais déjà proposé un exemple de ce genre de code :

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
var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('bloc');
	var elemt = document.getElementById('lien');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap('bloc')}
}
function swap(elmt){
	elt=document.getElementById(elmt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}

'bloc' étant l'élément qui apparait / disparait ;
'lien' le lien qui fait basculer l'affichage.

**pierre50** · 23/12/2008, 11h34

Merci pour le script
Mais soit d1 la zone div à afficher masquer
et lien_d1 pour declencher l'action
je ne vois pas comment passer ce dernier paramètre

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
 
<body>
Introduction
<div >
<a href="#" >Afficher - Masquer la zone d1</a>
</div>
 
<div id="d1"  >
     Zone d1
</div>
Reste du texte
 
<script language="JavaScript" type="text/JavaScript" >
				var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('d1');
	var elemt = document.getElementById('lien_d1');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap('bloc')}
}
function swap(elemt){
	elt=document.getElementById(elemt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}</script>				
</body>

**Macmillenium** · 23/12/2008, 11h54

Envoyé par pierre50

Merci pour le script
Mais soit d1 la zone div à afficher masquer
et lien_d1 pour declencher l'action
je ne vois pas comment passer ce dernier paramètre

Code :

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

1
2
3
4
5
6
7
8
 
<div >
<a href="#" id="lien_d1">Afficher - Masquer la zone d1</a>
</div>
 
<div id="d1"  >
     Zone d1
</div>

???

**Bovino** · 23/12/2008, 11h55

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
<head>
<script language="JavaScript" type="text/JavaScript" >
				var restaure;
var pas;
window.onload=function(){
	var elem = document.getElementById('d1');
	var elemt = document.getElementById('lien_d1');
	restaure = elem.offsetHeight;
	elem.style.height='0px';
	elem.style.overflow='hidden';
	elem.style.display='none';
	elemt.style.cursor='pointer';
	pas = restaure/50;
	elemt.onmouseover = function(){elemt.style.color='red'}
	elemt.onmouseout = function(){elemt.style.color=''}
	elemt.onclick = function(){swap(elem); return false}
}
function swap(elemt){
	elt=document.getElementById(elemt);
	if(elt.style.display=='none'){
		var taille = restaure;
		elt.style.display = '';
		var timer = setInterval(function(){
			if(taille>elt.offsetHeight){elt.style.height=(elt.offsetHeight+pas)+'px'}
			else{elt.style.height='auto';clearInterval(timer)}
		},1);
	}
	else{
		var taille = elt.offsetHeight;
		restaure = taille;
		elt.style.overflow='hidden';
		var timer = setInterval(function(){
			if(taille>=pas){elt.style.height=taille+'px';taille-=pas;}
			else{elt.style.display='none';clearInterval(timer)}
		},1);
	}
}</script>	
</head>
<body>
Introduction
<div >
<a href="#" id="lien_d1">Afficher - Masquer la zone d1</a>
</div>
 
<div id="d1"  >
     Zone d1
</div>
Reste du texte
 
			
</body>

Slide toggle - Scriptaculous ou Jquery ? [script.aculo.us]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager