Comment ajouter une image sur un treecell ?

Il existe différentes manières d'ajouter une image dans une cellule d'un arbre. La plus simple consiste simplement à ajouter un attribut src sur un treecell. Une image apparaîtra dans la cellule correspondante. S'il y a un libellé et une image, l'image s'affichera à gauche du libellé.

Voici un exemple d'arbre avec des images :

Voir

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="treeImage" title="Arbres avec des images"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<tree flex="1" width="350" height="200">
  <treecols>
    <treecol id="name" label="Nom" primary="true" flex="1"/>
    <treecol id="emotion" label="Émoticone" flex="1"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Jim Richards"/>
        <treecell label="Gai" src="happy.png"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Mary Sandman"/>
        <treecell label="Gai" src="happy.png"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Lindsey Waters"/>
        <treecell label="Inconnu"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

</window>

La propriété CSS background peut aussi être utilisée pour définir une image dans une cellule, une ligne ou une colonne. Toutefois, vous devez employer une syntaxe spéciale pour les arbres parce que le corps de l'arbre n'est pas construit avec de vrais éléments. Seul l'élément treechildren est affiché et les lignes et cellules sont dessinées par lui.

Tout d'abord, ajoutez l'attribut properties sur la cellule, la ligne ou la colonne sur laquelle vous souhaitez ajouter une image. Définissez lui un nom explicite. Par exemple, si l'image doit apparaître sur une ligne où quelque chose est activé (enabled), vous pouvez nommer la propriété enabled.

<treecell properties="enabled"/>

Ajoutez la propriété sur chaque cellule qui devra afficher l'image. Vous pouvez également ajouter un attribut properties sur un treerow ou un treecol bien qu'il se s'appliquera que pour la ligne ou la colonne entière.

Pour définir le style, utilisez la syntaxe suivante :

treechildren:-moz-tree-cell(enabled) {
  background: url('enabled.png') no-repeat;
}

L'exemple ci-dessus affichera une image de fond sur toutes les cellules activées, ou toutes les cellules avec la propriété enabled. L'expression no-repeat est nécessaire pour éviter que l'image ne se répète dans toute la cellule. Enlevez la si c'est l'effet recherché.

Vous pouvez également remplacer -moz-tree-cell par -moz-tree-row ou -moz-tree-column pour définir des images pour une ligne ou une colonne.