tree
の列です。列の見出しを表示し、列の大きさやそのほかの情報を保持しています。列のリサイズのために splitter
要素を列の間におくこともできます。列の位置を正しく処理するために treecol
要素に id
属性を置くべきです。
詳しい情報が XUL チュートリアルにあります。
- 属性
- crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width
- プロパティ
- accessibleType
- スタイルクラス
- treecol-image
例
この例は、最初の列にチェックボックスを表示します (チェックボックスの表示には下のスタイルが必要です)。
<tree flex="1" editable="true"> <treecols> <treecol label="Active" type="checkbox" editable="true"/> <treecol label="Name" 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>
チェックボックスを見せるには、以下のスタイルをスタイルシートに追加する必要があります(treecol.type をご覧ください)。
treechildren::-moz-tree-checkbox(checked){ /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); }
属性
-
crop
- 型: 下記の値のいずれか一つ
- 要素の label に与えられた空間が小さ過ぎるときは、
crop
属性によって指定された側のテキストが切り取られます。テキストが切り取られた場所には省略記号 (ellipsis)が使用されます。ボックスの方向が反対の場合は、切り取られる場所も反対側になります。
start
: テキストは先頭から切り取られます。end
: テキストは末尾から切り取られます。left
: テキストは左側から切り取られます。right
: テキストは右側から切り取られます。center
: テキストの中央が切り取られ、通常、テキストの先頭と末尾が表示されます。none
: テキストは省略記号を使用して切り取られません。しかし、テキストがあまりに長い場合は単純に削除されます。削除する側は CSS の行揃え (text alignment)に依存します。
-
cycler
- 型: 論理型
-
true
の場合、列は cycler column になります。例えば列内のセルをクリックすると、その on と off の状態が交互に切り替わります。これは例えば、メールウィンドウ内でメッセージが既読かどうかをセル内の小さなマークで示すために使用されます。cycler 属性が設定されていないときは、セルは通常のテキストセルになります。
-
dragging
- 型: 論理型
- この属性は column がドラッグされているとき、
true
に設定されます。この属性は自動的に設定されるので変更してはいけません。
-
editable
- 型: 論理型
- column 内のセルの内容を変更できるようにします。特に
type="checkbox"
の場合に役立ちます。ユーザが編集可能なセルをダブルクリックすると、セルの内容を編集するためのテキストフィールドが現れます。
-
hideheader
- 型: 論理型
- tree コラムヘッダをスタイル付けなしで表示するには、この属性を
true
に設定します。コラムにlabel
を設定していないときは、この属性にかかわらず、ヘッダは表示されません。
-
ignoreincolumnpicker
- 型: 論理型
-
true
の場合、column は column ピッカ内に現れません。
-
label
- 型: 文字列型
- 要素上に表示するlabel。 省略された場合、テキストは表示されない。
-
sort
- 型: RDF の述部の URI または XML の属性
- column 内のデータを RDF プロパティや XML の属性をベースに並び替えるには、そのプロパティをこの属性に設定します。プロパティは大抵、そのセルのラベルと同じです。
-
sortActive
- 型: 論理型
- デフォルトで column を並び替えた状態にするには、この属性を
true
に設定しなければなりません。
-
sortDirection
- 型: 下記の値のいずれか一つ
- この属性はテンプレートが生成したコンテンツの並び替え方向を設定します。ソートキーを指定するには
sortResource
属性を使用してください。
ascending
: データは昇順で並び替えられます。descending
: データは降順で並び替えられます。natural
: データは、それが格納された順に並びます。
-
src
- 型: 画像の URL
-
treecol
要素のヘッダに、label
の代わりに使用する画像を設定します。ヘッダ内に画像とラベルの両方を使用することはできません。tree coumn ヘッダに表示する画像の URL を設定してください。この属性がないときは、画像は表示されず、代わりに label が使用されます。画像を表示するtreecol
要素上にはtreecol-image
クラスを使用しなければなりません。tree
上のignoreincolumnpicker
属性およびhidecolumnpicker
属性 が true ではない場合、column ピッカ内で使用されるlabel
を指定しなければなりません。
-
type
- 型: 下記の値のいずれか一つ
- tree column の種類。デフォルトは内容をテキストとして表示するテキストコラムです。
checkbox
: コラムの内容は checkbox です。progressmeter
: コラムの内容は進捗メータです。これは Mozilla のダウンロードマネージャウィンドウで使用されています。text
: コラムの内容はテキストです。
-
width
- 型: 文字列型 (整数型に相当する)
- 優先される tree コラムの幅。すべての値はピクセル単位なので、値に単位を含めてはいけません。列に利用可能なスペースよりも広い幅を指定すると、Gecko が tree を水平スクロールできるようにします。
プロパティ
-
accessibleType
- 型: 整数型
- 要素の accessibility オブジェクトの種類を示す値。
メソッド
XUL 要素からの継承
blur
, click
, doCommand
, focus
, getElementsByAttribute
, getElementsByAttributeNS
DOM 要素からの継承
addEventListener()
, appendChild()
, compareDocumentPosition, dispatchEvent()
, getAttribute()
, getAttributeNode()
, getAttributeNodeNS()
, getAttributeNS()
, getElementsByTagName()
, getElementsByTagNameNS()
, getFeature, getUserData, hasAttribute()
, hasAttributeNS()
, hasAttributes()
, hasChildNodes()
, insertBefore()
, isEqualNode, isSameNode, isSupported()
, lookupNamespaceURI, lookupPrefix, normalize()
, removeAttribute()
, removeAttributeNode()
, removeAttributeNS()
, removeChild()
, removeEventListener()
, replaceChild()
, setAttribute()
, setAttributeNode()
, setAttributeNodeNS()
, setAttributeNS()
, setUserData
スタイルクラス
次のクラスは要素のスタイル付けに使用されます。これらのクラスは、ユーザの選択したテーマに自然に合うようにするため、要素のスタイルを直接変更する代わりに使用されます。
-
treecol-image
- tree column ヘッダ上に画像を表示するには、このクラスを使用します。画像の指定は
src
属性を使用してください。
関連項目
- 要素
- tree, treecols, treechildren, treeitem, treerow, treecell, treeseparator
- インタフェース
- nsIAccessibleProvider