Ptaszor i jego blog! Lol…

W poście na temat pracy języka XUL ze skryptami wspomniałem o elemencie colorpicker. Przypomnę teraz te informacje:

Element colorpicker:

Paleta kolorów, z której użytkownik może wybrać jedną komórkę siatki z kolorem poprzez kliknięcie w nią. Spójrzmy na prosty kod elementu:

<colorpicker type="button"/>

Przykład wygląda tak:

Ok, to tyle, jeśli chodzi o przypomnienie tego, co już kiedyś omawiałem, pora na konkretne zastosowanie tego elementu.

Kolory w postaci kodu szesnastkowego

Aby moja paleta kolorów, po zaznaczeniu odpowiedniego koloru wyświetlała jego wartość jako kod szesnastkowy muszę dodać do przykładu funkcję setText():

function setText()
{
  var color = document.getElementById("moj-colorpicker").color;
  document.getElementById("colorpicker-jako-tekst").value = color;
}

Powyższą funkcje użyjemy w przykładzie:

<colorpicker id="moj-colorpicker" onselect="setText();" />
   <label id="colorpicker-jako-tekst" value="(nie wybrano jeszcze koloru)" />

Aby wyświetlić wartość kodu szesnastkowego koloru musimy dodać jeszcze element <label>, któremu nadajemy unikalny identyfikator id, aby przypisać etykietę do wcześniej napisanej funkcji setText (). Wartością value etykiety będzie oczekiwany kod koloru. Jeśli nie wybierzemy koloru, to domyślnie będzie wyświetlała się etykieta, która informuje nas o tym fakcie .

Przycisk do wyboru koloru

Drugim zastosowaniem omawianego elementu colorpicker może być możliwość wyboru koloru za pomocą przycisku, po którego kliknięciu będziemy mieli możliwość wyboru koloru.

<caption label="przycisk do wyboru koloru" />
   <description value="Naciśnij przycisk i kliknij dwukrotnie," />
   <description value="aby zaznaczyć kolor." />
  <colorpicker  type="button"  palettename="standard" />

W powyższym przykładzie w zasadzie tylko ostatnia linia tworzy nas interesujący rezultat, lecz dodając dodatkowe dwa elementy, chciałem pokazać ich przykładowe wykorzystanie. Tymi “ponadprogramowymi” elementami są: caption oraz description. Po wpisaniu powyższego kodu do edytora XUL, powinniśmy zobaczymy podobny widok jak poniżej:

Pełny kod omawianych powyżej możliwości zastosowania elementu colorpicker

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window title="XUL - Colorpicker"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script>
<![CDATA[

function setText()
{
  var color = document.getElementById("moj-colorpicker").color;
  document.getElementById("colorpicker-jako-tekst").value = color;
}

]]>
</script>

<description><html:h1>XUL - Colorpicker</html:h1></description>

<vbox flex="1" style="overflow: auto">
 <hbox >

  <groupbox>
  <caption label="domyślny colorpicker" />
   <colorpicker id="moj-colorpicker" onselect="setText();" />
   <label id="colorpicker-jako-tekst" value="(nie wybrano jeszcze koloru)" />
  </groupbox>

  <groupbox>
  <caption label="przycisk do wyboru koloru" />
   <description value="Naciśnij przycisk i kliknij dwukrotnie," />
   <description value="aby zaznaczyć kolor." />
   <colorpicker  type="button"  palettename="standard" />
  </groupbox>

 </hbox>
</vbox>
</window>

Powyższy przykład: colorpicker2.xul

Więcej informacji:

• Dokumentacja XUL