IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Y a-t-il une autre façon de faire ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut Y a-t-il une autre façon de faire ?
    Bonjour à tous!

    j'utilise un colllaspe
    Il contient 4 item avec leur sous-menu respectif!
    le but est en cliquant sur un lien du sous-menu1 du item1 pour aller sur le sous-menu2 du item2.

    pour effectuer cette événement, j'ai du mettre une condition avec une variable suite ayant deux état différent à des endroit différents

    voici le code (merci d'avance pour la lecture)


    Pour faire cette liaison voici les functions ajoutées
    je me sert de la variable suite avec deux état différents pour que cela fonctionne! (bien sûr je suis débutant)...

    y a t-il une façon plus simple?
    merci pour vos suggestions

    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
    $.fn.appel = function ($Lien) {
    	$(this).data('clicked', true);
    	alert('$.fn.appel = function ' + '\n' + 'Affiche le titre du lien cliqué $lien' + '\n' + $Lien.text());
    	alert('$.fn.appel = function ' + '\n' + 'Affiche le titre du lien cliqué $(this)' + '\n' + $(this).text());
    	var $NomContent = $(".cc_item:eq(1)");
    	alert('$.fn.appel = function ' + '\n' + 'Affiche les noms Titre&Sous-Menus cible  $(".cc_item:eq(1)")  : ' + '\n' + $NomContent.text());
    	var $li_e = $("ul:eq(1) li:nth-child(2)");
    	alert('$.fn.appel = function ' + '\n' + 'Affiche le Nom du Lien cible $("ul:eq(1) li:nth-child(2)") $li_e : ' + '\n' + $li_e.text());
    	var $IDContent = $li_e.attr('class');
    	alert('$.fn.appel = function' + '\n' + 'Affiche le No. de la class du Lien cible cc_content_x_y  $IDContent: '  + '\n' + $IDContent);
    	var $this = $NomContent;
    	alert('$.fn.appel = function' + '\n' + 'Affiche les noms Titre&Sous-Menus cible  $(".cc_item:eq(1)") $this : '  + '\n' + $this.text());
    	$(this).appel_unfold($li_e);
    	$(this).data('clicked', false); /* annule la valeur active - réinitialisation de la valuer du lien */			
    	/* $li_e.attr('class').appel_fold($li_e); */
    	/* $(this).appel_fold($li_e, $NomContent); */
    }
    $.fn.appel_unfold = function ($li_e) {
    	alert('appel_unfold - Nom du lien cliqué $this :' + '\n' + $(this).text());
    	unfold();
    	m_enter($li_e.attr('class')); /*  Appararition du Item 2 [Titre & Sous-menu] */	
    	suite = 'mounira';
    	alert('appel_unfold mounira : ' + '\n' + suite);
    	/* delete suite; */
    	/* $li_e.data('clicked', true); */
    	/* $("#nav2 > ul > li:nth-child(2)").trigger('click', 'appel_fold($li_e, $NomContent)'); */
    	/* $li_e.appel_fold($li_e); */
    	/* $li_e.data('clicked', false); */
    }
    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
    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
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    $(function () {
    	/* Tous les éléments Item */
    	var $items 		= $('#cc_menu .cc_item');
    	alert('valeur de $items (éléments) - Affiche tous les Titres/Sous-Menus '  + '\n' + $items.text());
    	/* Nom total d'éléments items */
    	var cnt_items	= $items.length;
    	alert('Nombre total de item (éléments) cnt_items '  + '\n' + cnt_items);
    	//if menu is expanded then folded is true
    	var folded		= false;
    	//timeout to trigger the mouseenter event on the menu items
    	var menu_time;
     
    	/* bind the mouseenter, mouseleave to each item: - shows / hides image and submenu
    	    bind the click event to the list elements (submenu): - hides all items except the clicked one, and shows the content for that item */
    	$items.unbind('mouseenter')
    		  .bind('mouseenter',m_enter)
    		  .unbind('mouseleave')
    		  .bind('mouseleave',m_leave)
    		  .find('.cc_submenu > ul > li')
    		  .bind('click',function(){
    		  	alert('$items.unbind' + '\n' + 'Liste complètes liens des sous-menus une fois avoir cliqué sur un d\'eux : ' + '\n' + $('.cc_submenu > ul > li').text());
    		var $li_e = $(this);
    		alert('$items.unbind - Identification du lien cliqué :' + '\n' + $li_e.text());
    		/* Si le Item est déployé alors remplacement du contenu (page) */
    		if(folded){  								/* -----  Si déployé - True */
    			alert('folded valeur true :' + folded);
    			suite = 'contenupage';
    			alert('if(folded) contenupage : ' + suite);
    			hideContent(suite);
    			showContent($li_e.attr('class'));         /* retourne l'attribut class de la première variable $li_e */
    			var eattr2 = $li_e.attr('class');
    			alert('if(folded) - showContent($li_e.attr(\'class\'));' + '\n' + 'retourne l\'attribut class de la première variable showContent($li_e.attr(\'class\'))'  + '\n' + eattr2);
    		}	
    			else                           /* -----  Si non déploy - False */
    			alert('if(folded) else valeur false :' + folded);
    			suite = 'mounira';
    			alert('if(folded) else mounira : ' + suite);
    			alert('if(folded) else - Identification du lien cliqué  : ' + '\n' + $li_e.text());
    			fold($li_e);
    	});
     
    		$.fn.appel = function ($Lien) {
    			$(this).data('clicked', true);
    			alert('$.fn.appel = function ' + '\n' + 'Affiche le titre du lien cliqué $lien' + '\n' + $Lien.text());
    			alert('$.fn.appel = function ' + '\n' + 'Affiche le titre du lien cliqué $(this)' + '\n' + $(this).text());
    			var $NomContent = $(".cc_item:eq(1)");
    			alert('$.fn.appel = function ' + '\n' + 'Affiche les noms Titre&Sous-Menus cible  $(".cc_item:eq(1)")  : ' + '\n' + $NomContent.text());
    			var $li_e = $("ul:eq(1) li:nth-child(2)");
    		   alert('$.fn.appel = function ' + '\n' + 'Affiche le Nom du Lien cible $("ul:eq(1) li:nth-child(2)") $li_e : ' + '\n' + $li_e.text());
    			var $IDContent = $li_e.attr('class');
    			alert('$.fn.appel = function' + '\n' + 'Affiche le No. de la class du Lien cible cc_content_x_y  $IDContent: '  + '\n' + $IDContent);
    			var $this = $NomContent;
    			alert('$.fn.appel = function' + '\n' + 'Affiche les noms Titre&Sous-Menus cible  $(".cc_item:eq(1)") $this : '  + '\n' + $this.text());
    			$(this).appel_unfold($li_e);
    			$(this).data('clicked', false); /* annule la valeur active - réinitialisation de la valuer du lien */			
    			/* $li_e.attr('class').appel_fold($li_e); */
    			/* $(this).appel_fold($li_e, $NomContent); */
     
    		}
     
    		$.fn.appel_unfold = function ($li_e) {
    			alert('appel_unfold - Nom du lien cliqué $this :' + '\n' + $(this).text());
    			unfold();
    			m_enter($li_e.attr('class')); /*  Appararition du Item 2 [Titre & Sous-menu] */	
    			suite = 'mounira';
    			alert('appel_unfold mounira : ' + '\n' + suite);
    			/* delete suite; */
    			/* $li_e.data('clicked', true); */
    			/* $("#nav2 > ul > li:nth-child(2)").trigger('click', 'appel_fold($li_e, $NomContent)'); */
    			/* $li_e.appel_fold($li_e); */
    			/* $li_e.data('clicked', false); */
    		}
     
    	/* mouseenter function (entrée souris sur la surface Item) trigger */
    	function m_enter(){
     
    	if( $('#CoffretTxT > ul > li:nth-child(1)').data('clicked'))
    		{		
    			alert('Fonction  m_enter() if' + '\n' + '$(this).data(\'clicked\', true) -- clicked');
    			alert('Fonction  m_enter() if ' + '\n' + 'valeur de $(".cc_item:eq(1)") - $NomContent ' + $(".cc_item:eq(1)").text());
    			var $this 	= $(".cc_item:eq(1)");
     
    			var eattr0 = $this.attr('class');
    			alert('Fonction  m_enter() if' + '\n' + 'clicked - Identification du Item survolé par la souris (entrée souris sur la surface Item) : ' + '\n' + $this.text());
    			alert('Fonction  m_enter() if' + '\n' + 'clicked - Identification de la classe du Item survolé par la souris (entrée souris sur la surface Item) : ' + '\n' + eattr0);
     
    			clearTimeout(menu_time);
    			menu_time 	= setTimeout(function(){
    				//img
    				$this.find('img').stop().animate({'top':'0px'},400);
    				$this.find('.cc_title').stop().animate({'top':'449px'},400).css('background','#3c824e');
    				//cc_submenu ul
    				$this.find('.cc_submenu > ul').stop().animate({'height':'81px'},400);
    			},200);
     
    	    	return $(this);
     
     
    		}else{
    		/* z.preventDefault(); */
     
    		var $this 	= $(this);
    		var eattr0 = $this.attr('class');
    		alert('Fonction  m_enter() ' + '\n' + 'Identification du Item survolé par la souris (entrée souris sur la surface Item) : ' + '\n' + $this.text());
    		alert('Fonction  m_enter() ' + '\n' + 'Identification de la classe du Item survolé par la souris (entrée souris sur la surface Item) : ' + '\n' + eattr0);
     
     
    		clearTimeout(menu_time);
    		menu_time 	= setTimeout(function(){
    		//img
    		$this.find('img').stop().animate({'top':'0px'},400);
    		$this.find('.cc_title').stop().animate({'top':'449px'},400).css('background','#3c824e');
    		//cc_submenu ul
    		$this.find('.cc_submenu > ul').stop().animate({'height':'81px'},400);
    		},200);
    		}
    	}
     
    	/* mouseleave function (retrait souris de la surface Item) */
    	function m_leave(){
     
    		var $this = $(this);
    		/* alert('Fonction  m_leave() ' + '\n' + 'Identification du Item survolé par la souris (retrait souris de la surface Item) : ' + '\n' + $this.text()); */
    		clearTimeout(menu_time);
    		//img
    		$this.find('img').stop().animate({'top':'-600px'},400);
    		$this.find('.cc_title').stop().animate({'top':'267px'},400).css('background','none');
     
    		//cc_submenu ul
    		$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
     
    	}
     
    	//Bouton Back - unfolds les menus
    	$('#cc_back').bind('click',unfold);
     
     
    	/* Cache tous les menu sauf celui cliqué puis affiche le Iten clible */
    	function fold($li_e){
    		var $item		= $li_e.closest('.cc_item');
    		alert('Fonction  fold($li_e) ' + '\n' + 'Identification du Item clible : ' + '\n' + $item.text());
    		alert('Fonction : fold($li_e) ' + '\n' + 'Identification du lien cliqué : ' + '\n\n' + $li_e.text());
    		eattr10 = $item.attr('class');
    		alert('Fonction : fold($li_e) ' + '\n' + 'Identification du lien cliqué valeur : ' + '\n\n' + eattr10);
     
    		var d = 100;
    		var step = 0;
    		$items.unbind('mouseenter mouseleave');
    		/* alert('fold($li_e) ' + '\n' + ' mouseenter mouseleave : ' + '\n' + ('mouseenter mouseleave')); */
    		$items.not($item).each(function(){
    			var $item = $(this);
    			alert('Fonction fold($li_e) ' + '\n' + 'Identification des autres menus non ciblé;: ' + '\n' + $item.text());
    			$item.stop().animate({
    				'marginLeft':'-231px'
    			},d += 200,function(){
    				++step;
    				if(step == cnt_items-1){
    					/* alert('$items.not($item).each(function() ' + '\n' + ' step : ' + '\n' + d); */
    					folded = true;
    					showContent($li_e.attr('class'));
    					var eattr3 = $li_e.attr('class');
    					alert('$items.not($item).each(function() ' + '\n' + 'Affiche le Nom du Lien cible (demandé) : ' + '\n' + $li_e.text());
    			      alert('$items.not($item).each(function() -- ($li_e.attr(\'class\'))' + '\n' + 'Affiche le No. de la class cc_content du Lien cible (demandé) : '  + '\n' + eattr3);
    				}	
    			});
    			/* return $(this); */
    		});
    	}
     
    	/* Affiche tous les Items avec leur titre respectif sauf Image/Sous-Menu */
    	function unfold(){
    		$('#cc_content').stop().animate({'left':'-693px'},600,function(){
    		alert('function unfold() ' + '\n' + 'Cache la page cc_content_x_y : ' + '\n' + $('#cc_content').text());
    			var d = 100;
    			var step = 0;
    		$items.each(function(){
    				var $item = $(this);
    				alert('function unfold() $items.each(function() ' + '\n' + 'Cache la page cc_content_x_y cible: ' + '\n' + $item.text());
     
    				$item.find('img')
    					 .stop()
    					 .animate({'top':'-600px'},200)
    					 .andSelf()
    					 .find('.cc_submenu > ul')
    					 .stop()
    					 .animate({'height':'0px'},200)
    					 .andSelf()
    					 .find('.cc_title')
    					 .stop()
    					 .animate({'top':'267px'},200).css('background','none');					 
     
    				$item.stop().animate({
    				'marginLeft':'0px'
    				},d += 200,function(){
    					++step;
    					if(step == cnt_items-1){
    						alert('function unfold() $items.each(function() ' + '\n' + 'Nombre total de Items - Nb. d\'éléments : ' + '\n' + cnt_items);
    						folded = false;
    						$items.unbind('mouseenter')
    							  .bind('mouseenter',m_enter)
    							  .unbind('mouseleave')
    							  .bind('mouseleave',m_leave);
    						hideContent(suite);
    					}		  
    				});
    			});
    		});
    			suite = 'contenupage';
    			alert('hideContent contenupage : ' + suite);
    	}
     
    	/* Affiche la page content */
    	function showContent(idx){
    		$('#cc_content').stop().animate({'left':'231px'},200,function(){
    			alert('showContent(idx) - Retourne le contenu total de la balise html cc_content : ' + '\n' + $("#cc_content").text());
    			$(this).find('.'+idx).fadeIn();
     
    			var ttr = $(this).find('.'+idx);
    			/* alert('JS - MSG-Fonction showContent : This ' + '\n' + 'valeur : ' + '\n' + $(this).text()); */
    			alert('showContent(idx) - Retourne le contenu cc_content cible :'  + '\n' + ttr.text());
    		});
    	}
     
    	/* Cache la page content */
    	function hideContent(suite){
    		$('#cc_content').find('div.block').hide(	);
    		alert('hideContent() - Retourne le contenu total de la balise html cc_content $(\'#cc_content\') :'  + '\n' + $('#cc_content').text());
    		alert('hideContent() - $(\'div.block\') :'  + '\n' + $('div.block').text());
    		if (suite == 'mounira')
    		{
    			alert('Condition valeur OK de la variable $suite dans hidecontent() - passée');
    			alert('hideContent if mounir : ' + suite);
    			suite = 'contenupage'
    			var $li_e = $("ul:eq(1) li:nth-child(2)");
    			fold($li_e);
     
    		}
    		if (suite == 'contenupage')
    		{
    			alert('Condition valeur OK de la variable $suite dans hidecontent() - pas passée');
    			suite = 'contenupage';
    			alert('hideContent contenupage : ' + suite);
    		}
     
    	}
     
    });
    Dernière modification par Bovino ; 04/03/2013 à 18h26. Motif: Réduction d'indentation : merci de penser à ceux qui lisent le code...

  2. #2
    Invité
    Invité(e)
    Par défaut
    solution trouvée et résolu! ça fonctionne clairement!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Une autre façon d'écrire ma requête
    Par cmako dans le forum Développement
    Réponses: 7
    Dernier message: 26/02/2009, 16h16
  2. Ecrire une méthode d'une autre façon
    Par Sabact dans le forum Débuter avec Java
    Réponses: 4
    Dernier message: 06/05/2008, 08h17
  3. Une autre façon de compter les pages d'un document word
    Par ouskel'n'or dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 27/05/2007, 12h53
  4. [JavaScript] [FAQ] une autre façon de faire des tableaux à coins arrondis
    Par SpaceFrog dans le forum Contribuez
    Réponses: 6
    Dernier message: 10/01/2007, 09h35
  5. Imbriquer une méthode dans une autre façon php
    Par titpuce dans le forum Langage
    Réponses: 6
    Dernier message: 09/10/2006, 10h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo