afficher cacher une div dans un pseudo container

**gtraxx** · 14/11/2011, 16h10

Bonjour,
ne sachant pas le terme exact pour mon problème je vais plutôt l'exposé.
Je construit un plugin jquery pour me permettre d'afficher et cacher une div (jusque la rien de compliqué).
Seulement suivant un paramètre spécifique je cherche à afficher une div mais dans un autre contener.
En gros voici une structure html :

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
 
<ul id="topmenu" class="nav-horizontal">
<li class="l1"><a class="showit" href="http://www.google.be">mon lien classique</a></li>
<li class="l1"><a class="showit" href="#">mon lien 1</a>
		<div class="showcontent">
			<ul>
				<li><a href="#" title="test">test</a></li>
				<li><a href="#" title="test">test</a></li>
				<li><a href="#" title="test">test</a></li>
			</ul>
		</div>
	</li>
	<li class="l1"><a class="showit" href="#">mon lien 2</a>
		<div class="showcontent">
			<ul>
				<li><a href="#" title="test2">test2</a></li>
				<li><a href="#" title="test2">test2</a></li>
				<li><a href="#" title="test2">test2</a></li>
			</ul>
		</div>
	</li>
</ul>
<div id="show_global"></div>

Le contenu dans showcontent est cacher et je souhaite l'injecter dans la div show_global mais si je clique sur un autre élément showit alors que ma div est ouverte je souhaite charger directement son contenu sans pour autant devoir ré ouvrir la div.
Pour le moment c'est pas la joie:

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
 
(function($){
	$.fn.showitmenu = function(options){
		defaults = {
			elem_container : '.showcontent',
			glob_container : null
		};
		opt = $.extend(true,{},defaults,options);
		//Hide (Collapse) the toggle containers on load
		var cont = $(this).next(opt.elem_container);
		cont.hide();
		$(this).each(function(i){
			var newid = $(this).attr("class")+"_" + i;
			this.id = newid;  
			var showitId = $(this).attr("id",newid);
			//console.log($(showitId));
		});
		if(opt.glob_container != null){
			$(this).live('click',function(){
				//e.preventDefault();
				var self = $(this);
				var selfid = $(this).attr('id');
				var answer = self.next(opt.elem_container).html();
				if ($(opt.glob_container).is(":visible")) {
					$(opt.glob_container).attr('rel',selfid);
					if($(opt.glob_container).attr("rel") !== self){
						$(opt.glob_container).slideUp('fast',function(){
			        		$(opt.glob_container).empty();
			        	});
					}else{
			        	$(opt.glob_container).fadeOut('fast',function(){
			        		$(opt.glob_container).append(answer);
			        	});
					}
 
		        } else {
		        	$(opt.glob_container).removeAttr("rel");
		        	$(opt.glob_container).append(answer);
		        	$(opt.glob_container).slideDown();
		        }
			});
		}else{
			//ouverture et fermeture par glissé
			$(this).live('click',function(){
				//e.preventDefault();
				var answer = $(this).next(opt.elem_container);
		        if (answer.is(":visible")) {
		           answer.slideUp();
		           answer.removeClass("showit_active");
		        } else {
		           answer.slideDown();
		           answer.addClass("showit_active"); 
		        }
			});
		}
	}
})(jQuery);

je me suis un peu embourbé à force de le retourner dans tous les sens MDR
Avec ce plugin je suis censé ouvrir la div suivant l'élément cliquer sauf dans le cas ou j'utilise un container global qui servira à afficher le contenu qui lui même restera cacher à cette endroit.
La partie qui utilise simplement le next (pas le container global) fonctionne très bien

**danielhagnoul** · 14/11/2011, 23h19

Bonsoir

je me suis un peu embourbé à force de le retourner dans tous les sens MDR

Sans vouloir être désagréable, oui !

La structure du plugin est une horreur et je ne suis pas certain d'avoir compris ni le code ni la prose.

Pour faire un clone avec ou sans suppression de l'original, je vous suggère d'utiliser mon plugin dvjhClone (je vous suggère aussi de vous inspirer de la structure du plugin pour construire le vôtre). 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
var boolRemove = false; // true : supprime l'original
 
// dvjhClone : http://danielhagnoul.developpez.com/plugin-dvjh/clone/clone.php
 
$(".showit").on("click", function(){
	/*
	 * Si l'élément suivant possède la classe
	 * requise alors faire un clone et l'ajouter
	 * au pivot
	 */
	$(this).next(".showcontent").dvjhClone({
		cloneMethod: 2,
		clonePivot: "#show_global"
	});
 
	if (boolRemove){
		$(this).next(".showcontent").remove();
	}
});

**gtraxx** · 15/11/2011, 08h56

Je suis d'accord, j'ai alors repris un peu dessus et modifier la structure (donc plus besoin de clone)
il ne manque qu'une chose !!
si un élément est déjà ouvert et que je clique sur un autre le menu est censé se refermer et ouvrir l'autre div mais au lieux de sa il ouvre les deux en même temps.
Voici la nouvelle structure HTML:

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
 
<ul id="topmenu" class="nav-horizontal">
	<li class="l1"><a href="http://www.test.dev">accueil</a></li>
	<li class="l1"><a class="showit" href="#showit1">test1</a></li>
	<li class="l1"><a class="showit" href="#showit2">test2</a></li>
</ul>
<div id="showit1" class="showcontent">
	<ul>
		<li><a href="#" title="test">test</a></li>
		<li><a href="#" title="test">test</a></li>
		<li><a href="#" title="test">test</a></li>
	</ul>
</div>
<div id="showit2" class="showcontent">
	<ul>
		<li><a href="#" title="test2">test2</a></li>
		<li><a href="#" title="test2">test2</a></li>
		<li><a href="#" title="test2">test2</a></li>
	</ul>
</div>

Et le code toujours en chantier :

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
(function($){
	$.fn.showitmenu = function(options){
		defaults = {
			elem_container : '.showcontent',
			glob_container : false
		};
		opt = $.extend(true,{},defaults,options);
		if(opt.glob_container != false){
			//Hide (Collapse) the toggle containers on load
			var cont = $(opt.elem_container);
			cont.hide();
			$(this).live('click',function(e){
				e.preventDefault();
				var self = $(this);
				var selfid = $(this).attr('href');
				if ($(selfid).is(":visible")) {
					if($(selfid).attr('class') === 'showit_active'){
						$(selfid).fadeOut();
						$(selfid).removeClass("showit_active");
						$(selfid).fadeIn('slow');
						console.log($(selfid).is(":visible"));
					}else{
			        	/*$(opt.glob_container).fadeOut('fast',function(){
			        		$(opt.glob_container).append(answer);
			        	});*/
						$(selfid).removeClass("showit_active");
						$(selfid).slideUp();
					}
 
		        } else {
		        	/*$(opt.glob_container).removeAttr("rel");
		        	$(opt.glob_container).append(answer);*/
		        	$(selfid).addClass("showit_active"); 
		        	$(selfid).slideDown();
		        }
			});
		}else{
			//Hide (Collapse) the toggle containers on load
			var cont = $(this).next(opt.elem_container);
			cont.hide();
			//ouverture et fermeture par glissé
			$(this).live('click',function(){
				//e.preventDefault();
				var answer = $(this).next(opt.elem_container);
		        if (answer.is(":visible")) {
		           answer.slideUp();
		           answer.removeClass("showit_active");
		        } else {
		           answer.slideDown();
		           answer.addClass("showit_active"); 
		        }
			});
		}
	}
})(jQuery);

Une idée ?
a la base je veux me rapprocher de sa :

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
// ## FONCTION POUR Au click on AFFICHER/EFFACER SUBNAV
	$('a[id^="link-subnav-"]').click (function() {
 
		// ## SI  VOLET PAS OUVERT
		if ( ($("#subnav").is(':visible')) == false ){
 
			// Check de id de l'élément a clické pour afficher la navigation correspondante
			if ( ($(this).attr('id')) == "link-subnav-mark" ) {
 
				$('div[class^="sub-nav-"]').css({display: 'none'});
				$(".sub-nav-mark").css({display: 'block'});
 
			}else if ( ($(this).attr('id')) == "link-subnav-catalog" ) {		
				$('div[class^="sub-nav-"]').css({display: 'none'});	
				$(".sub-nav-catalog").css({display: 'block'});
			}
			// Afficher le volet
			$("#subnav").slideDown('slow');
 
		// ## SI  VOLET OUVERT
		} else {
 
			if ( ($(this).attr('id')) == "link-subnav-mark" ) {
				if ($(".sub-nav-mark").is(':visible') == false ) {
 
					$('div[class^="sub-nav-"]').fadeOut('slow');
					$(".sub-nav-mark").fadeIn('slow');
				}
				else{
					$("#subnav").slideUp('slow');
				}		
 
			}else if ( ($(this).attr('id')) == "link-subnav-catalog" ) {
 
				if ($(".sub-nav-catalog").is(':visible') == false ) {
 
					$('div[class^="sub-nav-"]').fadeOut('slow');
					$(".sub-nav-catalog").fadeIn('slow');
				}
				else{
					$("#subnav").slideUp('slow');
				}
			}
		}	
	});

**danielhagnoul** · 16/11/2011, 00h26

Bonsoir

C'est quelque chose comme ceci que vous voulez faire (copier-coller pour test) ?

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* --- */
		ul {margin-left:2.4rem; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<ul id="topmenu" class="nav-horizontal">
			<li class="l1"><a href="http://www.test.dev">accueil</a></li>
			<li class="l1"><a class="showit" href="#" data-showit="1">test1</a></li>
			<li class="l1"><a class="showit" href="#" data-showit="2">test2</a></li>
		</ul>
		<div id="showit1" class="showcontent">
			<ul>
				<li><a href="#" title="test">test</a></li>
				<li><a href="#" title="test">test</a></li>
				<li><a href="#" title="test">test</a></li>
			</ul>
		</div>
		<div id="showit2" class="showcontent">
			<ul>
				<li><a href="#" title="test2">test2</a></li>
				<li><a href="#" title="test2">test2</a></li>
				<li><a href="#" title="test2">test2</a></li>
			</ul>
		</div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-11-16T00:22:29.000+01:00" pubdate>2011-11-16</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<!--
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
	<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/localization/messages_fr.js"></script>
	-->
	<script>
		"use strict";
 
		// Date ISO format long US
		Date.prototype.formatISO = function(){
			this._nowFormat = 'aaaa-mm-jjThh:ii:ss.000Szz:00';
			this._toLen2 = function(_nowStr){
				_nowStr = _nowStr.toString();
				return ('0'+_nowStr).substr(-2,2);
			};
			this._nowFormat = this._nowFormat.replace(/j+/, this._toLen2(this.getDate()));
			this._nowFormat = this._nowFormat.replace(/m+/, this._toLen2(this.getMonth()+1));
			this._nowFormat = this._nowFormat.replace(/a+/, this.getFullYear());
			this._nowFormat = this._nowFormat.replace(/h+/, this._toLen2(this.getHours()));
			this._nowFormat = this._nowFormat.replace(/i+/, this._toLen2(this.getMinutes()));
			this._nowFormat = this._nowFormat.replace(/s+/, this._toLen2(this.getSeconds()));
			this._nowFormat = this._nowFormat.replace(/S+/, (this.getTimezoneOffset() < 0) ? ("+") : ("-"));
			this._nowFormat = this._nowFormat.replace(/z+/, this._toLen2(Math.abs(this.getTimezoneOffset()/60)));
			return this._nowFormat;
		};
 
		(function($){
			$.fn.showitmenu = function(options){
				var defaults = {
					elem_container : 'div.showcontent',
					elem_id : "#showit"
				},
				opts = $.extend(true,{}, defaults, options);
 
				return this.each(function(i, item){
					var jObjContainers = $(opts.elem_container);
 
					jObjContainers.hide();
 
					$(item).click(function(){
						var jObjShowit = $(opts.elem_id + $(this).data("showit"));
 
						jObjContainers.each(function(j, jtem){
							if ((jtem != jObjShowit[0]) && ($(jtem).css("display") != "none")){
								$(jtem).slideToggle();
							}
						});
 
						jObjShowit.slideToggle();
 
						return false;
					});
				});
			};
		})(jQuery);
 
		$(function(){
			/* Base */
			console.log(new Date().formatISO());
 
			/* test showit */
			$("a.showit").showitmenu();
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

**gtraxx** · 16/11/2011, 09h55

Merci Danielhagnoul, j'ai repris votre script et adapter à ma structure.
Au début j'étais partis la dessus (avant de voir votre post)

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
 
$.fn.showitmenu = function(options){
		defaults = {
			showcontener : '.showcontent',
			wrapper : null
		};
		opt = $.extend(true,{},defaults,options);
		if(opt.wrapper != null){
			//Hide (Collapse) the toggle containers on load
			var cont = $(opt.showcontener);
			if(cont.is(":visible")){
				cont.css({display: 'none'});
			}
			$(this).live('click',function(e){
				e.preventDefault();
				var self = $(this);
				var selfid = $(this).attr('href');
				if($(selfid).is(":hidden")){ 
					if($(opt.wrapper+" div:not("+selfid+").showcontent").is(':visible')){
						$(opt.wrapper+" div:not("+selfid+").showcontent").css({display: 'none'});
						$(selfid).fadeIn('slow');
					}else{
						$(selfid).slideDown();
					}
			    }else{
			    	console.log($(opt.wrapper+" div:first-child.showcontent"));
			    	$(selfid).slideUp();
			    }
			});
		}else{
			//Hide (Collapse) the toggle containers on load
			var cont = $(this).next(opt.showcontener);
			cont.hide();
			//ouverture et fermeture par glissé
			$(this).live('click',function(){
				//e.preventDefault();
				var answer = $(this).next(opt.showcontener);
		        if (answer.is(":hidden")) {
		        	if($(":not("+answer+")").is(':visible')){
						$(":not("+answer+")").css({display: 'none'});
						answer.fadeIn();
					}else{
						answer.slideDown();
					}
		        } else {
		           answer.slideUp();
		        }
			});
		}
	}

Sa fonctionnais mais ce n'étais pas génial et surtout pas très propre

J'ai alors repris votre code comme ceci :

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
 
$.fn.showitmenu = function(options){
		var defaults = {
			elem_container : 'div.showcontent',
			elem_id : "#showit"
		},
		opts = $.extend(true,{}, defaults, options);
 
		return this.each(function(i, item){
			var jObjContainers = $(opts.elem_container);
 
			jObjContainers.hide();
 
			$(item).click(function(){
				var selfid = $(this).attr('href');
				var jObjShowit = $(selfid);
				//var jObjShowit = $(opts.elem_id + $(this).data("showit"));
				console.log(jObjShowit);
				jObjContainers.each(function(j, jtem){
					if ((jtem != jObjShowit[0]) && ($(jtem).css("display") != "none")){
						$(jtem).slideToggle();
					}
				});
 
				jObjShowit.slideToggle();
 
				return false;
			});
		});
	};

Il ne me reste qu'a nettoyer tout sa.
j'ai essayer d'utiliser fadeToggle à la place de .slideToggle() mais l'effet ne passe pas bien lors du changement entre les menus.
Et l'utilisation de live à la place de click ne fonctionne pas, je me demande bien pourquoi (vais probablement tester avec on())
PS: la fonction data() est un peu obscure dans ma tête à quoi sert-elle exactement ?
Vous utilisez une synthaxe pur html5 à ce que j'ai observer

(pour l'instant j'ai pas encore franchi le pas, mais on y travail)

**danielhagnoul** · 16/11/2011, 23h15

Bonsoir

Les attributs data, introduit par HTML5 et utilisable dans tous les navigateurs grâce à jQuery, sont le meilleur moyen pour définir des attributs personnels.

**gtraxx** · 22/11/2011, 11h41

Super merci danielhagnoul, j'en sais un peux plus sur les datas

afficher cacher une div dans un pseudo container

jQuery

Discussions similaires

Partager

Partager