Wyniki wyszukiwania

treecol

W tym artykule

« 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

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. 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

Etykiety:

Autorzy tej strony: teoli, lmorchard, Mgjbot, Ptak82

Ostatnia aktualizacja: teoli, 29.05.2014, 05:52:48