bonjour à tous!
j'ai une soucie avec le collaps menu.
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.
C'est presque au point!
j'ai juste une condition if else qui ne fonctionne pas car la variable x garde toujours valeur de dépard¨, alors qu'elle devrais prendre une autre valeur¨.
cette condition if else me permet d'exploiter la même fonction fold.
je suis nouveau ici ainsi je découvre aussi le jquery.
le code se trouve sur mes post des deux derniers semaines (qui sont du reste les premiers)
voici la dernière version du JS
merci pour votre temps...
j'ai une soucie avec le collaps menu.
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.
C'est presque au point!
j'ai juste une condition if else qui ne fonctionne pas car la variable x garde toujours valeur de dépard¨, alors qu'elle devrais prendre une autre valeur¨.
cette condition if else me permet d'exploiter la même fonction fold.
je suis nouveau ici ainsi je découvre aussi le jquery.
le code se trouve sur mes post des deux derniers semaines (qui sont du reste les premiers)
voici la dernière version du JS
$(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){
suite = 'contenupage';
alert('if(folded) contenupage : ' + suite);
hideContent();
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\')); - retourne l\'attribut class de la première variable showContent($li_e.attr(\'class\'))' + '\n' + eattr2);
}
else /* Déploy et affiche le contenu page */
/* suite = 'mounir';
alert('if(folded) else mounir : ' + 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());
suite = 'mounir';
alert('appel_unfold mouir : ' + '\n' + suite);
unfold();
m_enter($li_e.attr('class')); /* Appararition du Item 2 [Titre & Sous-menu] */
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();
}
});
});
});
}
/* 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(){
$('#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 = 'mounir')
{
alert('Condition valeur OK de la variable $suite dans hidecontent() - passée');
alert('hideContent if mounir : ' + suite);
var $li_e = $("ul:eq(1) li:nth-child(2)");
fold($li_e);
}else{
alert('Condition valeur OK de la variable $suite dans hidecontent() - pas passée');
suite = 'contenupage';
alert('hideContent else contenupage : ' + suite);
}
}
});
merci pour votre temps...
