Kolumna drzewa (tree
). Wyświetla kolumnę nagłówka i utrzymuje rozmiar oraz inne informacje o kolumnie. Możemy także umieścić element splitter
pomiędzy kolumnami, aby pozwolić na zmianę rozmiaru kolumny. Zawsze powinniśmy umieszczać atrybut id
w elemencie treecol
do zapewnienia, że pozycjonowanie kolumny jest własnością utrzymywaną.
Dodatkowe informacje są dostępne w kursie XUL.
- Atrybuty
- crop, cycler, dragging, fixed, hidden, hideheader, ignorecolumnpicker, label, primary, sort, sortActive, sortDirection, src, type
- Własności
- accessible
- Klasy stylów
- treecol-image
Przykłady
Ten przykład pokazuje nam pole wyboru w pierwszej kolumnie, żądając poniżej stylu.
<tree flex="1"> <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>
Aby zrobić widoczne pole wyboru, potrzebujemy dodać następujący styl do arkusza stylów (zobacz treecol.type).
treechildren::-moz-tree-checkbox(checked){ /* css dla zaznaczonej komórki*/ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); }
Atrybuty
-
crop
- Typ: jedna z poniższych wartości
- Jeśli etykieta elementu jest zbyt duża by zmieścić się w danym miejscu, to jej tekst zostanie skrócony po stronie określonej przy pomocy atrybutu
crop
. Wycięty fragment tekstu zostanie zastąpiony wielokropkiem. Jeśli kierunek pudełka jest określony w lewą stronę, to skrócenie tekstu nastąpi w tym samym kierunku (czyli z lewej strony):
-
start
: Tekst będzie skrócony z lewej strony. -
end
: Tekst będzie skrócony z prawej strony. -
left
: Tekst będzie skrócony z lewej strony. -
right
: Tekst będzie skrócony z prawej strony. -
center
: Tekst będzie skrócony w środku, pokazując oba końce: początek i koniec normalnego tekstu. -
none
: Tekst nie będzie skrócony przy zastosowaniu wielokropka. Jednakże, tekst skrócony zostanie po prostu obcięty, jeśli będzie za duży. Strona skrócenia owego tekstu zależy od rozmieszczenia tekstu określonego w arkuszu stylów CSS.
menupopup > menuitem, menupopup > menu { max-width: none; }
-
cycler
- Typ: boolean
-
Jeśli
true
, then the column is a cycler column. In the case, clicking on a cell in the column will alternate its state between on and off. This is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. If the cycler attribute is not set, the cell is a regular text cell.
-
dragging
- Typ: boolean
- Ten atrybut będzie ustawiony na
true
, jeśli kolumna będzie przesuwana. Ten atrybut jest ustawiony automatycznie, więc nie powinniśmy go przestawiać ręcznie.
-
fixed
- Typ: boolean
-
If
true
, the size of the column in the tree cannot be adjusted by the user. Anysplitter
to either side will resize those columns while keeping the fixed column at a constant size. Iffalse
or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.
-
hideheader
- Typ: boolean
- Ustaw atrybut na
true
, aby wskazać, który nagłówek kolumny drzewa powinien być wyświetlony bez stylu nagłówka kolumny.
-
ignoreincolumnpicker
- Typ: boolean
- Jeśli
true
, kolumna nie zostanie wyświetlona w zbiorze kolumn.
-
label
- Typ: string
- Etykieta, która zostanie wyświetlona na elemencie. Jeśli zostanie on usunięty, to żaden tekst nie zostanie wyświetlony.
-
sort
- Typ: adres URI predykatu RDF
- Set this to a RDF property to have the data in the column sorted based on that property. The property will usually be the same as that of the cell label.
-
sortActive
- Typ: boolean
- Powinien być ustawiony na
true
, dla kolumn, które powinny być domyślnie sortowane.
-
sortDirection
- Typ: jedna z wartości poniżej
- Ustaw ten atrybut na ustawienie kierunku, w którym zawartość szablonów została wygenerowana i posortowana. Zastosuj atrybut
sortResource
, aby określić klucz sortowania.
-
ascending
: Dane są sortowane w kolejności rosnącej. -
descending
: Dane są sortowane w kolejności malejącej. -
natural
: Dane są sortowane w zwyczajny sposób, co oznacza porządek w tych, co zostały w magazynie.
- src
- Typ: adres URL obrazka
- Ustaw ten atrybut aby posiadać element obrazka w nagłówku
treecol
zamiast etykiety (label
). Ustaw adres URL obrazka, który zostanie wyświetlony w nagłówku kolumny drzewa. Jeśli ten atrybut zostanie opuszczony, to nie pojawi się żaden obrazek i zamiast niego użyta zostanie etykieta. Klasatreecol-image
musi być zastosowana na elemencietreecol
dla obrazka do wyświetlenia. Nie możemy mieć obu (obrazka i etykiety) pokazanych w jednym momencie.
- type
- Typ: jedna z wartości poniżej
- Typ kolumny drzewa. Domyślnie jest to kolumna tekstowa, która wyświetla zawartość jako tekst.
-
checkbox
: Zawartość kolumny jest polem wyboru. -
progressmeter
: Zawartością kolumny są paski postępu. Używany jest w Mozilli jako okno menedżera pobierania. -
text
: Zawartością kolumn jest tekst.
Własności
-
accessible
- Typ: nsIAccessible
- Zwraca obiekt dostępności dla elementu.
Dziedziczy z elementu XUL |
Metody
Klasy stylów
Następujące klasy możemy zastosować do nadania stylu temu elementowi. Należy korzystać z tych klas zamiast nadawać styl bezpośrednio w danym elemencie - dzięki temu będą bardziej pasować do motywu wybranego przez użytkownika.
-
treecol-image
- Zastosuj tą klasę do posiadania obrazka, który pojawi się w nagłówku kolumny drzewa. Określ obrazek stosując atrybut
.src
Podobne
- Elementy
- tree, treecols, treechildren, treeitem, treerow, treecell i treeseparator.
- Interfejsy
- nsIAccessibleProvider