mozilla
Wyniki wyszukiwania

    Paski narzędzi

     

    Pasek narzędzi zazwyczaj jest umieszczony wzdłuż góry okna i zawiera parę przycisków, które pełnią przypisane im funkcje. XUL posiada metodę do tworzenia przycisków.

    Dodawanie paska narzędzi

    Tak jak wiele elementów w XUL, paski narzędzi są typem pudełka. Zazwyczaj w pasku narzędzi umieszczone są przyciski, ale może się w nim znajdować dowolny element. Na przykład okno przeglądarki Mozilla posiada w pasku narzędzi pole tekstowe, które wyświetla adres URL.

    Paski narzędzi mogą być umieszczone na jakimkolwiek boku okna, albo poziomo albo pionowo. Oczywiście zwykle nie położyłbyś pola tekstowego w pionowym pasku narzędzi. W rzeczywistości, ponieważ paski narzędzi są tylko pudełkami, mogą zostać umieszczone gdziekolwiek chcemy, również pośrodku okna. Zwykle jednakże ustawiamy pasek narzędzi tak, aby pojawił się wzdłuż góry okna. Kiedy więcej niż jeden pasek narzędzi jest położony obok drugiego, to zwykle są one pogrupowane w 'toolbox'.

    Po lewej stronie paska narzędzi znajduje się wcięcie, które, jeśli klikniesz, to zwinie pasek narzędzi i będzie tylko widoczne owe wcięcie. Wcięcie to nazywamy grippy . Kiedy kilka pasków narzędzi umieścimy w tym samym pudełku, uchwyty zostaną zwinięte do pojedynczego rzędu, dzięki czemu mniej miejsca zostanie zajęte. Pionowe paski narzędzi mają uchwyty nad sobą. Zazwyczaj są one zwijane, jeśli użytkownik potrzebuje w oknie więcej przestrzeni dla głównego okna.

    Prosty toolbar wewnątrz toolbox

    Źródła Podgląd

    grafika:toolbar1.png
    <toolbox>
      <toolbar id="nav-toolbar">
        <toolbarbutton label="Wstecz"/>
        <toolbarbutton label="Dalej"/>
      </toolbar>
    </toolbox>
    

    Został utworzony pasek narzędzi zawierający dwa przyciski; przycisk Wstecz oraz przycisk Dalej. Pasek został umieszczony wewnątrz elementu toolbox. Zastosowane zostały cztery nowe znaczniki, które są omówione poniżej:

    toolbox 
    Pudełko zawierające paski narzędzi.
    toolbar 
    Pojedynczy pasek narzędzi zawierający elementy, takie jak przyciski. Pasek narzędzi może być zwinięty przy pomocy chwytaka, pojawiającego się po lewej stronie lub powyżej paska.
    toolbarbutton 
    Przycisk na pasku narzędzi, który posiada takie same właściwości jak zwykły przycisk, od którego różni się zazwyczaj sposobem wyświetlania.
    toolbargrippy 
    Element tworzący chwytak, stosowany do zwijania oraz rozwijania paska narzędzi. Nie musimy go dodawać, jako że zostanie dodany automatycznie.

    toolbar jest głównym elementem, który utworzy rzeczywisty pasek narzędzi. Wewnątrz niego są umieszczone oddzielne pozycje paska narzędzi, są to zazwyczaj przyciski, ale mogą to być również elementy innego typu. Pasek narzędzi powinien posiadać atrybut id, w przeciwnym wypadku grippy nie będzie mógł zwinąć lub rozwinąć paska narzędzi w prawidłowy sposób.

    W przykładzie powyżej został stworzony tylko jeden pasek narzędzi. Wiele pasków może zostać utworzonych poprzez dodanie elementów toolbar po pierwszym elemencie.

    Element typu toolbox jest kontenerem dla pasków narzędzi. W niektórych programach znajduje się kilka pasków wzdłuż góry okna. Wszystkie one mogą zostać umieszczone wewnątrz elementu toolbox.

    Nie musisz umieszczać elementów toolbar wewnątrz toolbox.

    Grippy jest tworzony poprzez element toolbargrippy. Zastosowanie tego elementu poza paskiem narzędzi mija się z celem, ponieważ nie będzie miał czego zwinąć. Można jednak zmienić jego wygląd. Żeby schować grippy, należy do elementu toolbar dodać atrybut grippyhidden ustawiony na wartość true.

    Te same paski, dwa z nich zwinięte

    grafika:toolbar3.jpg

    Poniżej przykład elementu toolbox zawierający wewnątrz trzy paski narzędzi
    grafika:toolbar2.jpg

    Nasz przykład: Znajdź pliki

    W celach demonstracyjnych dodajmy pasek narzędzi do okna dialogowego Znajdź pliki. Będzie on zawierał dwa przyciski, Otwórz oraz Zapisz, które pozwolą na zapisanie wyników wyszukiwania oraz ich późniejsze otwarcie.

     

    <vbox flex="1">
      <toolbox>
        <toolbar id="findfiles-toolbar">
          <toolbarbutton id="opensearch" label="Otwórz"/>
          <toolbarbutton id="savesearch" label="Zapisz"/>
        </toolbar>
      </toolbox>
      <tabbox>
    

     

    grafika:toolbar5.png

    Został dodany pasek narzędzi z dwoma przyciskami. Na obrazku można zobaczyć, że zostały umieszczone poziomo na górze okna. Grippy także został wyświetlony po lewej stronie paska narzędzi. Zauważ, że pasek narzędzi został umieszczony wewnątrz pionowego pola powyżej pudełka kart. Jest to spowodowane koniecznością pionowego ułożenia, tak aby pasek narzędzi mógł się pojawić ponad pozostałymi elementami.

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

    W następnym artykule dowiemy się jak dodać do okna pasek menu.

    Autorzy i etykiety dokumentu

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