Sujet : Création d'un plugins d'interaction entre 3 div

Bonjour,

j'essaie de crée un plugins qui aura comme effet de faire une interaction entre 3 div qui font mon menu... Je veux aussi retenir par cookie le menu qui étais afficher a la derniere visite et l'afficher automatique au moment de la prochaine visite.

Mon menu a 3 sections :

recherche+map+result
je veux qu'il puisse ce transformer comme suis selon le gout du visiteur
1) recherche+map
2) recheche+resultat
3) recherche+map+resultat

Voici le code que j'ai fais si vous pouvez m'aider ce serait plus qu'apprécier... car j'ai retourner cela de tout les cotés et je n'arrives pas a ce que je veux !!!

#search {
    width:960px;
    background-color:#FFF;
    border:1px solid #e6e4de;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
}

#search #header {
    width:960px;
    padding:10px;
}

#search #header #icon {
    float:right;
    padding-right:20px;
}
#search #left {
    float: left; 
    width: 265px;
    background-color:#0F0;
}

#search #middle {
    float: left; 
    width: 430px;
    background-color:#0FF;
}


#search #right {
    float: right; 
    width: 265px;
    background-color:#F00;
}

#search #clear { clear: both; }

#search #footer {
    width:960px;
    padding:10px;
}
<div id="search">
  <div id="header">Recherche immobilière
    <div id="icon">
    <img src="templates/default/images/display2.gif" id="icon1" title="Search and Map" style="cursor: pointer; cursor: hand;" />
    <img src="templates/default/images/display3.gif" id="icon2" title="Search and Result"style="cursor: pointer; cursor: hand;" />
    <img src="templates/default/images/display1.gif" id="icon3" title="Search. Map and Result" style="cursor: pointer; cursor: hand;" />  </div>
  </div>
  <div id="left">searchbox</div>
  <div id="middle">mapbox</div>
  <div id="right">resultbox</div>
  <div id="clear"></div>
  <div id="footer">searchbox</div>
</div>

(function($){
    $.fn.extend({
        interAction3Div: function(options) {

        var defaults = { 
                         leftId: '#left',
                         middleId: '#middle',
                         rightId:    '#right',
                         iconId:    '#icon',
                         headerId:    '#header',
                         footerId:    '#footer',
                         leftWidth:265,
                         middleWidth:430,
                         rightWidth:265,
                         duration:200,
                         iconSelect: 1,
                         iconId1: '#icon1',
                         iconId2: '#icon2',
                         iconId3: '#icon3' 
                        };

        var options = $.extend(defaults, options);
        var o = options;
           var obj = $(this);
             
            
            
            //WIDTH 3 DIV
            $(o.leftId, obj).animate({width:o.leftWidth+"px"}, { duration : o.duration, queue: false});
            $(o.middleId, obj).animate({width:o.middleWidth+"px"}, { duration : o.duration, queue: false});
            $(o.rightId, obj).animate({width:o.rightWidth+"px"}, { duration : o.duration, queue: false});
            
            //ICON
            
            var icon1 = $(o.iconId1, obj);
            var icon2 = $(o.iconId2, obj);
            var icon3 = $(o.iconId3, obj);
            
            if(o.iconSelect != 1) { 
                icon1.css({ opacity: 0.4 });
                icon1.hover(function() { $(this).css({"opacity": 1}); },function() { $(this).css({"opacity": 0.4}); });
            }
            
            if(o.iconSelect != 2) {
                icon2.css({ opacity: 0.4 });
                icon2.hover(function() { $(this).css({"opacity": 1}); },function() { $(this).css({"opacity": 0.4}); });
            }
            
            
            if(o.iconSelect != 3) {
                icon3.css({ opacity: 0.4 });
                icon3.hover(function() { $(this).css({"opacity": 1}); },function() { $(this).css({"opacity": 0.4}); });
                
            }

                    
            
        }
    });
})(jQuery);


$.cookie("searchStyle", "2", { expires: 365 });                     


//cookie 1 ou aucun : Search + Map
if($.cookie("searchStyle")==1 || !$.cookie("searchStyle")) {
    leftDiv         = 265;
    middleDiv         = 695;
    rightDiv        = 0;
    iconSelected     = 1;
}

//cookie 2 : Search + Result
if($.cookie("searchStyle")==2) {
    leftDiv         = 265;
    middleDiv         = 0;
    rightDiv        = 695;
    iconSelected     = 2;

}

//cookie 3 : Search + Mao + Result
if($.cookie("searchStyle")==3) {
    leftDiv         = 265;
    middleDiv         = 430;
    rightDiv        = 265;
    iconSelected     = 3;

}


$('#search').interAction3Div({leftId: '#left',
                               middleId: '#middle',
                               rightId:    '#right',
                               leftWidth:leftDiv,
                              middleWidth:middleDiv,
                              rightWidth:rightDiv,
                              duration:400 });    

});
$('#icon1').click(function() {
    $('#search').interAction3Div({leftId: '#left',
                                  middleId: '#middle',
                                  rightId:    '#right',
                                  leftWidth:265,
                                  middleWidth:695,
                                  rightWidth:0,
                                  duration:400,
                                  iconSelect:1 });    
});

$('#icon2').click(function() {
    $('#search').interAction3Div({leftId: '#left',
                                  middleId: '#middle',
                                  rightId:    '#right',
                                  leftWidth:265,
                                  middleWidth:0,
                                  rightWidth:695,
                                  duration:400,
                                  iconSelect:2 });    
});

$('#icon3').click(function() {
    $('#search').interAction3Div({leftId: '#left',
                                  middleId: '#middle',
                                  rightId:    '#right',
                                  leftWidth:265,
                                  middleWidth:430,
                                  rightWidth:265,
                                  duration:400,
                                  iconSelect:3 });    
});
                

ce que je veux le plus :
1) a partir du cookie il fait le menu directement comme désirer (sans animation)
2) quand on appuie sur un icon, il change les dimensions comme désirer.
3) quand un icon a été selectionner il doit afficher plus foncé celle selectionner.

2

Re : Création d'un plugins d'interaction entre 3 div

Bonsoir,

1):
Vous supprimez cette ligne :

$.cookie("searchStyle", "2", { expires: 365 }); 

Et ajoutez ceci pour chaque icone :

$('#icon1').click(function() {
$.cookie("searchStyle", "1", { expires: 365 }); 
...

$('#icon2').click(function() {
$.cookie("searchStyle", "2", { expires: 365 }); 
...

$('#icon3').click(function() {
$.cookie("searchStyle", "3", { expires: 365 }); 
...

Vous pouvez également ajouter ceci :

if($.cookie("searchStyle")==1) {
    $('#icon1').addClass('active');
...

etc...

2) :
Je vous conseille de cacher les div qui n'ont plus de width :

$(o.leftId, obj).animate({width:o.leftWidth+"px"}, { duration : o.duration, queue: false}, "linear", function() {
  $(this).hide();
});

3) :
Ajoutez ceci :

#search #header #icon img{
    opacity: 0.4;
}

#search #header #icon .active {
    opacity: 1 !important;
}
$('#icon1').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
...
});

A chaque clique sur une icone, vous supprimez toutes les class qui sont activé (il devrait y avoir qu'une bien sur) et vous ajoutez à celui-ci la class active.
Et supprimer votre gestion des opacité faite en js. A vous de voir.

En espérant être assez détaillé.
Lochar,