treecol

par 2 contributeurs :

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

Image:Xul_tree_col_checked.png

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, attributes, allowEvents, baseURI, boxObject, builder, childElementCount, childNodes, children, className, clientHeight, clientLeft, clientTop, clientWidth, collapsed, contextMenu, controllers, database, datasources, dir, firstChild, firstElementChild, flex, height, hidden, id, lastChild, lastElementChild, left, localName, maxHeight, maxWidth, menu, minHeight, minWidth, namespaceURI, nextElementSibling, nextSibling, nodeName, nodeType, nodeValue, observes, ordinal, orient, ownerDocument, pack, parentNode, persist, prefix, previousElementSibling, previousSibling, ref, resource, scrollHeight, scrollLeft, scrollTop, scrollWidth, statusText, style, tagName,textContent, 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

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : lmorchard, BenoitL
Dernière mise à jour par : lmorchard,