Nadawanie stylu drzewa

Nadawanie stylu drzewa

Możesz nadać style obramowaniu drzewa i nagłówkom kolumn, robiąc to w identyczny sposób jako osobne elementy. Dodanie stylu do elementu tree będzie zastosowany w encji drzewa. Dodanie stylu do elementu treecol nie spowoduje, że styl znajdzie zastosowanie do kolumny, a tylko do nagłówka.

Ciało drzewa musi być stylowane trochę w inny sposób, jak inne elementy. Zewnętrzny treechildren jest tylko prawdziwym elementem w ciele drzewa. Wewnętrzny elementy są tylko do rezerwacji miejsca.

Ustawianie własności

Zamiast tego, musisz użyć properties atrybutu wierszy i komórek, aby ustawić jedną lub więcej nazw właściwości. Możemy tego używać z drzewami z wartościami statycznymi, RDF buduje zawartość w podany sposób wraz z widokiem. Powiedzmy, że chcemy uzyskać szczególny pasek(wiersz(?)) o niebieskim kolorze tła. Zostało to zaimplementowane we właściwościach etykiety Mozilla Mail's. Będziemy używać własności nazwanej 'makeItBlue'. Możesz jej użyć zawsze, gdy potrzebujesz nazwy. Możesz ustawić wielokrotne własności oddzielając je za pomocą spacji.

Ustaw własność wiersza lub komórki tabeli, jak jest to pokazane w poniższym przykładzie:

<treerow properties="makeItBlue">

Selektory CSS dla drzewa

Arkusze stylów potrafią pobierać tą własność i używać do zmiany wyglądu wiersza dla nieczytelnej wiadomości e-mail lub etykiety. Wymyśl właściwości jako funkcjonujące bardziej, niż klasa stylu, chociaż odpowiada ona czemuś więcej, kompleksowa składnia do użycia w pliku arkusza stylów. Jest tak ponieważ możesz wyszczególnić style dla pewnych części lub indywidualnych komórek. Nie możesz używać stylów dla tekstu, jeśli są one komórkami, ale złożone z wcięciem. Następujący przykład jest składnia, która musi być użyta:

treechildren::-moz-tree-row(makeItBlue)
{
  background-color: blue;
}

Ten dodatkowy pseudostyl jest użyty do stylowania kolorem tła dla wiersza, który ma własność 'makeItBlue'. Ta specjalna składnia jest potrzebna ponieważ komórki nie potrafią rozdzielić elementów. Cała zawartość wewnątrz ciała drzewa, jest interpretowane przez element treechildren (uwaga treechildren się staje sformatowany stylami w zasadzie poniżej.) Pseudostyl ustawia zasady stylów dla określonych części, co ma zostać wyświetlone. Ta zasada stylów znaczy, że wewnątrz element treechildren, ustawia kolor tła na niebieski dla wszystkich wierszy drzewa mających własność 'makeItBlue'.

Tekst '::-moz-tree-row' określa zawartość obszaru jaki jest potrzebny, który w tym przypadku jest wierszem. Możesz także użyć następujących wartości:

• ::-moz-tree-cell: Komórka. Użyj do określenia obramowania i koloru tła.
• ::-moz-tree-cell-text: Tekst w komórce. Użyj do ustawienia czcionki i koloru tekstu.
• ::-moz-tree-twisty: Pojawienie się zwoju uzyskamy rozszerzenie lub upadek potomka wiersza.
• ::-moz-tree-image: Obrazek w komórce. Możesz ustawić obrazek z własnościami list-style-image.
• ::-moz-tree-row: Wiersz. Użyj go aby ustawić kolor tła wiersza.
• ::-moz-tree-indentation: Wcięcie do lewej strony wierszy są potomkami reszty wierszy.
• ::-moz-tree-column: Kolumna.
• ::-moz-tree-line: Linie są rysowane z połączenie potomka-dziecka wiersza do wiersza potomka-rodzica.
• ::-moz-tree-separator: Separator w drzewie.
• ::-moz-tree-progressmeter: Wartość metra postępu komórek. Możesz utworzyć metr postępu poprzez ustawienia atrybutu type w kolumnie progressmeter.
• ::-moz-tree-drop-feedback: Sprzężenie zwrotne 'chwyć i upuść'.

Sprawdź użycie kilku własności oddzielając je przecinkiem. Przykład poniżej ustawia kolor tła na szary dla wierszy, które posiadają określoną właściwość 'readonly' i 'unread'. Dla własności, które są 'readonly' (tylko do odczytu), zostanie dodana czerwona linia obramowania wokoło wiersza. Ważna jest, kolejność określania zasad i ich zapisanie jako jakiś wiersz, który posiada atrybut 'readonly' ustawiony bez względu na to czy są inne własności takie jak 'unread'.

treechildren::-moz-tree-row(readonly)
{
  border: 1px solid red;
}

treechildren::-moz-tree-row(readonly, unread)
{
  background-color: rgb(80%, 80%, 80%);
}

Domyślne własności

Lista właściwości dla elementów stanowiących drzewo jest domyślnie bardzo mała dla domyślnych ustawień, które można także użyć jako arkusze stylów. Możemy używać tych dodatkowych właściwości do ustawienia appearance of containers or selected rows. The following properties are automatically set as needed:

focus

ta własność jest ustawiona jeśli the tree currently has the focus.

selected

ta własność jest ustawiona dla wierszy i komórek, które są aktualnie zaznaczone.

current

ta własność jest ustawiona jeśli tkursor jest w wierszu. Tylko jeden wiersz będzie miał ustawioną własność na czas.

container

ta własność jest ustawiona dla wierszy i komórek posiadających, który element dziedziczył z wiersza tabeli.

leaf

ta własność jest ustawiona dla wierszy i komórek których nie ma potomek wiersza.

open

ta własność jest ustawiona dla wierszy i komórek które są expanded.

closed

ta własność jest ustawiona dla wierszy i komórek które są zawinięte.

primary

ta własność jest ustawiona dla komórek w primary column.

sorted

ta własność jest ustawiona dla komórek w the current sorted column.

even

ta własność jest ustawiona dla even numbered rows.

odd

ta własność jest ustawiona dla odd numbered rows. This property, along with the even property allow you to set, dla przykładu, alternating colors for each row.

dragSession

ta własność jest ustawiona jeśli coś something is currently being dragged.

dropOn

if a drag is occuring over the tree, ta własność jest ustawiona dla the row currently being dragged over, as long as the mouse pointer is hovering over the row.

dropBefore

ta własność jest ustawiona jeśli kursor myszki ...

dropAfter

ta własność jest ustawiona jeśli kursor myszki jest nad lub pod jest kursor myszki jest przed obecną męką.

progressNormal

ta własność jest ustawiona dla progress meter cells.

progressUndetermined

ta własność jest ustawiona dla undeterminate progress meter cells.

progressNone

ta własność jest ustawiona dla non-progress meter cells.

The properties are set for rows or cells in rows with the necessary state. For columns and cells, one additional property, the id of the column or column the cell is in will be set.

Ustawienie własności dla kompilacji drzew RDF

Dla zbudowania drzewa RDF, możemy użyć tej samej składni. Jednakże, często będziesz musiał ustawiać właściwości opartych na wartościach znajdujących się w kodzie źródłowym.

Ustawienie własności dla Własnego widoku drzewa

For trees with a custom view script, you can set properties by supplying the functions 'getRowProperties', getColumnProperties() and getCellProperties() in the view. These return information about an individual row, column and cell. Arguments to these functions indicate which row and/or column. The last argument to each of these functions is a properties list which the view is expected to fill with a list of properties. The function getColumnProperties() also supplies the corresponding treecol element for the column.

getRowProperties : function(row,prop){}
getColumnProperties : function(column,columnElement,prop){}
getCellProperties : function(row,column,prop){}

Let's look at an example of changing a specific cell. Let's make every fourth row have blue text, using the example from a previous section. We'll need to add code to the getCellProperties() function, to add a property 'makeItBlue' for cells in every fourth row. (We don't use getRowProperties as the text color will not be inherited into each cell.)

The properties object that is passed as the last argument to the getCellProperties is an XPCOM object that implements nsISupportsArray. It is really just an XPCOM version of an array. It contains a function AppendElement which can be used to add an element to the array. We can use the interface nsIAtomService to constuct string atoms for the properties.

getCellProperties: function(row,col,props){
  if ((row %4) == 0){
    var aserv=Components.classes["@mozilla.org/atom-service;1"].
              getService(Components.interfaces.nsIAtomService);
    props.AppendElement(aserv.getAtom("makeItBlue"));
  }
}

This function would be defined as part of a view object. It first checks to see which row is being requested and sets a property for cells in every fourth row. The properties list requires an array of atom objects, which can be thought of as constant strings. We create them using the XPCOM interface nsIAtomService and add them to the array using the AppendElement function. Here, we create an atom 'makeItBlue'. You can call AppendElement again to add additional properties.

Przykład arkusza stylów

treechildren::-moz-tree-row(selected)            { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd)                 { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected)       { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected)      { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }

Na następnej stronie zobaczymy w jaki sposób zmodyfikować domyślny motyw.