Personnaliser menu mootabs

Bonjour à tous,

ceci est mon premier post sur ce forum, mais j'espère y participer activement.

J'ai des connaissances en css pour les choses de base, mais là je sèche.
J'ai des onglets (tabs) à mettre sur mon site.

J'utilise mootabs basé sur mootools (javascript).

Mon soucis est que j'ai mon design d'onglet est divisé en 2 images une à gauche (sorte de flèche) et l'autre correspond au corps global de ma tab.

J'arrive sur la tab active à afficher mes éléments sans soucis.

Par contre sur les éléments non actifs, quand je click pour faire changer de css (en fait simplement d'image de fond), je sèche.

Il s'agit de code javascript également, mais vous pourrez peut-être m'aider sur ce forum.

voici mes codes :

.mootabs_title {
margin: 0px;
padding: 0px;
height: 28px;
}

.actif{
float:left;
display:block;
background:url("bg_right_tab_orange.png") repeat-x right top;
padding-top:3px;
padding-right:10px;
height: 28px;
}

.passif{
float:left;
display:block;
background:url("bg_right_tab_blue.png") repeat-x right top;
padding-top:3px;
padding-right:10px;
height: 28px;
}

.mootabs_title li {
list-style:none;
float: left;
background:url("bg_left_tab_blue.png") no-repeat left top;
margin-right:10px;
padding:0 0 0 17px;
color:#FFF;
height: 28px;
}

.mootabs_title li.active {
list-style:none;
float: left;
background:url("bg_left_tab_orange.png") no-repeat left top;
margin-right:10px;
padding:0 0 0 17px;
color:#FFF;
height: 28px;
}

.mootabs_panel {
display: none;
position: relative;
width: 100%;
top: -1px;
clear: both;
color: #005782;
overflow: auto;
padding-top: 5px;
}

.mootabs_panel.active {
display:block;
}

et le code html (php):

<div id="myTabs">
<ul class="mootabs_title">
<li class="active" title=<?php echo $tab_1_Surete_supports ?>><div class="actif"><?php echo $tab_1_Surete_supports ?></div></li>
<li class="" title="tab2"><div class="passif"><?php echo $tab_2_Surete_supports ?></div></li>
<li class="" title="tab3"><div class="passif"><?php echo $tab_3_Surete_supports ?></div></li>
</ul>

et enfin le .js :

var mootabs = new Class({

initialize: function(element, options) {
this.options = Object.extend({
width: '300px',
height: '200px',
changeTransition: Fx.Transitions.Bounce.easeOut,
duration: 1000,
mouseOverClass: 'active',
activateOnLoad: 'first',
useAjax: false,
ajaxUrl: '',
ajaxOptions: {method:'get'},
ajaxLoadingText: 'Chargement...'
}, options || {});

this.el = $(element);
this.elid = element;

this.el.setStyles({
height: this.options.height,
width: this.options.width
});

this.titles = $$('#' + this.elid + ' ul li');
this.panelHeight = this.el.getSize().size.y - (this.titles[0].getSize().size.y + 4);
this.panels = $$('#' + this.elid + ' .mootabs_panel');


this.panels.setStyle('height', this.panelHeight);

this.titles.each(function(item) {
item.addEvent('click', function(){
item.removeClass(this.options.mouseOverClass);
this.activate(item);
}.bind(this)
);

item.addEvent('mouseover', function() {
if(item != this.activeTitle)
{
item.addClass(this.options.mouseOverClass);
}
}.bind(this));

item.addEvent('mouseout', function() {
if(item != this.activeTitle)
{
item.removeClass(this.options.mouseOverClass);
}
}.bind(this));
}.bind(this));


if(this.options.activateOnLoad != 'none')
{
if(this.options.activateOnLoad == 'first')
{
this.activate(this.titles[0], true);
}
else
{
this.activate(this.options.activateOnLoad, true);
}
}
},

activate: function(tab, skipAnim){
if(! $defined(skipAnim))
{
skipAnim = false;
}
if($type(tab) == 'string')
{
myTab = $$('#' + this.elid + ' ul li').filterByAttribute('title', '=', tab)[0];
tab = myTab;
}

if($type(tab) == 'element')
{
var newTab = tab.getProperty('title');
this.panels.removeClass('active');

this.activePanel = this.panels.filterById(newTab)[0];

this.activePanel.addClass('active');


if(this.options.changeTransition != 'none' && skipAnim==false)
{
this.panels.filterById(newTab).setStyle('height', 0);
var changeEffect = new Fx.Elements(this.panels.filterById(newTab), {duration: this.options.duration, transition: this.options.changeTransition});
changeEffect.start({
'0': {
'height': [0, this.panelHeight]
}
});
}

this.titles.removeClass('active');

tab.addClass('active');
tab.addClass('actif');

this.activeTitle = tab;

if(this.options.useAjax)
{
this._getContent();
}
}
}

});

Voilà c'est un peu compliqué mais si vous avez des idées, je suis preneur....

merci et bonne journée.

Hello polyvan et bienvenue parmi nous ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation
Modifié par Heyoan (01 Feb 2009 - 12:35)