mozilla
Wyniki wyszukiwania

    Dodatkowe możliwości menu

    W tym artykule zobaczymy, jak utworzyć podmenu i zaznaczyć jego elementy.

    Tworzenie podmenu

    Możemy tworzyć podmenu wewnątrz innych menu (zagnieżdżając się w menu) stosując istniejące elementy. Pamiętaj, że możemy umieszczać elementy do wewnątrz elementu menupopup. Widzieliśmy już wcześniej, jak umieścić pozycje menu (menuitem) i separatory (menuseparator) w wyskakującym menu (menupopup). Jednakże możemy tworzyć podmenu poprzez proste umieszczenie elementu menu wewnątrz elementu menupopup. Będzie ono nam działało, ponieważ element menu można tworzyć nawet wtedy, gdy nie jest ono bezpośrednio umieszczone wewnątrz paska menu. Przykład poniżej tworzy proste podmenu wewnątrz menu <tt>Plik</tt>:

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

    grafika:menubar-ex3.png
    <toolbox flex="1">
      <menubar id="sample-menubar">
        <menu id="file-menu" label="Plik">
          <menupopup id="file-popup">
            <menu id="new-menu" label="Nowy">
              <menupopup id="new-popup">
                <menuitem label="Okno"/>
                <menuitem label="Wiadomość"/>
              </menupopup>
            </menu>
            <menuitem label="Otwórz"/>
            <menuitem label="Zapisz"/>
            <menuseparator/>
            <menuitem label="Zakończ"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    Dodawanie menu do przykładu Znajdź pliki

    Dodajmy menu do okienka dialogowego <tt>Znajdź pliki</tt> poprzez wstawienie kilku prostych komend do menu <tt>Plik</tt> i <tt>Edycja</tt>. Podobnie jak w przykładzie powyżej.

    <toolbox>
    
     <menubar id="findfiles-menubar">
      <menu id="file-menu" label="Plik" accesskey="P">
        <menupopup id="file-popup">
          <menuitem label="Otwórz szukanie..." accesskey="O"/>
          <menuitem label="Zapisz szukanie..." accesskey="s"/>  
          <menuseparator/>
          <menuitem label="Zakończ" accesskey="k"/>
        </menupopup>
      </menu>
      <menu id="edit-menu" label="Edycja" accesskey="E">
        <menupopup id="edit-popup">
          <menuitem label="Wytnij" accesskey="W"/>
          <menuitem label="Kopiuj" accesskey="K"/>
          <menuitem label="Wklej" accesskey="l" disabled="true"/>
        </menupopup>
      </menu>
     </menubar>
    
    <toolbar id="findfiles-toolbar>
    
    grafika:menubar1.png

    Dodaliśmy dwa menu z różnymi poleceniami. Jak można zauważyć, pasek menu został dodany do paska zadań. W naszym przykładzie po <tt>Otwórz szukanie...</tt> i <tt>Zapisz szukanie...</tt> znajdują się trzy kropki, co według ogólnie przyjętej konwencji wskazuje, że po kliknięciu tych poleceń, otworzy się kolejne okienko dialogowe. Do każdego menu oraz elementu menu został dodany skrót klawiszowy, co spowodowało podkreślenie danej litery skrótu klawiaturowego w etykiecie polecenia, litera ta wywołuje dane polecenie i jest równoważna z kliknięciem w pozycję menu za pomocą kursora. Polecenie <tt>Wklej</tt> zostało wyłączone (disabled), ponieważ zakładamy, że nie mamy jeszcze czego wklejać.

    Nasz przykład: Okno dialogowe <tt>Znajdź pliki</tt>: Źródła Podgląd

    Dodawanie zaznaczania w menu

    Wiele aplikacji posiada pozycje menu, które są zaznaczone. Na przykład, właściwość, która jest włączona, posiada obok polecenia zaznaczenie, natomiast właściwość, która jest wyłączona nie posiada tego zaznaczenia. Kiedy użytkownik zaznaczy menu, pole zaznaczenia jest włączone. Możemy także utworzyć przyciski opcji i pozycje menu.

    Zaznaczenia są tworzone w podobny sposób jak elementy checkbox i radio. Wymagają one zaangażowania do zastosowania dwóch atrybutów: type, aby zdefiniować typ zaznaczenia oraz name, aby możliwe było pogrupowanie razem poleceń.

    Przykładowe menu z zaznaczonymi pozycjami

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

    <toolbox>
      <menubar id="options-menubar">
        <menu id="options_menu" label="Opcje">
          <menupopup>
            <menuitem id="backups" label="Zrób kopię zapasową" type="checkbox"/>
            <menuitem id="backups" label="E-mail administratora" type="checkbox" checked="true"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    


    grafika:menubar-ex00.png

    Dzięki dodaniu atrybutu type z wartością ustawioną na checkbox element menu może zostać zaznaczony lub odznaczony, po kliknięciu pozycji w menu przez użytkownika.

    Oprócz zwyczajnego zaznaczenia możemy również ustawić wartość atrybutu type na radio. Stosuje się go po to, aby spośród kilku elementów była możliwość wybrania tylko jednej pozycji na raz. Przykładem może być menu z różnymi czcionkami, gdzie może być zastosowany tylko jeden krój czcionki. Jeśli zostanie wybrana inna czcionka, to poprzednia stanie się automatycznie nieaktywna.

    W celu pogrupowania elementów menu należy do każdej z pozycji menu dodać atrybut name, o takiej samej wartości string. Poniżej przykład nam to zademonstruje:

    Przykładowe menu z opcjami

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

    grafika:menubar-ex000.png
    <toolbox>
      <menubar id="planets-menubar">
        <menu id="planet-menu" label="Planety">
          <menupopup>
            <menuitem id="jupiter" label="Jowisz" type="radio" name="ringed"/>
            <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/>
            <menuitem id="uranus" label="Uran" type="radio" name="ringed"/>
            <menuseparator/>
            <menuitem id="earth" label="Ziemia" type="radio" name="inhabited" checked="true"/>
            <menuitem id="moon" label="Księżyc" type="radio" name="inhabited"/>
          </menupopup>
        </menu>
      </menubar>
    </toolbox>
    

    W powyższym przykładzie znajdują się trzy pierwsze pozycje menu, z których tylko jedna może być zaznaczona. Są one zgrupowane wszystkie razem, ponieważ mają tę samą nazwę. Ostatni element <tt>Ziemia</tt>, podobnie jak przycisk opcji, nie jest częścią tej grupy, ponieważ posiada inną nazwę niż elementy z wcześniejszej grupy.

    Oczywiście wszystkie elementy są zgrupowane w tym samym menu. Nie muszą one być umieszczone obok siebie, lecz, jeśli tak nie jest, to nie ma to większego sensu.

    W następnym artykule zostanie pokazane, jak utworzyć menu wyskakujące.


    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Ptak82, Witia, Dbruan, teoli, Mgjbot
    Ostatnia aktualizacja: teoli,