Dodatkowe możliwości przycisku

W tym artykule poznamy kilka dodatkowych własności przycisków.

Dodawanie obrazka

Możemy dodać obrazek do przycisku poprzez określenie adresu URL w atrybucie image. Obrazek jest wczytany z podanego URL, który może być względnym lub bezwzględnym adresem URL. Wczytany obrazek jest wyświetlony na przycisku.

Przycisk z obrazkiem

Przycisk poniżej posiada dwa atrybuty: label i image (obrazek 'happy.png'). Obrazek będzie znajdował się z lewej strony etykiety. Możemy zmienić pozycję za pomocą dwóch innych atrybutów. Zostanie to wyjaśnione za chwilę.

var el = env.locale; Przykład 1 : Źródła Podgląd

<button label="Pomoc" image="happy.png"/>

Innym sposobem do określenia obrazka jest zastosowanie własności stylu CSS list-style-image w przycisku. Zaprojektowane jest to w taki sposób, że pozwala zmienić 'skórkę' (w tym przypadku wygląd obrazka) bez zmiany pliku XUL. Przykład pokazany został poniżej.

Przycisk z obrazkiem w CSS

var el = env.locale; Przykład 2 : Źródła Podgląd

Grafika:advbtns00-ex.png
<button id="find-button"
  label="Znajdź" style="list-style-image: url('happy.png')"/>

W tym przypadku obrazek 'happy.png' jest wyświetlony na przycisku. Atrybut style funkcjonuje podobnie jak jego odpowiednik z języka HTML. Ogólnie możemy go zastosować do wszystkich elementów XUL. Zwróć uwagę na deklarację stylów, które powinno się w rzeczywistości umieszczać w osobnym pliku arkusza stylów.

Pozycjonowanie obrazków

Domyślnie obrazek na przycisku wyświetla się z lewej strony tekstu etykiety. Są dwa atrybuty, które mogą być zastosowane do ustawienia pozycji poszczególnych elementów.

Atrybut dir steruje kierunkiem obrazka i tekstu. Poprzez ustawienie tego atrybutu na wartość reverse obrazek zostanie umieszczony z prawej strony tekstu. Stosując wartość normal lub w ogóle nie stosując żadnego atrybutu, obrazek zostanie umieszczony z lewej strony tekstu.

Atrybut orient możemy zastosować do umieszczenia obrazka powyżej lub poniżej tekstu. Domyślną wartością jest horizontal, który stosujemy do umieszczenia obrazka z prawej lub lewej strony tekstu. Możemy także zastosować wartość vertical, aby umieścić obrazek powyżej lub poniżej tekstu. W tym przypadku atrybut dir steruje położeniem powyżej lub poniżej tekstu. Takie same wartości są stosowane tam, gdzie normal oznacza umieszczenie obrazka powyżej tekstu, a reverse oznacza umieszczenie obrazka poniżej tekstu.

var el = env.locale; Przykład 3 : Źródła Podgląd

Grafika:advbtns1.png
<button label="Z lewej" image="happy.png"/>
<button label="Z prawej" image="happy.png" dir="reverse"/>
<button label="Powyżej" image="happy.png" orient="vertical"/>
<button label="Poniżej" image="happy.png" orient="vertical" dir="reverse"/>

Użyty tutaj przykład pokazuje wszystkie cztery typy ustawienia przycisków. Zwracamy uwagę, że dwa atrybuty nie są określone, gdyż można w nich zastosować wartości domyślne.

Przyciski z dodatkową zawartością

Przyciski mogą zawierać dowolny zestaw znaków wewnątrz siebie i będą one interpretowane wewnątrz przycisku. Prawdopodobnie nie będziesz bardzo często ich stosował, ale będziesz mógł je zastosować w momencie tworzenia zwykłych elementów.

Na przykład, utworzymy następujący przycisk, w którym dwa słowa będą koloru czerwonego:

var el = env.locale; Przykład 4 : Źródła Podgląd

grafika:advbtns0-ex.png
<button>
  <description value="To jest"/>
  <description value="nieco inny" style="color: red;"/>
  <description value="przycisk"/>
</button>

Dowolny element XUL możemy umieścić wewnątrz przycisku (button). Elementy HTML-a będą ignorowane, więc musimy je dołożyć do wewnątrz elementu description. Jeśli określimy na przycisku atrybut label, nałoży się ona na jakąkolwiek zawartość umieszczoną wewnątrz przycisku.

Możemy umieścić menupopup wewnątrz przycisku powodując pojawianie się menu rozwijanego w momencie, gdy przycisk zostanie naciśnięty, podobnie jak menulist. Jednakże w tym przypadku musimy ustawić atrybut type o wartości menu.

Przycisk z menupopup

var el = env.locale; Przykład 5 : Źródła Podgląd

grafika:advbtns2.png
<button type="menu" label="Urządzenia">
  <menupopup>
    <menuitem label="Drukarka"/>
    <menuitem label="Myszka"/>
    <menuitem label="Klawiatura"/>
  </menupopup>
</button>

W tym przykładzie użytkownik może kliknąć przycisk, po czym pojawi się menu rozwijane zawierające trzy pozycje. Zwróć uwagę, że zaznaczenie jednej z tych pozycji menu nie zmieni etykiety na przycisku, nie tak jak menulist. Ten typ przycisku jest przeznaczony do zastosowania podobnego do menu, ze skryptami dołączonymi do każdej pozycji wykonującej zadane zadanie. Zobaczymy więcej później w menu.

Możemy także ustawić atrybut type o wartości menu-button. Również utworzymy przycisk z menu, ale wygląd będzie miał inny. Obrazek z prawej pokazuje te różnice. Z lewej jest menu, a z drugiej strony jest menu-button. Posiada on strzałkę sygnalizującą obecność menu. Dla menu użytkownik może kliknąć gdziekolwiek na przycisku, aby pokazać menu. Dla menu-button użytkownik musi kliknąć strzałkę, aby pokazało się menu.

W następnym artykule poznamy więcej szczegółów nt. pozycjonowania elementów XUL w oknie.


Autorzy i etykiety dokumentu

Etykiety: 
Contributors to this page: teoli, Witia, Mgjbot, Ptak82, Takenbot, Cnr roxx
Ostatnia aktualizacja: teoli,