treecol

« XUL リファレンス HOME [ 例 | 属性 | プロパティ | メソッド | 関連項目 ]

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" の場合に役立ちます。ユーザが編集可能なセルをダブルクリックすると、セルの内容を編集するためのテキストフィールドが現れます。

これを適切に動作させるには tree も editable でなければなりません。編集できなくするには column 内の個々の treecell 要素を editable="false" にします。

fixed: 型: 論理型; true の場合、tree 内の列のサイズをユーザが調節できなくなります。固定幅で列のサイズを維持する間、splitter がこれらの両側の列をサイズ変更します。false または指定されていない場合、ユーザはコラムヘッダをマウスでドラッグして列のサイズを調節することができます。

hidden: 型: 論理型; true に設定すると、その要素は表示されなくなります。これは CSS の display プロパティを 'none' に設定するのと似ています。

hideheader: 型: 論理型; tree コラムヘッダをスタイル付けなしで表示するには、この属性を true に設定します。コラムに label を設定していないときは、この属性にかかわらず、ヘッダは表示されません。

ignoreincolumnpicker: 型: 論理型; true の場合、column は column ピッカ内に現れません。

label: 型: 文字列型; 要素上に表示するlabel。省略された場合、テキストは表示されない。

primary: 型: 論理型; true に設定した場合、treecol の左側に、その行の階層構造を示すためのインデントと twisties が描画されます。primary 属性が true に設定された列がないときは、tree は入れ子状の行を含みますが、ユーザには何も示されません。

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 要素からの継承
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

メソッド

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 属性を使用してください。

treecol

例

属性

プロパティ

メソッド

スタイルクラス

関連項目

ドキュメントのタグと貢献者