Bonjour,
Il existe déjà pas mal de scripts pour générer des onglets, notamment celui de Wonesek repris par Djoad. Malheureusement, son utilisation ne convenait pas à mes besoins. J'ai donc développé ce script, qui utilise non pas un tableau et des bouts d'HTML dans le script, mais des DIV et des CSS. Si vous n'êtes pas familier avec la mise en page de DIV au moyen de CSS, je vous déconseille l'utilisation de ce code. Sans CSS, ça ne ressemble à rien ;)
Cette toute première version gère des onglets TEXTE, HTML, URL chargés dans une iframe, et du contenu chargé avec un peu d'Ajax.
NB : ce script repose sur le framework Prototype version 1.5.1.1 (
http://www.prototypejs.org/). Le framework est fournit dans le zip. Ici encore, une petite mise en garde : si vous n'avez jamais mis le nez dans Prototype, vous allez avoir du mal à comprendre mon script.
Je ne suis pas un expert en javascript (je suis plus à l'aise avec PHP et l'actionscript). N'hésitez pas à remonter des bugs ou des optimisations possibles. Merci de votre indulgence ;)
Source / Exemple :
/*
- Auteur : Daynos <devjs@daynos.net>
-
- Class Onglet - version 0.1.20070703
-
- /!\/!\/!\/!\/!\/!\/!\/!\/!\
- REQUIERT LE FRAMEWORK JAVASCRIPT "PROTOTYPE"
- Prototype JavaScript framework, version 1.5.1.1
- (c) 2005-2007 Sam Stephenson
- http://www.prototypejs.org/
- /!\/!\/!\/!\/!\/!\/!\/!\/!\
- /
Onglet = Class.create ();
Onglet.prototype = {
Version : '0.2.20070723',
element : null, /* calque attribué au gestionnaire d'onglet */
initialize: function (element, cssId){
this.element = $(element);
Object.extend (this.element, __OngletElement);
this.element.initialize (cssId);
},
// Ajouter un onglet de type TEXTE : charge du texte dans le div
addOngletTexte: function (titre, contenu) {
return this.element.addOnglet (0, titre, contenu);
},
// Ajouter un onglet de type HTML : charge du code html dans le div
addOngletHtml: function (titre, contenu) {
return this.element.addOnglet (1, titre, contenu);
},
// Ajouter un onglet de type URL : charge une page html dans une iframe
addOngletUrl: function (titre, contenu) {
return this.element.addOnglet (2, titre, contenu);
},
// Ajouter un onglet de type AJAX : charge une contenu dynamique dans le div
addOngletAjax: function (titre, contenu) {
return this.element.addOnglet (3, titre, contenu);
},
// Ajouter un onglet de type CALQUE : récupère le contenu d'un div existant et le place dans un onglet
addOngletCalque: function (titre, contenu) {
return this.element.addOnglet (4, titre, contenu);
},
// Affiche l'onglet n°...
setFocus: function (n) {
this.element.setFocus (n);
}
}
__OngletElement = {
oMenu : null, /* calque contenant les boutons du menu */
oConteneur : null, /* calque contenant les contenus des onglets */
nOnglets : 0, /* nombre d'onglets liés */
cssId : null, /* préfixe des css à utiliser */
initialize: function (cssId) {
this.cssId = cssId;
// Ajouter le CSS
this.addClassName (this.cssId);
// Créer le calque qui contiendra les boutons du menu
var menuDiv = document.createElement('div');
menuDiv.id = this.id + "_m";
this.appendChild (menuDiv);
this.oMenu = $(menuDiv.id);
Object.extend (this.oMenu, __MenuOnglet);
this.oMenu.initialize (cssId);
// Créer le calque qui contiendra l'ensemble des onglets
var conteneurDiv = document.createElement('div');
conteneurDiv.id = this.id + "_c";
this.appendChild (conteneurDiv);
this.oConteneur = $(conteneurDiv.id);
Object.extend (this.oConteneur, __ConteneurOnglet);
this.oConteneur.initialize (cssId);
},
// Ajouter un onglet, retourne l'id du calque "contenu"
addOnglet: function (type, titre, contenu) {
this.nOnglets++;
// créer un bouton pour l'onglet
this.oMenu.addBouton (this.nOnglets, titre, this.cssId);
// créer un calque pour accueillir le contenu de l'onglet
return this.oConteneur.addContenu (this.nOnglets, type, contenu, this.cssId);
},
setFocus: function (newFocusId) {
var contenu = this.oConteneur.getElementId (newFocusId);
var bouton = this.oMenu.getElementId (newFocusId);
// Cacher tous les contenus
this.oConteneur.immediateDescendants().each(Element.hide);
// Griser tous les onglets
this.oMenu.immediateDescendants().each(__BoutonOnglet.setInactive);
// Afficher le contenu de l'onglet désiré
$(contenu).show ();
// Afficher le bouton de l'onglet désiré
$(bouton).setActive (bouton);
}
}
__MenuOnglet = {
initialize: function () {
this.addClassName (this.up(0).cssId + "_menu");
},
addBouton: function (ongletId, texte) {
// Créer le calque du bouton
var nouveauDiv = document.createElement('div');
nouveauDiv.id = this.getElementId (ongletId);
nouveauDiv.ongletId = ongletId;
this.appendChild (nouveauDiv);
Object.extend ($(nouveauDiv.id), __BoutonOnglet);
$(nouveauDiv.id).initialize (texte);
},
getElementId: function (n) {
return this.id + "_b" + n;
}
}
__ConteneurOnglet = {
initialize: function (cssId) {
this.addClassName (cssId + "_conteneur");
},
addContenu: function (ongletId, type, contenu, cssId) {
// Créer le calque du contenu
var nouveauDiv = document.createElement('div');
nouveauDiv.id = this.getElementId (ongletId);
this.appendChild (nouveauDiv);
Object.extend ($(nouveauDiv.id), __ContenuOnglet);
$(nouveauDiv.id).initialize (type, contenu, cssId);
return nouveauDiv.id;
},
getElementId: function (n){
return this.id + "_c" + n;
}
}
__BoutonOnglet = {
initialize: function (texte) {
this.appendChild (document.createTextNode(texte));
this.setInactive ();
// Surveiller les click sur le bouton
this.observe ('click', function(event){
var elm = Event.element(event);
$(elm).up(1).setFocus ($(elm).ongletId);
});
},
setActive: function (element) {
if (!element) {element = this;}
var cssId = $(element).up(1).cssId;
if ($(element).hasClassName (cssId + "_bouton_off")) {
$(element).removeClassName (cssId + "_bouton_off");
}
$(element).addClassName (cssId + "_bouton");
},
setInactive: function (element) {
if (!element) {element = this;}
var cssId = $(element).up(1).cssId;
if ($(element).hasClassName (cssId + "_bouton")) {
$(element).removeClassName (cssId + "_bouton");
}
$(element).addClassName (cssId + "_bouton_off");
}
}
__ContenuOnglet = {
initialize: function (type, valeur, cssId) {
// gérer le contenu du div selon son type
switch (type) {
case 0:
// mode texte
this.appendChild (document.createTextNode(valeur));
break;
case 1:
// mode html
this.update(valeur);
break;
case 2:
// mode url
if (Prototype.Browser.IE)
{
// IE n'aime pas les iframe créé via createElement. Alors il faut lui dédier un bout de code...
var html = "<iframe id='" + this.id + "_i'"
+ " src='" + valeur + "'"
+ " scrolling='1'"
+ " frameborder='0'"
+ "></iframe>";
this.update (html);
} else {
var iframe = document.createElement ('iframe');
iframe.id = this.id+"_i";
iframe.src = valeur;
iframe.scrolling = true;
iframe.frameborder = "0";
this.appendChild (iframe);
}
// Appliquer le style css des iframes
$(this.id+"_i").addClassName (this.up(1).cssId + "_iframe");
break;
case 3 :
// mode ajax
var element = this;
new Ajax.Request (valeur, {
method: 'get',
onSuccess: function (transport) {
element.update(transport.responseText);
}
});
break;
case 4 :
// mode calque
this.update ($(valeur).remove ().innerHTML);
break;
default:
this.appendChild (document.createTextNode(valeur));
break;
}
// par défaut, tous les onglets sont invisibles. Utiliser setFocus pour déterminer l'onglet à afficher par défaut.
this.hide ();
// appliquer le style css au calque
this.addClassName (cssId + "_contenu");
}
}
Conclusion :
Je tâcherai de mettre à jour au fur et à mesure des remarques (s'il y en a :p)
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.