Génération de Treeview (Javascript)
Treeview basé sur la libraire Script Aculous
Treeview - Accueil
Comment commencer ?
C'est très simple, procédons donc pas-à-pas. D'abord, on inclu tous les fichiers nécessaires Javascript et CSS entre les balises <head></head>
<link rel="stylesheet" type="text/css" href="css/tree.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="Tree.js"></script>
La CSS est celle contenue dans le dossier CSS du zip. Quand au scripts JS, il faut savoir qu'il est basé sur la librairie de Script Aculous. Il faut donc intégrer la librairie prototype.js ainsi que scriptaculous.js. Toutes les deux sont contenues dans le dossier JS. Mais si tu as déjà script aculous quelque part, tu n'es pas obligé de le remettre.
La dernière librairie, c'est Tree.js. C'est le corps du programme.
Créer un arbre
Voici donc comment créer un arbre très simple
<script type="text/javascript">
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'
}
]
}
];
var tree = new TafelTree('test2', struct, 'tree/imgs/', '100%', 'auto');
tree.generate();
</script>
OpenOffice Generation PHP + Treeview JS
Le 26 août 2006, Tafel. Optimisé pour Mozilla Firefox