Zarejestruj | Zaloguj

Mozilla.com

  1. MDC
  2. Strona główna
  3. Kurs XUL
  4. Proste paski menu
Spis treści
  1. 1. Tworzenie menu
      1. 1.1.1. Przykład prostego paska menu
    2. 1.2. Element menubar
    3. 1.3. Element menu
    4. 1.4. Element menupopup
    5. 1.5. Element menuitem
    6. 1.6. Element menuseparator
Przekierowane z Pl/Pomocnik XUL:Prosty pasek menu

Proste paski menu

« Poprzedni Następny »

W tym artykule zobaczymy, jak utworzyć prosty pasek menu.

Tworzenie menu

W XUL menu można stworzyć na różne sposoby. Najprostszym z nich jest dodanie paska menu wraz z wierszem menu na pasku, w taki sam sposób, jak mają inne programy. Możemy także utworzyć menu wyskakujące. Możliwości wykorzystania menu są zależne od liczby różnych elementów, pozwalających Ci utworzyć prosty pasek menu lub menu wyskakujące. Pozycje w menu możemy dostosować bardzo prosto. Widzieliśmy je w części kursu, pokazującego, jak dodać listy rozwijane stosując element menulist . W artykule tym opierać będziemy się na zdobytej do tej pory wiedzy.

Paski menu są często tworzone podobnie jak toolbar . Pasek menu może być umieszczony wewnątrz toolbar i po jego lewej stronie pojawi się strzałka, która pozwoli na jego rozwinięcie lub zwinięcie. Takie menu będzie działało, tak jak każdy inny pasek narzędzi. XUL posiada kilka specjalnych elementów menu, które dostarczają typowej funkcjonalności menu.

Poniżej znajduje się pięć elementów połączonych z paskiem menu i jego menu, które są wykorzystane poniżej, a w dalszej kursu części omówione są ich szczegóły:

menubar  
Pojemnik na wiersze menu.
menu  
Wbrew nazwie jest to tylko tytuł menu na pasku menu. Ten element możemy umieścić na pasku menu lub możemy go umieścić osobno.
menupopup  
Wyskakujące menu, które pojawia się po naciśnięciu elementu menu. Zawiera w sobie listę z poleceniami menu.
menuitem  
Pojedyncze polecenie menu. Powinno być umieszczone w menupopup .
menuseparator  
Pozioma linia oddzielająca elementy paska menu. Powinna być umieszczona w menupopup.

Menu można dostosować do swoich potrzeb, umieszczając w nich dowolne elementy. Odnosi się to do wszystkich platform, oprócz Macintosh, który posiada swoje własne specjalne menu na górze ekranu kontrolowane przez system. Podczas tworzenia własnego menu miej na uwadze, że specjalne reguły stylów lub elementów niebędących elementami menu, które są umieszczone w menu, mogą nie zostać zaimplementowane.

Przykład prostego paska menu

Źródła Podgląd

grafika:menubar-ex1.png
<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="Plik">
      <menupopup id="file-popup">
        <menuitem label="Nowy"/>
        <menuitem label="Otwórz"/>
        <menuitem label="Zapisz"/>
        <menuseparator/>
        <menuitem label="Zakończ"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edycja">
      <menupopup id="edit-popup">
        <menuitem label="Cofnij"/>
        <menuitem label="Przywróć"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>


Jak widzimy, został tu stworzony prosty pasek menu z elementem menubar . Znajdują się w nim dwa elementy menu (Plik i Edycja), ułożone poziomo. Tworzą one dwa tytuły, po naciśnięciu, których pojawi się odpowiednie menu wyskakujące menupopup . Ich rozmiary dostosowują się tak, aby zmieściły się zawarte w nich polecenia. Polecenia te są z kolei tworzone poprzez menuitem .

W celu oddzielenia grup kilku pozycji w menu stosujemy element menuseparator , będący separatorem.

Element menubar

menubar jest polem zawierającym menu. Zwróć uwagę, że został on umieszczony wewnątrz toolbox . Pasek menu nie posiada specjalnych atrybutów, ale jest on typu pudełkowego. Znaczy to, że powinniśmy utworzyć pionowy pasek menu ustawiając atrybut orient na wartość vertical.

grafika:menubar-ex2.png

Element menu zazwyczaj jest umieszczany w pasku menu, ale niekoniecznie musi tak być. Jednak jego wygląd będzie się wtedy jeszcze różnił. Obrazek ukazujący aktualny przykład sprawia wrażenie, jakby nie był w pełni paskiem menu (jest jeszcze wczesne stadium projektowania tegoż paska).

Element menu

Elementy menu zachowują się podobnie, jak elementy przycisków button . Część atrybutów jest taka sama, a oprócz tego istnieje kilka dodatkowych:

id  
Unikatowy identyfikator.
label  
Etykieta, która powinna pojawić się jako napis na menu, np. Plik lub Edytuj.
disabled  
Atrybut typu logicznego (boolean), określający element menu jako wyłączony, gdy posiada przypisany true. Może przyjmować wartości typu boolean - true i domyślnie ustawioną false.
accesskey  
Jest to klawisz, który użytkownik może nacisnąć, aby aktywować pozycję menu. Litera, która zazwyczaj pokazuje znak podkreślenia w tytule menu. Menu w Mozilli wygląda jak atrybut label i następnie dodajemy podkreślenie znaku do używanego w etykiecie znaku. Z tego powodu powinno się używać określanego i istniejącego znaku w jakiejś treści.

Element menupopup

Element menupopup tworzy wyskakujące menu zawierające komendy. Jest ono typu pudełkowego, domyślnie ustawione pionowo. Można zmienić je na poziome, wtedy menuitem będą wyświetlone w rzędzie. Zazwyczaj menupopup zawiera elementy typu menuitem i menuseparator , ale możesz także wstawić elementy jakiegoś typu (nie będą one jednak wtedy wyświetlane pod Macintoshem).

Element menuitem

Element menuitem jest podobny do elementu menu i część jego atrybutów jest identyczna:

id  
Unikatowy identyfikator.
label  
Etykieta, która powinna pojawić się na menu jako napis, np. Otwórz lub Zapisz.
disabled  
Atrybut typu logicznego (boolean), określający element menu jako wyłączony, gdy posiada przypisany true. Może przyjmować wartości typu boolean - true i domyślną false.
accesskey  
Jest to klawisz, który użytkownik może nacisnąć, aby aktywować pozycję menu. Litera, która zazwyczaj pokazuje znak podkreślenia w tytule menu. Menu w Mozilli wygląda jak atrybut label i następnie dodajemy podkreślenie znaku do używanego w etykiecie znaku. Z tego powodu powinno się używać określanego i istniejącego znaku w jakiejś treści.
acceltext  
Określa klawisz skrótu, który widoczny jest obok tekstu komendy menu. Nic nie łączy tych skrótów ze skrótami w menuitem . Zobacz artykuł o skrótach klawiaturowych.

Element menuseparator

Element menuseparator nie posiada specjalnych atrybutów. Tworzy po prostu poziomą linię pomiędzy poprzednim, a następnym elementem.

W następnym artykule poznamy dodatkowe możliwości menu.

« Poprzedni Następny »

Page last modified 17:49, 17 gru 2007 by Witia

Tags:

Plików (0)