Accueil > > > ONGLETS REPOSANT SUR DES DIV ET DU CSS
ONGLETS REPOSANT SUR DES DIV ET DU CSS
Information sur la source
Description
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
- /*
- * 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");
-
- }
- }
/*
* 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)
Historique
- 03 juillet 2007 12:56:19 :
- - Orthographe -
- 03 juillet 2007 13:59:34 :
- Remplacement des pages php par des pages html, puisqu'elles ne contenaient aucune code php. On doit appeler ça le réflexe du développeur PHP ;)
Au passage léger embellissement du css par défaut.
- 23 juillet 2007 21:20:55 :
- ## MAJ 23/07/2007 ##
- ajout de la méthode addOngletCalque (titre_de_l_onglet, id_du_calque_a_copier) : elle permet de "mettre en onglet" un calqué déjà existant sur la page HTML. Le principal intérêt est que l'on peut gérer deux types d'affichage selon que javascript soit activé ou pas. Si javascript est activé, le contenu des calques de la page que vous souhaitez mettre en onglet est transferré dans un onglet. Si javascript est désactivé, les calques vont se succéder normalement les uns derrière les autres. Vous pouvez bien sur mixer avec les autres types d'ajout d'onglet déjà existant (HTML, Texte, Ajax, URL), ces derniers n'étant visibles que si javascript est activé. Cf index2.html du nouveau zip pour un exemple basique.
Sources de la même categorie
MENU VERTICALE GAUCHE ET DROIT DEROULANTMENU VERTICALE GAUCHE ET DROIT DEROULANTc'est repris d'une de mes source (menu glissant) sauf que au lieu de deplacer un element dans le document c'est un div en overflow hidden qui s'agrand...
par kazma
MENU VERTICALE EN TRANSPARENCEMENU VERTICALE EN TRANSPARENCECe menu est complètement modifiable, les fenêtres de sous menus étant composées de plusieur images, vous pouvez modifier la taille des sous menus en...
par dlvains
MENU DÉROULANT EN IMAGESMENU DÉROULANT EN IMAGES un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pe...
par dlvains
TBFRAME: TAB BROWSING FRAMETBFRAME: TAB BROWSING FRAME Cela fait un moment que j'avais eu l'idée de mettre en ligne ce script, mais je n'avais jamais eu le temps de mettre un coup de propre dans le code ai...
par triumphs
MENU PRINCIPALMENU PRINCIPALBonjour, dans ce petit source, j'ai met une belle menu avec php,javascript, css, pour me contactet , ABOUSSEBABA ALI <contact@aliwebmaster.com>, à vou...
par ali1987
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
creer des onglet sans utiliser css [ par amaila ]
boujour à tous.je veux faire ajouter des onglets en javascript sans uitliser CSS.est il possible?si oui vous pouvez m'aider de trouver des exemples si
Afficher texte avec X et Y [ par bshaka ]
Bonjour à tous,j'ai trouvé sur le web cette fonction qui affiche date et heure à une position x et y, pour l'appeler, je fais :InitHorloge(265,56,"fon
CSS : Bug de positionnement ie6 [ par leejunfan ]
Bonjour, j'ai un petit soucis avec ie6 que je dois pourtant certifier (le site s'affiche bien dans ie7 et firefox)Voila mon problème :J'ai une page di
probleme avec le plugin facebox de jquery [ par aquewel ]
bonjour a tous, c'est la premiere fois que je viens demander de l'aide sur ce forum... et pour la premiere un probleme serieux dans lequel peut etre q
prototype.js --> bindAsEventListener [ par alexflex25 ]
var obj = { name: 'A nice demo' };function handler(e)<
alias de méthode [ par sapakus ]
Bonjour,1°) je tente de réduire un code trop imposant2°) je suis une bille en pooMon idée est de créer des "synonymes" de méthodes utilisées de manièr
CSS débloque totalement sur saisie de onmousemove avec IE7 [ par adoxe ]
En fait, toute version de IE débloque...pour comprendre, comparer http://fccf.x10hosting.com/ avec Firefox et MSIE...Tout roule perfecto avec Firefox.
nouvelle fenêtre / nouvelle onglet [ par inaden ]
Bonjour,existe-t-il un moyen de différencier et/ou de forcer l'ouverture en nouvelle fenêtre lorsqu'un navigateur ouvre a priori une nouvelle fenêtre
Le drag n drop de PROTOTYPE ne fonction pas sous IE : Voici la solution [ par banbanfr ]
Bonjour à tous,après plusieurs heures de combat acharné contre le fameux IE (que j'adore) et bien j'ai enfin réussi à trouvé une solution, du moins j'
demande d'aide sur une découpe CSS [ par chabgyver ]
Bonjour,Je suis en train de travailler à la création d'un site : http://balistiq.free.fr/0000/J'ai fais le design mais j'avoue ne pas être super à l'a
|
Derniers Blogs
L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE?COMMENT MAPPER UNE VUE SQL SUR UNE COLLECTION DE COMPLEX TYPE? par Matthieu MEZIL
Avec EF, les vues doivent être mappées sur des entity types. Le problème c'est que les entity types doivent avoir une clé. Avec EF, nous avons les complex type qui n'ont pas de clé mais les vues ne peuvent pas être mappées dessus. Avec EF4, il est possibl...
Cliquez pour lire la suite de l'article par Matthieu MEZIL [WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL?[WF4] UN BINDING ACTIVITY/ACTIVITYDESIGNER QUI PASSE MAL? par JeremyJeanson
Certain d'entre vous on peut être vécu cette situation embarrassante après quelques temps passer avec WF4 : Au début avec mon " ActivityDesigner" , tout allait bien. Et puis un jour j'ai au des problèmes de " Binding" . Alors nous sommes allé sur le site ...
Cliquez pour lire la suite de l'article par JeremyJeanson
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|