begin process at 2012 05 28 11:02:29
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > LIBRAIRIE DHTML COMPATIBLE IE,MOZILLA,NETSCAPE ET OPERA

LIBRAIRIE DHTML COMPATIBLE IE,MOZILLA,NETSCAPE ET OPERA


 Information sur la source

Note :
9,43 / 10 - par 28 personnes
9,43 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Expert Date de création :03/01/2005 Date de mise à jour :10/05/2005 16:30:38 Vu / téléchargé :14 193 / 14 741

Auteur : tguerlus

Ecrire un message privé
Commentaire sur cette source (41)
Ajouter un commentaire et/ou une note

 Description

Cette librairie permet d'obtenir en quelques lignes de codes, toutes sortes de menus tel que: les menus barres ou menus contextuels, ou encore une representation en browser. elle permet aussi de gerer des infos bulles et le drag and drop, enfin tout ce qui peut-être utile pour un interfaçage dynamique de vos applications web.

Cette librairie a été testé sur IE, Mozilla, Netscape et Opera. Elle peut facilement être compléter au niveau compatibilité, puisque les fonctions de bases (dhtml_div.js) sont utilisées
par les divers objets représentant l'interface.

De plus, cette librairie contient un mecanisme de gestion des evenements de l'objet body d'une page internet. Ainsi il est possible, pour un evenement donné sur l'objet body, de lancer l'execution de plusieurs fonctions programmés par vos soin.

Enfin j'ai mis a disposition une classe de debugging, qui permet d'osculter les objets et de voir le contenu des attributs pendant l'execution d'un script. Cette classe m'a été trés utile pour assurer la compatibilité entre les navigateurs.

Vous trouverez dans le zip les fichiers javascript, pour chaque fichier javascript vous trouverez un fichier texte contenant les explications d'utilisations avec des exemples. De plus vous trouverez un fichier default.html qui contient une demonstration de ce que la librairie offre.

Bonne lecture et bonne année


 Conclusion

Je souhaites remercier tous les membres de ce site qui laissent leur sources, car vous ne trouverai rien de bien nouveau dans mes scripts, étant donnée que j'ai pompé la plupart de vos script en selectionnant tout de même les meilleurs.

La seule nouveauté, c'est que tous les scripts se retrouvent au sein d'une librairie et cohabite sans le moindre soucis. De plus, la mise en oeuvre est ainsi faite, que vous pouvez l'incorporer dans vos page avec un mimimun de modification grace notament à l'objet TBodyEvent. Je vous suggere de bien étudier cette classe. Elle est trés utile vous verrez ;-)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

03 janvier 2005 16:04:28 :
Juste un petit tour d'orthographe. Mais il doit en rester plein, c'est pas mon domaine de predilection.
05 janvier 2005 11:54:35 :
vous verrez bien par vous même
13 janvier 2005 16:07:10 :
Ajout de la gestion de l'opacité. Vous trouverez un exemple dans la page default.html. Les doc ont aussi été mises à jours. (Il n'y a que opéra qui ne veut pas en entendre parlé. Tanpis pour lui! La page d'exemple rame un peut , cela vient du fait qu'il y a trop de dhtml dedans. Il ne faut donc pas en abuser.
13 janvier 2005 16:42:54 :
Correction d'un petit bug de rien du tout
14 janvier 2005 11:53:25 :
Ajout d'une nouvelle fonction dans la librairie. Elle permet d'afficher en boucle une série de photos dans une balise IMG (Le gif animée en sorte)
18 janvier 2005 15:53:15 :
1/ Modification du fichier dhtml_div.js. Les fonctions get_x_div et get_y_div sont maintenant capables de retourner les coordonnées absolues x et y de n'importe quelle balise. Qu'elle soit affiché en relatif ou absolue. Ajout de 2 nouvelles fonctions get_x_relatif_div et get_y_relatif_div qui retourne les coordonnées relatives d'une balise. 2/ J'ai enrichie la librairie d'un nouvel objet TScroll qui a pour but d'afficher un contenu de balise en mode scrolling. Le déplacement peut-être automatique ou piloté à la souris. Repportez-vous à la page d'exemple exemple_scroll.html, pour avoir une idée de ce que l'on peut faire avec. 3/ Mise à jours des doc consernées. 4/ Test de non régression réalisé.
21 janvier 2005 10:55:58 :
Mis en place d'un timer qui permet au menu de s'effacer automatiquement si le pointeur n'est plus dessus. Le click de la souris reste. La durée est personnalisable en parametrant l'attribut arbre.ATimer
21 janvier 2005 15:08:55 :
Correction d'un bug sur la classe TBodyEvent. Il y avait une interaction avec les balise input qui empechait la soumission des formulaire.
25 janvier 2005 10:05:04 :
Correction d'un bug concernant la fonction set_style_div. Les noms de classe de style comportant un chiffre n'étaient pas appliquées. 2/ Ajout de 2 attributs supplémentaires dans l'objet TArbre. AStyleFontOver et AStyleFontOut, qui sont des styles qui s'appliquent sur le texte du menu uniquement. Si il ne sont pas définis par vos soin ils ne s'appliquent pas. Cela peut-être utile si votre fichier css défini le style de la balise TD
18 février 2005 14:22:43 :
Mise à jour de certain fichiers.
25 février 2005 11:07:56 :
Description du correctif dans mon dernier commentaire
25 février 2005 14:26:18 :
Correction d'un petit bug suite au modif apporté. rien de grave.
10 mai 2005 16:30:38 :
Correction d'un bug sur les menu popup

 Sources du même auteur

Source avec Zip CALENDRIER COMPATIBLE TOUS PC FACILEMENT CONFIGURABLE À N'IM...
Source avec Zip VALIDATION AUTOMATIQUE DES FORMULAIRES

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking

Commentaires et avis

Commentaire de piousteph le 04/01/2005 09:26:37

Tres joli ...
Mais ne fonctionne pas avec Firefox ...

9/10 quand meme !

Commentaire de tguerlus le 04/01/2005 09:55:59

Si quelqu'un pouvait le tester sur Mac je serais curieux de connaitre le résultat.

Pour la compatibilité, il suffit de reprendre les fichiers dhtml.js , dhtml_div.js ,event_dhtml.js,mouse_dhtml.js,
window_dhtml.js et de rendre compatible les fonctions de ces fichiers pour firefox. On doit avoir dans le fichier dhtml.js une nouvelle variable global FF pour indiquer si le navigateur est FireFox.

Une fois ce travail effectué, tous les objets doivent marcher.

Cette librairie n'est certe pas exaustive au niveau de la compatibilité mais les objets qu'elle comporte repose sur un panel de fonctions de base. Ainsi, il suffit de reprendre chaque fonction de base pour rendre les objets compatibles.

Les fichiers contenant les fonctions de base sont:
dhtml.js
dhtml_div.js
event_dhtml.js
mouse_dhtml.js
window_dhtml.js


Enfin , j'essayerai au file du temps , d'etendre la compatibilité. Mais si une personne est motivée pour completer la librairie je n'y voit aucun inconvenient. Tenais moi au courant.

Merci

Commentaire de tguerlus le 04/01/2005 10:10:26

Je viens de telecharger le navigateur de FireFox appellé Mozilla FireFox 0.9 et il marche très bien. Je dirais même qu'il est tres tres pres de la qualité de IE au niveau des animations et des comportements.

quelle version de firefox utilise tu?

Commentaire de tguerlus le 04/01/2005 16:59:14

J'ai fait le tour des navigateurs que l'on peut trouver sur windows. Résultat, la librairie est compatible avec:
IE
Mozilla
Opera
Netscape
Mozilla FireFox
MYweb4net
Crazy browser
Avant Browser
Maxthon Browser
NetCaptor
SmartExlorer

Commentaire de joffre63 le 04/01/2005 20:01:06

J'avoue que c'est une excellente initiative.
Le regroupage, et non un dégroupage ;-)
Tout rassemblé dans un post.
A part que toute la librairie n'est pas assez détaillée.

Mais l'ensemble est plus que correct.
Bémol ça bug avec maxthon et pourtant.
Pas de péril...

Exemple à suivre...

Commentaire de piousteph le 04/01/2005 20:08:33

J'ai la version 1.0 de FireFox que tu peux telecharger ici :
http://www.mozilla-europe.org/fr/products/firefox/

Bon courage et encore Bravo

Commentaire de WindPowa le 05/01/2005 00:35:56

Exellent !! Super compatible et joli...  et très bien commenté et documenté. Que dire de plus ? 10/10, cela coule de source pour moi !

Commentaire de lumesh le 05/01/2005 09:21:05

Parfait !
Compatible Mozilla 1.6 et 1.7.3 sous Linux
Compatible Epiphany sous Linux (moteur Gecko de Mozilla)
Compatible Konqueror sous Linux (un tantinet lent quand même)

Commentaire de tguerlus le 05/01/2005 10:05:57

joffre63> Puis-je avoir une description du bug sur maxthon

piousteph>merci mais je l'ai trouvé et testé hier, il n'y a aucun problème avec cette version

lumesh>merci d'avoir testé sur des navigateurs tournant sur linux, je n'ai testé que sur windows.
Les nouvelles sont plutôt bonnes.

en résumé:
La librairie a été testé sur:

(window)
IE
Mozilla
Opera
Netscape
Mozilla FireFox
MYweb4net
Crazy browser
Avant Browser
Maxthon Browser
NetCaptor
SmartExlorer

(linux)
Mozilla 1.6 et 1.7.3
Epiphany
Konqueror

(mac) l'inconnu

Commentaire de piousteph le 05/01/2005 11:30:41

tguerlus,

Je suis absolument confus et desole de ma premiere remarque. Effectivement, ca fonctionne avec FireFox 1.0.

De ce fait, je renote (10/10)

Commentaire de BruNews le 05/01/2005 11:44:20 administrateur CS

Gros travail sur le code et un effort sur le Français, que demander de plus.
Avec ceci:
http://brunews.free.fr/brunews/download/Verbeur.zip
tu regarderas comment 'soigner' le dernier mot de ton 'Explication finale' ("verez").

Tres bien et bonne continuation.

Commentaire de meh le 10/01/2005 22:51:25

Ce genre de librairies, c'est vraiment trop pratique. MERCI!

Commentaire de fg85 le 13/01/2005 17:31:06

Très , très , très , très bonne idée !!! Fallait y penser.
Bravo !

--------------------------------------
http://fg.logiciel.free.fr

Commentaire de tontonpolak le 20/01/2005 13:40:03

Très Simpa
je note 9,95/10

Complet ss fioriture

petit hic, mettre un timer sur les menus, si le curseur n'est plus dessus qu'ils se ferment au bout de 2s

bye Tonton

Commentaire de tguerlus le 21/01/2005 10:49:12

Merci tonton pour la note.
J'ai pris en compte ta remarque sur le timer.
Je met en ligne l'évolution.

Commentaire de PerfectSlayer le 24/01/2005 19:25:38

Vraiment un beau travail ! Le tout est bien organisé et bien commenté. C'est rare un travail de ce genre. Ca vaut un beau 10/10 !
En plus, tu me débloques dans l'avancement de mon site (j'utilisais un vieux code donné par microsoft qui était une vieille usine à gaz et qui en plus n'était compatible que sous IE (étonant !!)).
Merci encore à toi, j'vais étudier tout ça de très près donc !

Commentaire de garfield le 27/01/2005 19:34:10

Malheureusement, la librairie n'a pas l'air compatible sous mac :(
Testée sur Safari et Explorer 5 mais je n'obtiens que les 3 panneaux sous fond gris et que je clique n'importe où, rien ne se passe.
Ca fait des mois que je cherche ce type de source pour arriver a centrer un menu...
En tout cas, sur PC, c'est chouette :)

Commentaire de tguerlus le 28/01/2005 09:18:00

Merci garfield pour tes tests. Dommage pour Mac. je sais maintenant ce qu'il me reste à faire.

Commentaire de mousman le 17/02/2005 10:47:26

Bravo !! C 'est un super travail !!! très clean !
Une petite suggestion :
   je n' ai pas trouver d' attribut pour définir la largeur d' une barre de menu (racine) horizontale.
J' en ai crée un.
Ca peut  être pratique.

Merci pour ta sueur.....
   Mousman


Commentaire de tguerlus le 17/02/2005 11:11:58

Il n'y en pas car je l'ai programmé de façon à ce qu'il prenne la largeur de la balise qui le contient. Si tu souhaite une taille bien précise il faut l'inclure dans une balise que tu dimensionne. un <td></td> par exemple ou un <div></div>

Si tu as d'autres question n'hesite pas.
Merci pour les compliments
A+

Commentaire de mousman le 25/02/2005 09:34:08

Merci pour la réponse.
J' ai bossé (un peu) sur le code pour qu' un sou-noeud s' efface  lorsqu 'on passe sur le noeud suivant et qu' il ne contient pas de sous-noeud (hum, j' espère être compréhensible......). En fait j' ai juste ajouté dans la fonction    
    "menuver_mouse_over_corps"  
cette ligne :
if (!noeud.AFeuilles[0])    
     tree.MGetNoeud(idmenu).MRefreshMenuVer();

Est-ce que tu aurais des suggestions pour faire en sorte que le treeview s' affiche non "déroulé" au départ et que le déroulement d' un noeud ferme les autres noeuds de même niveau ?

Merci encore pour ce travail ( qui aura encore besoin de flash pour un menu ??)
    Mousman

Commentaire de tguerlus le 25/02/2005 11:06:28

Bonjour mousman,

Reponse à la quetion 1:

Voici le détail du constructeur de la classe TNoeud
- TNoeud(idNoeud, valeur, img, action, is_open, objet)
Le parametre is_open qui est optionnel permet de désigner si le noeud doit se présenter ouvert ou non pour le premier affichage. Donc à l'initialisation tu précise si tu veux des noeuds ouvert (true valeur par defaut) ou fermé (false) meme au niveau de la creation de la racine.

Le parametre objet qui est aussi optionnel permet de stocker un objet quelconque au niveau du noeud.
On peut donc stocker de façon hierarchique, des informations plus complexes que du texte et leur faire executer des actions de la façon suivante:
arbre.MGetNoeud(idnoeud).AObject.methode();

Reponse à la question 2:

Je joins un correctif sur le fichier TreeView.js
Maintenant tu as à t'as disposition l'attribut ATypeAnim de l'objet arbre qui permet d'avoir le comportement que tu désirais si tu l'initialise à 1 sinon le comportement est celui déjà en place.
ex:
var arbre = new TArbre("arbre");
arbre.ATypeAnim = 1;
...

Bon courage A+
TG

Commentaire de mousman le 25/02/2005 14:41:48

Terrible !!
Merci TG.

a+
   Mousman

Commentaire de Wolfantag le 02/03/2005 03:13:48

Salut,

J'essaye de rajouter un lien avec un menu verticale. Que mon menu serve bien a quelque chose et je n'y arrive pas du tout !

Si vous pouviez m'aider svp :)

Commentaire de Wolfantag le 02/03/2005 03:30:33

Au cas où qu'un boulay comme moi se pose la meme question :

(trop content c'était mon dernier test lol et ca marche !)


arbre.MAddNoeud("F20", new TNoeud("F213", "Espace = 50", "IncClient/images/Fichier.gif","window.location.href='page2.htm'"));

Voici l'exemple testé sous ie6 et firefox1.0

Commentaire de tguerlus le 02/03/2005 09:47:43

Petite precision: Le parametre action de la méthode MAddNoeud est une chaine caracteres qui doit être du code javascript. Il est directement evalué avec la fonction eval(). Il faut donc penser en terme de fonction javascript. Attention tout de même aux guillemets qui doivent être remplacer par des apostrofes dans la chaine. Le mieux pour les opérations complexes étant encore de définir sa propre fonction et de l'appelé dans le parametre action
ex:
function lien(myurl) {
    // on peut imaginer tout un traitement de statistiques.
    ....
    // et finir par lancer l'appel à la page
   window.location.href = myurl;
}

arbre.MAddNoeud("F20", new TNoeud("F213", "Espace = 50", "IncClient/images/Fichier.gif","lien('page2.htm')"));

Commentaire de mousman le 09/03/2005 17:07:52

Salut TG,
j' ai un soucis :
Après avoir instancié mon arbre
     var arbre = new TArbre("arbre");
et défini le type d'animation
     arbre.ATypeAnim = 1;
puis défini l' attribut is_open de chaque noeud à false,
et demander l' affichage sours forme browser
le menu s'affiche complètement déroulé.
HELP !!

Merci pour ton travail,
     Mousman.

Commentaire de tguerlus le 14/03/2005 10:24:40

Bonjour mousman,

J'ai mis un peu de temps à te répondre car j'étais en vacances. Pour moi il n'y a aucun problème. Voici le code que j'utilise:
var arbre2 = new TArbre("arbre2");
arbre2.ATypeAnim = 1;
  
arbre2.MAddNoeud(null, new TNoeud("F0", "root", "IncClient/images/Reseau.gif",null,false));
arbre2.MAddNoeud("F0", new TNoeud("F1", "F1", "IncClient/images/Poste.gif",null,false));
...

Je crois que tu ne met pas le parametre ou il faut. Il doit être dans le constructeur du noeud

A+

Commentaire de mousman le 21/03/2005 14:44:52

Effectivement !!!!!
Je reviens aussi tout juste de vacances.
Ca m' a décollé les yeux :-)

A+
    Mousman

Commentaire de Virtuo le 04/05/2005 15:23:44

Bravo :)
j'ai regardé vite fait et de ce que j'ai vu, c'est propre :), bien documenté  et en français 8) , compatible multi navigateurs :D X) et c'est complet !
Chapo !
Virtuo

Commentaire de foulque le 09/05/2005 15:04:45

Absolument époustouflant !! 10/10

Enfin j'arrête de tripatouiller des codes JS lourd et illisibles.

Une question: j'utilise le menu contextuel, quand je clique droit, il s'ouvre bien, je reclique du gauche autre part et il se ferme, mais se réouvre automatiquement aussitôt. Si je reclique il se referme et reste fermé une idée ?

J'ai essayé avec IE 6 et Firefox 1.0...

Commentaire de tguerlus le 09/05/2005 16:14:01

Effectivement, c'est bizarre car je n'avais pas ça auparavant . Je pense qu'il y a eu regression avec la correction d'un autre problème. Je vais me pencher dessus et te tiendrais au courant. Sinon je voulais te mettre en garde au sujet de ces menus contextuels car il existe un navigateur pour lequel il ne marche pas, c'est opéra qui refuse que l'on surcharge l'evenement contextmenu.

Cordialement
TG

Commentaire de foulque le 10/05/2005 08:47:28

Merci d'être aussi réactif!

En fait c'est une appli pour une petite (vraiment petite) entreprise, donc j'ai pas de problèmes de navigateurs....

Commentaire de tguerlus le 10/05/2005 16:36:35

Salut foulque,

Je viens de mettre en ligne le correctif concernant l'anomalie que tu m'as signalé. Il n'y a plus de problème avec les menus popup, ils réagissent comme il faut.
C'est bien ce que je pensé, une régression du à l'ajout d'un timer suggeré par tontonpolak (cf les commentaires). Comme tous les menu sont liés j'aurai du être plus rigoureux sur les tests. Ca m'apprendra ;-)

Commentaire de foulque le 10/05/2005 20:01:26

C'est génial merci, je teste ça demain !!

Commentaire de spoofix le 16/06/2005 10:00:36

Salut,
Plutot bien faite cette bibliotheque !
Il y a juste un problème : si on met un DOCTYPE dans la page HTML (par exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">), les sous menus de la menubar prennent toute la largeur !
Ce qui n'est pas très pratique (un doctype est indispensable).

Commentaire de GoldPegasus le 27/07/2005 17:33:23

C'est colossale ce que tu as fait je n'est qu'un seul mot qui me vient en tête "magnifique" c'est un petit SDK pour le web. Encore bravo pour ta librairie.

Commentaire de philippe59 le 20/08/2005 15:35:16

Bonjour tout le monde et bravo pour ce travail !!
Etant novice dans ce domaine, je me demandais s'il était possible de ne garder que le menu style "Mac os" ? Je ne vois pas vraiment comment je peux faire :-/
Merci pour votre aide et encore félicitations à tguerlus ;o)

Commentaire de johann1 le 12/01/2006 21:32:24

Salut Tguerlus,
Je pensais avoir déjà quelques connaissances en JS... mais depuis la découverte de ce travail, je constate que je ferais bien de retourner dans mes bouquins! lol
Je viens de me faire une de ces migraines dans tes explications, certes bien faites, comme le précisent tes collègues experts, mais ô combien complexes...lorsqu'on en connait pas assez!
J'ai néanmoins décidé d'éplucher tout cela, car je rêve déjà de ce superbe menu Mac! Il est vraiment fabuleux! C'est dommage, que le père noêl soit déjà passé ... lol
Eh ben, 10 sur 10 bien-sûr! Félicitations!

Johann*

Commentaire de ifebo le 23/12/2006 07:40:11

Bonjour.
Pas moyen de mettre 11, alors je ne mets que 10 ;-)

Commentaire de max35 le 08/01/2009 14:52:39 9/10

Salut,

Ce serait possible de revoir un peu le système qui bug avec les doctypes ? (Par exemple les scrolls ne fonction pas sous FF si il y a un doctype :( )

Merci. ;)

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,685 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales