Accueil > > > TREEVIEW TAFELTREE
TREEVIEW TAFELTREE
Information sur la source
Description
Après moult recherches sur le web, je n'ai pas trouvé de treeview opensource et gratuit pouvant faire tout ce dont j'avais envie. J'ai donc développé ce petit arbre bien sympa, avec une bonne grosse poignée d'options diverses et variées, comme le drag&drop, les checkbox, les événements, etc. Il est basé sur la librairie de Script Aculous (http://script.aculo.us). C'est une superbe librairie JS avec moults effets, drag&drop et j'en passe. Voici une petite liste non-exhaustive des possibilités (pour tout voir, il vaut mieux aller sur le site : http://tafel.developpez.com/ - gestion complète du clavier (ctrl+x et compagnie, navigation, etc) - RTL mode (affichage de droite à gauche) - création de l'arbre avec JSON ou avec des simples UL - LI - plusieurs arbres sur la même page - drag&drop (dans l'arbre ou entre plusieurs arbres) - checkboxes (à 2 ou 3 états) - édition du texte - ouverture d'une seule branche à la fois - possibilité de mettre ses propres paramètres pour les branches - gestion des événements (onclick, ondblclick, onmouseover, onmouseout, onload, onedit, et j'en passe) - drag&drop ajax (voir la doc pour plus d'info) - copy-drag - insertion de branches où on veut dans l'arbre avec insertBefore(), insertAfter(), insertIntoFirst() et insertIntoLast() - multi-ligne - branche "HTMLisable" à souhait - et encore bien d'autres choses Pour voir toute la doc, allez faire un tour sur le site : http://tafel.developpez.com/
Source
- <script type="text/javascript">
- // Cette fonction est automatiquement appelée au chargement de la page
- function TafelTreeInit() {
- // L'item dont l'id vaut "specialOpen" n'a pas d'enfants. Au moment de cliquer dessus,
- // c'est le serveur qui donnera les informations concernant les enfants
- var struct = [
- {
- 'id':'root1',
- 'txt':'Element racine',
- 'img':'page.gif', // Image s'il n'a pas d'enfants
- 'imgopen':'folderopen.gif', // Image s'il a des enfants et qu'il est ouvert
- 'imgclose':'folder.gif', // Image s'il a des enfants et qu'il est fermé
- 'items':[
- {
- 'id':'child1',
- 'txt':'Un enfant',
- 'img':'page.gif',
- 'tooltip':'Un petit tooltip sympa',
- },
- {
- 'id':'specialOpen',
- 'txt':'Les enfants sont sur le serveur',
- 'img':'page.gif',
- 'imgopen':'folderopen.gif',
- 'imgclose':'folder.gif',
- 'canhavechildren':true,
- 'onopenpopulate':function(branch, response){ return true;},
- 'openlink':'scripts/open.php'
- }
- ]
- }
- ];
- var tree = new TafelTree('test2', struct, {
- 'generate' : true,
- 'imgBase' : 'tree/imgs/',
- 'width' : '100%',
- 'height' : 'auto',
- 'defaultImg' : 'page.gif',
- 'defaultImgOpen' : 'folderopen.gif',
- 'defaultImgClose' : 'folder.gif'
- });
- }
- </script>
- <div id="test2"></div>
<script type="text/javascript">
// Cette fonction est automatiquement appelée au chargement de la page
function TafelTreeInit() {
// L'item dont l'id vaut "specialOpen" n'a pas d'enfants. Au moment de cliquer dessus,
// c'est le serveur qui donnera les informations concernant les enfants
var struct = [
{
'id':'root1',
'txt':'Element racine',
'img':'page.gif', // Image s'il n'a pas d'enfants
'imgopen':'folderopen.gif', // Image s'il a des enfants et qu'il est ouvert
'imgclose':'folder.gif', // Image s'il a des enfants et qu'il est fermé
'items':[
{
'id':'child1',
'txt':'Un enfant',
'img':'page.gif',
'tooltip':'Un petit tooltip sympa',
},
{
'id':'specialOpen',
'txt':'Les enfants sont sur le serveur',
'img':'page.gif',
'imgopen':'folderopen.gif',
'imgclose':'folder.gif',
'canhavechildren':true,
'onopenpopulate':function(branch, response){ return true;},
'openlink':'scripts/open.php'
}
]
}
];
var tree = new TafelTree('test2', struct, {
'generate' : true,
'imgBase' : 'tree/imgs/',
'width' : '100%',
'height' : 'auto',
'defaultImg' : 'page.gif',
'defaultImgOpen' : 'folderopen.gif',
'defaultImgClose' : 'folder.gif'
});
}
</script>
<div id="test2"></div>
Conclusion
A disposition, il y a de la documentation en français et en anglais. Le site comporte également des exemples et un forum, pour celles et ceusses qui auraient des questions.
L'arbre est compatible IE, firefox (pc, mac, linux), Safari, Opera et Konqueror.
Pour plus de doc, allez voir l'adresse : http://tafel.developpez.com/
Historique
- 21 août 2006 13:43:50 :
- J'ai oublié de spécifier que, bien entendu, l'arbre est compatible IE, firefox (pc, mac, linux), Safari.
- 21 août 2006 13:52:38 :
- Il est compatible Opera, aussi, j'ai oublié de le dire
- 22 août 2006 10:07:43 :
- Précision des sources. Et c'est compatible Konqueror !
- 26 août 2006 17:59:06 :
- Ajout de la fonctionnalité "last" et y'avait un bug avec Toncheck et Tonbeforecheck lors de la création ul-li
- 28 août 2006 14:38:07 :
- Corrections de bugs, ajout de quelques tests unitaires
- 30 août 2006 09:23:20 :
- Ajout de la fonctionnalité " onopenpopulate " et de ses dérivés (setOnOpenPopulate, openlink et canhavechildren)
- 31 août 2006 14:12:19 :
- Ajout des méthodes monTree.serialize() et maBranche.serialize() qui retourne une string JSON parsable ensuite en PHP, par exemple.
Correction d'un bug concernant les icônes des racines
- 01 septembre 2006 14:08:54 :
- Ajout de la fonctionnalité " tooltip ". De plus, j'ai rajouté branch.getText(), getIcon(), getOpenIcon(), getCloseIcon(), getCurrentIcon, setIcons(), setText() et getChildren()
- 01 septembre 2006 17:31:20 :
- Corrections de bugs
- 08 septembre 2006 11:53:52 :
- Ajout de plusieurs fonctions (getLevel(), removeChildren(), changeId(), setOnEditAjax(), etc.)
Corrections de bugs (cookies)
- 25 septembre 2006 11:33:21 :
- On peut maintenant faire des drag&drop "as sibling", ajout de la fonction moveBefore() et gestion du paramètre "option" dans le constructeur
- 23 octobre 2006 13:19:03 :
- Gestion du clavier, copydrag, gestion d'erreurs ajax, corrections de bugs
- 27 novembre 2006 10:23:32 :
- Mise à jour du site, documentation en anglais, corrections de bug.
http://tafel.developpez.com/
- 11 décembre 2006 10:34:09 :
- RTL mode, onmousedown et up, images transparentes
- 03 janvier 2007 09:40:30 :
- fonctions getParent(), getParents(), getAncestor(), isVisible() et corrections de bugs
- 20 janvier 2007 01:01:36 :
- Corrections de bug, désactivation de checkboxes, switchWith() et replace(), modif de clone(), optimisation de getBranchById()
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
Menu "tree" sans frame (tres important: menu reste ouvert et highkighté ou en gras apres avoir cliqué sur un lien) [ par simriv123 ]
Bonjour, le titre est asser long, mais il dit ce qu'il dit.j'ai cherché un peu sur le site mais je n'ai pas trouvé ce que je cherchais.Ce que je désir
Ajax et Send [ par syndrael ]
Bonjour, J'ai un souci avec Ajax et IE. Mon code fonctionne très bien sous Firefox. Voila le problème: J'ai un menu déroulant qui fait
tree menu listant le contenu d'un dossier [ par tony27 ]
Hello ! Est-il possible de creer une arborescence d'un dossier qui se trouvent sur un hdd, mais de pouvoir l'inclure dans une page html donc pour un
ExtJs et menu contextuel [ par Carboo ]
Bonjour,Voila j'aimerai créer un menu contextuel avec le frameworks Extjs que je souhaite integrer a un Tree (source du tree : http://extjs.com/deploy
Ajax, un défit entre javascript et php ? [ par abcdiscussion ]
Bonjour, j'ai un petit soucis, puisque je n'arrive pas à créer une partie de mon formulaire, sûrement toute bête en AJAX, je m'explique : Le but de ce
menu horizontal/vertical sous ajax/php/mysql [ par thibill ]
Salut à tous et toutes, Est-ce qu'il y a qq'un qui a déjà fabriqué un menu horizontal 3 niveaux permettant de tirer les données du menu directement d
Menu Déroulant Ajax [ par Catalarem ]
Alors ben tout d'abord un grand merci à cette fabuleuse communauté qui je le sens (depuis que je me suis enfin convaincu moi même que le bon vieux HTM
menu déroulant [ par metaleurop ]
Bonjour à tous.J'ai un petit problème avec le menu déroulant suivant:<html> <title>liste déroulante dynamique</title> <head> &
Menu ouvrable et réductible [ par infoplus22 ]
Bonjour,Je suis entrein d'adapter un code que j'ai trouvé sur codes-sources pour faire un menu qui convient à ce que je veux. Le code que j'ai trouvé
menu vertical [ par chlock ]
Boncjour, je crée un site web et j'ai créé un menu vertical avec tout le tra la la (include pied de page, entete, et quand je selectionne dans mon men
|
Derniers Blogs
[SHAREPOINT 2010] CRéER ET PACKAGER UNE APPLICATION SILVERLIGHT POUR SHAREPOINT 2010[SHAREPOINT 2010] CRéER ET PACKAGER UNE APPLICATION SILVERLIGHT POUR SHAREPOINT 2010 par neodante
L'intégration native de Silverlight dans SharePoint 2010 représente une avancée majeure dans la conception des applications sur la plateforme SharePoint. Et pour cause, Silverlight repousse les limites du Web de SharePoint en offrant une expérience plus r...
Cliquez pour lire la suite de l'article par neodante [MIX10] KEYNOTE PREMIèRE JOURNéE - WINDOWS PHONE 7 ET SILVERLIGHT 4[MIX10] KEYNOTE PREMIèRE JOURNéE - WINDOWS PHONE 7 ET SILVERLIGHT 4 par cyril
Comme l'année dernière, me revoici à Las Vegas pour Mix10. Ce matin a eu lieu le premier keynote animé par Scott Guthrie. Le keynote s'est déroulé en 2 parties : Silverlight 4.0 et Windows Phone 7 Silverlight 4.0 Le taux de pénétration de Silverli...
Cliquez pour lire la suite de l'article par cyril [MIX10] RELEASE CANDIDATE DE SILVERLIGHT 4 ET RIA SERVICES[MIX10] RELEASE CANDIDATE DE SILVERLIGHT 4 ET RIA SERVICES par Audrey
C'est enfin officiel, grâce au MIX 2010, les Release Candidate de Silverlight 4 et de RIA Services sont sorties ! Pour les télécharger, voici les liens : Silverlight 4 RC : http://silverlight.net/getstarted/silverlight-4/ RIA Services RC : http://www.micr...
Cliquez pour lire la suite de l'article par Audrey PREMIERES IMPRESSIONS SUR WINDOWS PHONE 7PREMIERES IMPRESSIONS SUR WINDOWS PHONE 7 par odewit
Il est toujours passionnant de decouvrir une nouvelle plate-forme. C'est bien entendu le cas pour Windows Phone 7. Mais au-dela de la passion technique, j'ai le sentiment qu'il s'agit d'un coup de maitre en termes d'ergonomie (tres fluide et epuree) e...
Cliquez pour lire la suite de l'article par odewit [WINDOWSPHONE7] LECTEUR DE FLUX RSS[WINDOWSPHONE7] LECTEUR DE FLUX RSS par Vko
Parce que j'aime pas tester à moitié, je me suis amusé à développer un petit lecteur de flux RSS avec un look qui vous rappellera surement quelque chose :) La RC de Visual Studio est plutôt molle mais fonctionne correctement. L'émulateur est pas...
Cliquez pour lire la suite de l'article par Vko
Logiciels
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 Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
|