treecol

This is an archived page. It's not actively maintained.

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



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.


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.
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, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width

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