Ja/XUL:treecol からのリダイレクト

treecol

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");
}

属性

XUL 要素からの継承
align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

crop: 型: 下記の値のいずれか一つ; 要素の label に与えられた空間が小さ過ぎるときは、crop 属性によって指定された側のテキストが切り取られます。テキストが切り取られた場所には省略記号 (ellipsis) が使用されます。ボックスの方向が反対の場合は、切り取られる場所も反対側になります。

start: テキストは先頭から切り取られます。
end: テキストは末尾から切り取られます。
left: 非推奨テキストは左側から切り取られます。
right: 非推奨テキストは右側から切り取られます。
center: テキストの中央が切り取られ、通常、テキストの先頭と末尾が表示されます。
none: テキストは省略記号を使用して切り取られません。しかし、テキストがあまりに長い場合は単純に削除されます。削除する側は CSS の行揃え (text alignment) に依存します。

cycler: 型: boolean; true の場合、列は cycler column になります。例えば列内のセルをクリックすると、その on と off の状態が交互に切り替わります。これは例えば、メールウィンドウ内でメッセージが既読かどうかをセル内の小さなマークで示すために使用されます。cycler 属性が設定されていないときは、セルは通常のテキストセルになります。

dragging: 型: boolean; この属性は column がドラッグされているとき、true に設定されます。この属性は自動的に設定されるので変更してはいけません。

editable: 型: boolean; column 内のセルの内容を変更できるようにします。特に type="checkbox" の場合に役立ちます。ユーザが編集可能なセルをダブルクリックすると、セルの内容を編集するためのテキストフィールドが現れます。

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

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

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

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

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

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

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

sort: 型: RDF の述部の URI または XML の属性; column 内のデータを RDF プロパティや XML の属性をベースに並び替えるには、そのプロパティをこの属性に設定します。プロパティは大抵、そのセルのラベルと同じです。

sortActive: 型: boolean; デフォルトで column を並び替えた状態にするには、この属性を true に設定しなければなりません。

sortDirection: 型: 下記の値のいずれか一つ; この属性はテンプレートが生成したコンテンツの並び替え方向を設定します。ソートキーを指定するには sortResource 属性を使用してください。

ascending: データは昇順で並び替えられます。
descending: データは降順で並び替えられます。
natural: データは、それが格納された順に並びます。

src: 型: 画像の URL; treecol 要素のヘッダに、label の代わりに使用する画像を設定します。ヘッダ内に画像とラベルの両方を使用することはできません。tree coumn ヘッダに表示する画像の URL を設定してください。この属性がないときは、画像は表示されず、代わりに label が使用されます。画像を表示する treecol 要素上には treecol-image クラスを使用しなければなりません。tree 上の ignoreincolumnpicker 属性および hidecolumnpicker 属性が true ではない場合、column ピッカ内で使用される label を指定しなければなりません。