Wyskakujące menu

UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron+.

W poprzednim artykule zobaczyliśmy jak utworzyć menu na pasku menu. Język XUL także posiada możliwości utworzenia wyskakujących menu ( popup menus ), które są zazwyczaj wyświetlane w momencie kiedy użytkownik naciśnie prawy przycisk myszy.

Tworzenie wyskakującego menu

XUL posiada trzy różne rodzaje wyskakujących okienek (popups), które zostały opisane poniżej. Główną różnicą pomiędzy nimi jest sposób ich wyświetlania:

Zwykły popup ( plain popup
Wyskakujące menu pojawiające się po naciśnięciu lewego przycisku myszy na elemencie. Jest podobne do menu na pasku menu, tyle tylko że może zostać umieszczone w dowolnym miejscu oraz zawierać dowolne elementy. Przykładem jest menu pojawiające po naciśnięciu przycisku Wstecz w przeglądarce.
Menu kontekstowe ( context popup
Pojawia się po naciśnięciu kontekstowego przycisku myszy. Najczęściej jest to prawy przycisk, czasami inny lub z kombinacją innych klawiszy. Na przykład na Macintoshu należy użyć klawisza Ctrl oraz przycisku myszy lub przytrzymać przycisk przez chwilę. Możliwe jest także otworzenie menu kontekstowego bez użycia myszy, na przykład poprzez naciśnięcie klawisza menu na klawiaturze.
Podpowiedzi ( tooltips
Wyskakujące okienko pojawiające się kiedy użytkownik najedzie myszką na element. Stosuje się je zazwyczaj w celu dostarczenia dodatkowych informacji o danym elemencie.

Wszystkie one różnią się sposobem wywołania. Mimo że mogą zawierać dowolną zawartość, dwa pierwsze zazwyczaj mają w sobie menu, a trzeci to najczęściej po prostu tekst. Rodzaj popupa określa się poprzez element go wywołujący.

Deklarowanie zawartości wyskakującego okienka

Wyskakujące okienko opisuje zastosowanie elementu menupopup. Nie posiada określonych atrybutów i jest typem pudełka. Podczas wywołania wyświetli okienko zawierające to co umieścimy we wnętrzu menupopup. Jednakże, powinniśmy zawsze umieszczać atrybut id w menupopup jako powiązanie z elementem wyskakującego okienka (popup). Zobaczmy, co to oznacza wkrótce. Najpierw, przykład:

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Wytnij"/>
    <menuitem label="Kopiuj"/>
    <menuitem label="Wklej"/>
  </menupopup>
</popupset>

Jak widać, zostało stworzone proste menu wyskakujące z trzema komendami. Element menupopup otacza trzy pozycje menu. Należy zwrócić uwagę, że id został ustawiony na element menupopup.

Deklaracja menu wyskakującego okienka została cała otoczona przez element popupset. Jest to opcjonalnym kontenerem na wyskakujących okienek. Nie jest on rysowany na ekranie, lecz jest używany jako miejsce deklaracji wszystkich wyskakujących okienek. Może on zawierać wiele menu wyskakujących, jeden pod drugim. Zazwyczaj w pliku popupset jest zadeklarowany tylko raz, chociaż nic nie stoi na przeszkodzie aby zrobić to wiele razy.

As the name <code>popupset</code> implies, you can put multiple popup declarations inside it. Just add additional ones after the first <code>menupopup</code> element. You can have more than one <code>popupset</code> in a file, but usually you will have only one.

Powiązanie wyskakującego okienka z elementem

Teraz po utworzeniu wyskakującego okna należałoby je pokazać. W tym celu musimy powiązać wyskakujące okno z elementem, gdzie powinno się ukazać. Dokonujemy tego w celu pokazania okna tylko wtedy, gdy użytkownik kliknie w danym obszarze okna. Przeważnie będzie to dany przycisk lub pudełko.

Popup po utworzeniu może zostać wyświetlony. Aby pojawił się w określonym położeniu, należy go połączyć z odpowiednim elementem (najczęściej z przyciskiem lub pudełkiem elementu ). W tym celu należy do danego elementu dodać jeden z trzech atrybutów, każdy odpowiadający odpowiedniemu rodzajowi popupa. Są to: popup - zwykły popup context - kontekstowy tooltip - podpowiedź

Wartość atrybutu musi być ustawiona na id menupopup, które chcemy, aby się pojawiło. Dlatego właśnie każde z wyskakujących okienek musi posiadać id. W ten bardzo prosty sposób, możemy mieć wiele wyskakujących menu w jednym pliku.

W powyższym przykładzie zostaje utworzone menu kontekstowe. Następnie jest ono dołączone do pudełka elementu.

In the example above, we want to make the popup a context menu. That means that we need to use the <code>context</code> attribute and add it to the element which we want to have the popup associated with. The sample below shows how we might do this:


Przykład 1 : Źródła Podgląd

grafika:popups-ex1.png
<popupset>
  <popup id="clipmenu">
    <menuitem label="Wytnij"/>
    <menuitem label="Kopiuj"/>
    <menuitem label="Wklej"/>
  </popup>
</popupset>

<box context="clipmenu">
  <description value="Kliknięcie kontekstowe dla menu"/>
</box>

Jak widać, menu kontekstowe zostało powiązane z pudełkiem. Jeśli zostanie on kliknięty kontekstowym przyciskiem myszy (najczęściej prawym), pojawi się popup. Stanie się tak również po kliknięciu w jego dziecko (element description w naszym przykładzie). Dzięki temu, że menu dołącza się za pomocą atrybutu context do danego elementu poprzez jego id , może być on użyty z wieloma obiektami. W tym wypadku pojawi się popup clipmenu.

Here, the popup has been associated with a box. Whenever you context-click (right-click) anywhere inside the box, the popup menu will appear. The popup will also appear even if you click on the children of the box, so it will work if you click on the <code>description</code> element also. The <code>context</code> attribute has been used to associate the box with a popup with the same id. In this case, the popup <code>clipmenu</code> will appear. This way, you can have a number of popups and associate them with different elements. You could associate multiple popups with the same element by putting more attributes of different types on an element. You could also associate the same popup with multiple elements, which is one advantage of using the popup syntax. Popups can only be associated with XUL elements; they cannot be associated with HTML elements.

Podpowiedzi

Dowiemy się w jaki sposób prosto stworzyć podpowiedź. Są dwa sposoby na utworzenie podpowiedzi. Prostsza i zarazem pierwsza możliwość to dodanie atrybutu tooltiptext do elementu, do którego chcemy załączyć podpowiedź.

Druga możliwość to użycie elementu typu tooltip zawierającego treść podpowiedzi. Wymaga to oddzielnego bloku kodu dla każdej podpowiedzi lub skryptu generującego zawartość podpowiedzi. Zaletą takiego rozwiązania jest to, że można zawrzeć w niej dowolną treść.

The second method is to use a <code>tooltip</code> element containing the content of a tooltip. This requires you to have a separate block of content for each tooltip or to have a script which sets the content. However, it does allow you to use any content besides text in a tooltip.

Przykład 2 : Źródła Podgląd

<button label="Zapisz" tooltiptext="Kliknij tutaj, aby zapisać swoją zawartość"/>

<popupset>
  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
    <description value="Kliknij tutaj, aby dowiedzieć się więcej"/>
    <description value="Naprawdę!" style="color: red;"/>
  </tooltip>
</popupset>

<button label="Więcej" tooltip="moretip"/>

Każdy z tych dwóch przycisków posiada podpowiedź. Pierwszy stosuje domyślny styl podpowiedzi, natomiast drugi posiada styl nadany przez użytkownika, mający inny kolor tła oraz styl czcionki. Podpowiedź przyporządkowana została wraz przyciskiem Więcej za pomocą atrybutu tooltip, który jest ustawiony do przesłania na wartość id elementu tooltip. Zauważ, że element tooltip jest wciąż umieszczony wewnątrz elementu popupset, podobnie jak inne typy wyskakujących okienek (popup).

powyżej fragment - zrobiony

Wyrównywanie okienek

Domyślnie okienko wyskakujące ( popup ) oraz kontekstowe ( context window ) zostaną wyświetlone tam gdzie znajduje się wzkaźnik myszy. Podpowiedź ( tooltip ) pojawi się trochę poniżej elementu aby nie był zasłonięty przez wzkaźnik myszy. Czasami jednak zdarza się potrzeba większej kontroli nad miejscem wyświetlania okienka wyskakującego, na przykład menu które pojawia się po naciśnięciu przycisku Wstecz powinno pojawić się pod nim, a nie w miejscu gdzie znajduje się wzkaźnik myszy.

W tym celu można użyć dodatkowego atrybutu elementu popup - position. Można go również dodać do elementu typu menupopup. Jest on używany w celu ustawienia miejsca wyświetlania okienka względem elementu go wywołującego. Posiada kilka zdefiniowanych wartości, krótko opisanych poniżej:

after_start 
popup pojawi się poniżej elementu, wyrównanie wzdłuż lewych krawędzi. Popup zostanie rozszerzony po prawej stronie jeśli jest większy niż element. W ten sposób wyświetlane jest menu, które pojawia się po naciśnięciu przycisku Wstecz w przeglądarce.
after_end 
popup pojawi się poniżej elementu, wyrównanie wzdłuż prawych krawędzi.
before_start 
popup pojawi się powyżej elementu, wyrównanie wzdłuż lewych krawędzi.
before_end 
popup pojawi się powyżej elementu, wyrównanie wzdłuż prawych krawędzi.
end_after 
popup pojawi się po prawej stronie elementu, wyrównanie wzdłuż dolnych krawędzi.
end_before 
popup pojawi się po prawej stronie elementu, wyrównanie wzdłuż górnych krawędzi.
start_after 
popup pojawi się po lewej stronie elementu, wyrównanie wzdłuż dolnych krawędzi.
start_before 
popup pojawi się po lewej stronie elementu, wyrównanie wzdłuż górnych krawędzi.
overlap 
popup pojawi się na elemencie.
at_pointer 
popup pojawi się w tym samym miejscu, co wzkaźnik myszy.
after_pointer 
popup pojawi się na takim samym poziomie co wzkaźnik myszy, ale poniżej elementu. W ten sposób zostaje wyświetlona podpowiedź.

Dodając do elementu jeden lub dwa takie atrybuty, można dokładnie określić, gdzie popup powinien się pojawić (nie można określić położenia w pikselach). Atrybutu position można użyć z wszystkimi typami okienek wyskakujących, ale zazwyczaj nie zmienia się jego wartości dla podpowiedzi.

Poniższy przykład pokazuje sposób tworzenia przycisku Wstecz wraz z menu wyskakującym:

Przycisk z menu wyskakującym

Źródła Podgląd

<popupset>
  <popup id="backpopup" position="after_start">
    <menuitem label="Page 1"/>
    <menuitem label="Page 2"/>
  </popup>
</popupset>

<button label="Pop Me Up" popup="backpopup"/>

Nasz przykład: Znajdź pliki

Dodajmy proste menu wyskakujące do okienka dialogowego Znajdź pliki. Dla przejrzystości zawartość będzie taka sama jak w menu EdycjaZnajdź pliki. Popup pojawi się po kliknięciu pierwszej zakładki:

<popupset>
  <popup id="editpopup">
    <menuitem label="Wytnij" accesskey="t"/>
    <menuitem label="Kopiuj" accesskey="k"/>
    <menuitem label="Wklej" accesskey="w" disabled="true"/>
  </popup>
</popupset>

<vbox flex="1">
.
.
.

<tabpanel id="searchpanel" orient="vertical" context="editpopup">

Proste menu zostało dodane do pierwszej zakładki. Pojawi się ono po naciśnięciu prawego przycisku myszy (lub z klawiszem Ctrl na Macintoshu) gdziekolwiek na pierwszym panelu, natomiast kliknięcie w innym miejscu nie spowoduje żadnego efektu. Warto zauważyć że 'textbox' posiada swoje własne wbudowane menu, które zastąpi nasze.

Nasz przykład, okienko dialogowe Znajdź pliki: Źródła Podgląd

W następnym artykule zostaną omówione menu przewijane.

 

 

Autorzy i etykiety dokumentu

Ostatnia aktualizacja: teoli,