afficher cacher une div dans un pseudo container [Résolu]

[gtraxx]

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 :

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 :

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]

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 :

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]

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 :

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 :

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 :

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]

Bonsoir

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

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
<!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]

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 :

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 :

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]

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]

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