--- title: treecol slug: Archive/Mozilla/XUL/treecol tags: - Éléments_XUL translation_of: Archive/Mozilla/XUL/treecol ---

« Accueil de la référence XUL [ Exemples | Attributs | Propriétés | Méthodes | Sujets liés ]

Une colonne dans un élément tree. Cet élément affiche l'en-tête de colonne et conserve la taille et d'autres informations sur la colonne. VOus pouvez également placer des éléments splitter entre les colonnes pour permettre leur redimensionnement. Placez toujours un attribut id sur un élément treecol pour vous assurer que son positionnement sera géré correctement.

Vous trouverez plus d'informations dans le Tutoriel XUL.

Attributs: crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width

Propriétés: accessibleType

Classes de style: treecol-image

Exemples

Cet exemple montre une case à cocher dans la première colonne, et utilise le style présenté plus bas.

<tree flex="1">

  <treecols>
    <treecol label="Actif" type="checkbox" editable="true"/>
    <treecol label="Nom" flex="1" />
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
      	<treecell value="true"/>
        <treecell label="Alice"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell value="false"/>
        <treecell label="Bob"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

Pour rendre la case à cocher visible sur certaines plateformes, les styles suivants doivent être ajoutés à la feuille de style (voir treecol.type). Dans Firefox 2.x et 3.x, tous les systèmes autres que Mac OS X utilisent déjà ces styles par défaut. Si vous visez Firefox sous Mac OS X, assurez-vous d'utiliser ces styles tout en fournissant votre propre image de case à cocher. Notez que chrome://global/skin/checkbox/cbox-check.gif est disponible dans SeaMonkey sous Mac OS X.

treechildren::-moz-tree-checkbox {
  /* cases à cocher non cochées dans des treecells. Ce style DOIT être avant treechildren::-moz-tree-checkbox(checked), autrement il n'aura aucun effet.  */
  list-style-image: none;
}

treechildren::-moz-tree-checkbox(checked){
  /* style pour les cases cochées. cbox-check.gif n'est pas disponible dans Firefox 1, 2 et 3 sous Mac OS X, vous devrez donc spécifier l'URL d'une image
     dans votre extension ou ailleurs. */
  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
}

Attributs

crop: Type : une des valeurs ci-dessous; Si le label de l'élément est trop long pour être contenu dans son espace donné, le texte sera tronqué du côté indiqué par l'attribut crop. Une ellipse (…) sera utilisée à la place du texte tronqué. Si la direction de la boîte est inversée, le tronquage l'est également.

start : Le texte sera tronqué du côté gauche.
end : Le texte sera tronqué du côté droit.
left : Le texte sera tronqué du côté gauche.
right : Le texte sera tronqué du côté droit.
center : Le texte sera tronqué en son milieu, en affichant le début et la fin normalement.
none : Le texte ne sera pas tronqué avec une ellipse. Cependant il sera simplement coupé là où il est trop large. Le côté dépend de l'alignement CSS.

hidden: Type : booléen; Si défini à true, l'élément n'est pas affiché. Cet attribut est similaire à la valeur « none » de la propriété CSS display.

label: Type : chaîne de caractères; Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra.

sortDirection: Type : une des valeurs ci-dessous; Cet attribut indique la direction dans laquelle le contenu généré par un template est trié. Utilisez l'attribut sortResource pour spécifier la clé de tri.

ascending : les données sont triées dans l'ordre croissant.
descending: les données sont triées dans l'ordre décroissant.
natural : les données sont triées dans l'ordre naturel, ce qui veut dire l'ordre dans lequel elles sont stockées.

Propriétés

accessibleType: Type : entier; Une valeur indiquant le type d'objet d'accessibilité pour l'élément.

Héritées de XUL element
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width

Méthodes

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

Classes de style

La classe suivante peut être utilisée pour styler l'élément. Cette classe doit être utilisée plutôt que de changer le style de l'élément directement, car elle s'adaptera plus naturellement au thème sélectionné par l'utilisateur.

treecol-image: Use this class to have an image appear on the tree column header. Specify the image using the src attribute.

Sujets liés

Éléments: tree, treecols, treechildren, treeitem, treerow, treecell et treeseparator.
Interfaces: nsIAccessibleProvider