La fonction jsFF.addTree
crée un arbre à partir d'une stucture définie en javascript. Elle prend 6 arguments :
id
(obligatoire) est l'identifiant d'un élément HTML (généralement un DIV) qui contiendra l'arbre.
-
struct
(obligatoire) est un tableau javascript représentant l'arbre à afficher.
Voici exemple de structure attendue par le composant :
var struct = [
{
'id' : 'root_1',
'txt' : 'Racine 1',
'items' : [
{
'id' : 'branch_1',
'txt' : 'Branche 1'
},{
'id' : 'branch_2',
'txt' : 'Branche 2'
}
]
}
];
imgBase
(optionnel) est le répertoire dans lequel le composant va rechercher les images utilisées pour afficher l'arbre.
width
(optionnel) est la largeur en pixels de la structure arborescente.
height
(optionnel) est la largeur en pixels de la structure arborescente.
options
est un objet permettant de personaliser les paramètres de d'affichage et de fonctionnement de la structure arborescente. Les champs valables sont :
generate
: un booléen indiquant s'il faut construire l'arbre dès son initialisation (TRUE par défaut).
imgBase
: le répertoire contenant les images entrant dans la composition de l'arbre.
width
: la largeur de la structure en pixels.
height
: la hauteur de la structure en pixels.
defaultImg
: l'image représentant une page de l'arbre (par défaut page.gif).
defaultImgOpen
: l'image représentant une branche dépliée de l'arbre (par défaut folderopen.gif).
defaultImgClose
: l'image représentant une branche fermée de l'arbre (par défaut folder.gif).
defaultImgSelected
: l'image représentant la page sélectionnée de l'arbre (par défaut page.gif).
defaultImgOpenSelected
: l'image représentant la branche sélectionnée dépliée de l'arbre (par défaut folderopen.gif).
defaultImgCloseSelected
: l'image représentant la branche sélectionnée fermée de l'arbre (par défaut folder.gif).
multiline
: Booléen déterminant si un élement peut s'afficher sur plusieurs lignes (FALSE par défaut).
checkboxes
: Booléen déterminant si les éléments de l'arbre disposent de cases à cocher (FALSE par défaut).
checkboxesThreeState
: Booléen déterminant si les éléments de l'arbre disposent de cases à cocher trois états (FALSE par défaut).
cookies
: Booléen déterminant si l'arbre génère des cookies pour mémoriser son état (VRAI par défaut).
openOneAtOnce
: (FALSE par défaut).
openAtLoad
: (TRUE par défaut).
openAfterAdd
: (TRUE par défaut).
showSelectedBranch
: (TRUE par défaut).
lineStyle
: l'une des chaines de caractères 'line', 'full', 'none' définissant le style des lignes entre les éléments (LINE par défaut).
rtlMode
: (FALSE par défaut).
dropALT
: (TRUE par défaut).
dropCTRL
: (FALSE par défaut).
propagateRestriction
: (TRUE par défaut).
reopenFromServer
: (TRUE par défaut).
behaviourDrop
: l'une des chaines de caractères 'child', 'sibling', 'childcopy', 'siblingcopy' définissant le comportement du drop (CHILD par défaut)
bind
: Tableau d'objets Tree qui pourront sélectionner recevoir des éléments de l'arbre courant par drag'n drop.
bindAsUnidirectional
: Tableau d'objets Tree qui pourront recevoir des éléments de l'arbre courant par drag'n drop.
L'objet options
peut également définir des fonctions de rappel :
onLoad
: onLoad est appelée après l'affichage de l'arbre.
onDebug
: onDebug est appelée après le chargement du contenu.
onCheck
: onCheck est appelée après l'affichage de la fenêtre.
onBeforeCheck
: onBeforeCheck est appelée après le redimensionnement.
onClick
: onClick est appelée après une demande de mise à jour du contenu de la fenêtre.
onDblClick
: onDblClick est appelée après la fermeture de la fenêtre.
onBeforeOpen
: onBeforeOpen est appelée avant la fermeture de la fenêtre.
onMouseOver
: onMouseOver est appelée
onMouseOut
: onMouseOut est appelée
onMouseDown
: onMouseDown est appelée
onMouseUp
: onMouseUp est appelée
onDrop
: onDrop est appelée
onEdit
: onEdit est appelée
onEditAjax
: onEditAjax est appelée
onDropAjax
: onDropAjax est appelée
onOpenPopulate
: onOpenPopulate est appelée
L'Appel suivant
arbre1 = jsFF.addTree('arbre1', struct1, null, null, null, {});
va générer un arbre avec l'ensemble
des éléments par défaut : test des options par défaut..
Ce code plus complexe permet d'activer les fonctions de rappel (tester cet appel.)
jsFF.showMB('<p align="center">
Cliquez sur "Fermer" pour cacher cette fenêtre.<br/></p><hr/><p align="center">
<a href="javascript: jsFF.hideMB();">Fermer</a></p>', {
title: "test des fonctions de rappel",
overlayClose: false,
beforeHide: function() { alert('beforeHide est appelée avant la fermeture.'); },
afterHide: function() { alert('afterHide est appelée après la fermeture.'); },
afterResize: function() { alert('afterResize est appelée après le redimensionnement.'); },
beforeLoad: function() { alert('beforeLoad est appelée avant le chargement du contenu.'); },
afterLoad: function() { alert('afterLoad est appelée après le chargement du contenu.'); },
onShow: function() { alert('onShow est appelée après l\'affichage de la fenêtre.'); },
onUpdate: function() { alert('onUpdate est appelée après une demande de mise à jour du contenu de la fenêtre.'); }
});