XUL:treecol

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja XUL    [ Przykłady | Atrybuty | Własności | Metody | Podobne ]

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

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

[edytuj] Atrybuty

Dziedziczy z elementu 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, ref, removeelement, sortDirection, sortResource, sortResource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width

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: Wycofywany Tekst będzie skrócony z lewej strony.
• right: Wycofywany 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.

[edytuj] Własności

accessible

Typ: nsIAccessible

Zwraca obiekt dostępności dla elementu.

Dziedziczy z elementu XUL align, allowEvents, boxObject, builder, className, collapsed, contextMenu, controllers, currentItem, database, datasources, dir, flex, height, hidden, id, left, listBoxObject, maxHeight, maxWidth, menu, minHeight, minWidth, observes, ordinal, orient, pack, persist, ref, resource, statusText, style, tooltip, tooltipText, top, value, width Dziedziczy z elementu DOM attributes, childNodes, cloneNode, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, tagName

[edytuj] 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

[edytuj] 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.

[edytuj] Podobne

Elementy

tree, treecols, treechildren, treeitem, treerow, treecell i treeseparator.

Interfejsy

nsIAccessibleProvider