1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
|
---
title: treecol
slug: Archive/Mozilla/XUL/treecol
tags:
- Éléments_XUL
translation_of: Archive/Mozilla/XUL/treecol
---
<div class="noinclude"><span class="breadcrumbs XULRef_breadcrumbs">
« <a href="/fr/docs/Référence_XUL">Accueil de la référence XUL</a> [
<a href="#Exemples">Exemples</a> |
<a href="#Attributs">Attributs</a> |
<a href="#Propri.C3.A9t.C3.A9s">Propriétés</a> |
<a href="#M.C3.A9thodes">Méthodes</a> |
<a href="#Sujets_li.C3.A9s">Sujets liés</a> ]
</span></div> <p>Une colonne dans un élément <code><a href="/fr/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code>. 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 <code><a href="/fr/docs/Mozilla/Tech/XUL/splitter" title="splitter">splitter</a></code> entre les colonnes pour permettre leur redimensionnement. Placez toujours un attribut <code id="a-id"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/id">id</a></code> sur un élément <code>treecol</code> pour vous assurer que son positionnement sera géré correctement.
</p><p>Vous trouverez plus d'informations dans le <a href="fr/Tutoriel_XUL/Arbres">Tutoriel XUL</a>.
</p>
<dl><dt> Attributs
</dt><dd> <a href="#a-crop">crop</a>, <a href="#a-cycler">cycler</a>, <a href="#a-dragging">dragging</a>, <a href="#a-treecol.editable">editable</a>, <a href="#a-fixed">fixed</a>, <a href="#a-hidden">hidden</a>, <a href="#a-hideheader">hideheader</a>, <a href="#a-ignoreincolumnpicker">ignoreincolumnpicker</a>, <a href="#a-label">label</a>, <a href="#a-primary">primary</a>, <a href="#a-sort">sort</a>, <a href="#a-sortActive">sortActive</a>, <a href="#a-sortDirection">sortDirection</a>, <a href="#a-treecol.src">src</a>, <a href="#a-treecol.type">type</a>, <a href="#a-treecol.width">width</a>
</dd></dl>
<dl><dt> Propriétés
</dt><dd> <a href="#p-accessibleType">accessibleType</a>
</dd></dl>
<dl><dt> Classes de style
</dt><dd> <a href="#s-treecol-image">treecol-image</a>
</dd></dl>
<h3 id="Exemples" name="Exemples"> Exemples </h3>
<div class="float-right"><img alt="Image:Xul_tree_col_checked.png"></div>
<p>Cet exemple montre une case à cocher dans la première colonne, et utilise le style présenté plus bas.
</p>
<pre><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>
</pre>
<p>Pour rendre la case à cocher visible sur certaines plateformes, les styles suivants doivent être ajoutés à la feuille de style (voir <a href="fr/XUL/Attribute/treecol.type">treecol.type</a>). 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 <code><a class=" external" rel="freelink">chrome://global/skin/checkbox/cbox-check.gif</a></code> <i>est</i> disponible dans SeaMonkey sous Mac OS X.
</p>
<pre>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");
}
</pre>
<h3 id="Attributs" name="Attributs"> Attributs </h3>
<p>
</p><div id="a-crop">
<dl><dt> <code id="a-crop"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/crop">crop</a></code>
</dt><dd> Type : <i>une des valeurs ci-dessous</i>
</dd><dd> 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 <code>crop</code>. 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.
</dd></dl>
<ul><li> <code>start</code> : Le texte sera tronqué du côté gauche.
</li><li> <code>end</code> : Le texte sera tronqué du côté droit.
</li><li> <code>left</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté gauche.
</li><li> <code>right</code> : <span title="Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner."><i class="icon-thumbs-down-alt"> </i></span> Le texte sera tronqué du côté droit.
</li><li> <code>center</code> : Le texte sera tronqué en son milieu, en affichant le début et la fin normalement.
</li><li> <code>none</code> : 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.
</li></ul>
</div>
<div id="a-cycler">
</div>
<div id="a-dragging">
</div>
<div id="a-treecol.editable">
</div>
<div id="a-fixed">
</div>
<div id="a-hidden">
<dl><dt> <code id="a-hidden"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/hidden">hidden</a></code>
</dt><dd> Type : <i>booléen</i>
</dd><dd> Si défini à <code>true</code>, l'élément n'est pas affiché. Cet attribut est similaire à la valeur « <code>none</code> » de la propriété CSS <code>display</code>.
</dd></dl>
</div>
<div id="a-hideheader">
</div>
<div id="a-ignoreincolumnpicker">
</div>
<div id="a-label">
<dl><dt> <code id="a-label"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/label">label</a></code>
</dt><dd> Type : <i>chaîne de caractères</i>
</dd><dd> Le label qui apparaîtra sur l'élément. S'il n'est pas spécifié, aucun texte n'apparaîtra.
</dd></dl>
</div>
<div id="a-primary">
</div>
<div id="a-sort">
</div>
<div id="a-sortActive">
</div>
<div id="a-sortDirection">
<dl><dt> <code id="a-sortDirection"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/sortDirection">sortDirection</a></code>
</dt><dd> Type : <i>une des valeurs ci-dessous</i>
</dd><dd> Cet attribut indique la direction dans laquelle le contenu généré par un template est trié. Utilisez l'attribut <code id="a-sortResource"><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Attributs/sortResource">sortResource</a></code> pour spécifier la clé de tri.
</dd></dl>
<ul><li> <code>ascending</code> : les données sont triées dans l'ordre croissant.
</li><li> <code>descending</code>: les données sont triées dans l'ordre décroissant.
</li><li> <code>natural</code> : les données sont triées dans l'ordre naturel, ce qui veut dire l'ordre dans lequel elles sont stockées.
</li></ul>
<p><br>
</p>
</div>
<div id="a-treecol.src">
</div>
<div id="a-treecol.type">
</div>
<div id="a-treecol.width">
</div>
<h3 id="Propri.C3.A9t.C3.A9s" name="Propri.C3.A9t.C3.A9s"> Propriétés </h3>
<div id="p-accessibleType">
<dl><dt> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propri%C3%A9t%C3%A9s/accessibleType">accessibleType</a></span></code>
</dt><dd> Type : <i>entier</i>
</dd><dd> Une valeur indiquant le type d'objet d'accessibilité pour l'élément.
</dd></dl>
</div>
<table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Héritées de XUL element</strong><br> <small> <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/align">align</a></span></code>, , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/allowEvents">allowEvents</a></span></code>, , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/boxObject">boxObject</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/builder">builder</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/className">className</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/collapsed">collapsed</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/contextMenu">contextMenu</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/controllers">controllers</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/database">database</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/datasources">datasources</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/dir">dir</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/flex">flex</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/height">height</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/hidden">hidden</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/id">id</a></span></code>, , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/left">left</a></span></code>, , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/maxHeight">maxHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/maxWidth">maxWidth</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/menu">menu</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/minHeight">minHeight</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/minWidth">minWidth</a></span></code>, , , , , , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/observes">observes</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/ordinal">ordinal</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/orient">orient</a></span></code>, , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/pack">pack</a></span></code>, , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/persist">persist</a></span></code>, , , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/ref">ref</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/resource">resource</a></span></code>, , , , , <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/statusText">statusText</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/style">style</a></span></code>, ,, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/tooltip">tooltip</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/tooltipText">tooltipText</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/top">top</a></span></code>, <code><span><a href="https://developer.mozilla.org/fr/docs/XUL/Propriétés/width">width</a></span></code></small></p> </td> </tr> </tbody>
</table>
<h3 id="M.C3.A9thodes" name="M.C3.A9thodes"> Méthodes </h3>
<p><span class="lang lang-fr" lang="fr">
</span></p><table style="border: 1px solid rgb(204, 204, 204); margin: 0px 0px 10px 10px; padding: 0px 10px; background: rgb(238, 238, 238) none repeat scroll 0% 50%;"> <tbody> <tr> <td> <p><strong>Héritées de XUL element</strong><br> <small> <span id="m-blur"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/blur">blur</a></code></span>, <span id="m-click"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/click">click</a></code></span>, <span id="m-doCommand"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/doCommand">doCommand</a></code></span>, <span id="m-focus"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/focus">focus</a></code></span>, <span id="m-getElementsByAttribute"><code><a href="https://developer.mozilla.org/fr/docs/Mozilla/Tech/XUL/Méthodes/getElementsByAttribute">getElementsByAttribute</a></code></span></small></p> <p><strong>Héritées de DOM element</strong><br> <small> <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.addEventListener">addEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.appendChild">appendChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.dispatchEvent">dispatchEvent()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttribute">getAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNode">getAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNodeNS">getAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getAttributeNS">getAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagName">getElementsByTagName()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttribute">hasAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributeNS">hasAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasAttributes">hasAttributes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.hasChildNodes">hasChildNodes()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.insertBefore">insertBefore()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.isSupported">isSupported()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.normalize">normalize()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttribute">removeAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNode">removeAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeAttributeNS">removeAttributeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeChild">removeChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.removeEventListener">removeEventListener()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.replaceChild">replaceChild()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttribute">setAttribute()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNode">setAttributeNode()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNodeNS">setAttributeNodeNS()</a></code>, <code><a href="https://developer.mozilla.org/fr/docs/DOM/element.setAttributeNS">setAttributeNS()</a></code></small></p> </td> </tr> </tbody>
</table>
<h3 id="Classes_de_style" name="Classes_de_style"> Classes de style </h3>
<p>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.
</p><dl>
<dt>
<code><a href="https://developer.mozilla.org/en-US/docs/XUL/Style/treecol-image">treecol-image</a></code></dt>
<dd>
Use this class to have an image appear on the <a href="/en/XUL/treecol" title="en/XUL/treecol">tree column</a> header. Specify the image using the <code id="a-src"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/src">src</a></code> attribute.</dd>
</dl>
<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s"> Sujets liés </h3>
<dl><dt> Éléments
</dt><dd> <a href="fr/XUL/tree">tree</a>, <a href="fr/XUL/treecols">treecols</a>, <a href="fr/XUL/treechildren">treechildren</a>, <a href="fr/XUL/treeitem">treeitem</a>, <a href="fr/XUL/treerow">treerow</a>, <a href="fr/XUL/treecell">treecell</a> et <a href="fr/XUL/treeseparator">treeseparator</a>.
</dd><dt> Interfaces
</dt><dd> <a href="fr/NsIAccessibleProvider">nsIAccessibleProvider</a>
</dd></dl>
<div class="noinclude">
</div>
|
