treecol

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

Grafika:Xul_tree_col_checked.png

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. Any splitter to either side will resize those columns while keeping the fixed column at a constant size. If false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.

hidden
Typ: boolean
Jeśli jest ustawiony na true, element jest nie wyświetlane. Jest to podobne do ustawienia wyświetlania własności CSS na none.


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.
primary
Typ: boolean
If set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. If no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user.
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. Klasa treecol-image musi być zastosowana na elemencie treecol 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
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

Metody

Dziedziczy z elementu XUL
blur, click, doCommand, focus, getElementsByAttribute

Dziedziczy z elementu DOM
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

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


Autorzy i etykiety dokumentu

 Autorzy tej strony: teoli, lmorchard, Mgjbot, Ptak82
 Ostatnia aktualizacja: teoli,