mozilla
Wyniki wyszukiwania

    Dodawanie przycisków

    W tym artykule zajmiemy się dodawaniem przycisków do okna.

    Dodawanie przycisków do okna

    Okno, które utworzyliśmy, jest puste, więc niezbyt ciekawe. W tym rozdziale dodamy dwa przyciski, Znajdź oraz Anuluj. Nauczymy się też w prosty sposób układać je w oknie.

    Podobnie jak HTML, XUL posiada wiele znaczników, które mogą zostać użyte do tworzenia elementów interfejsu użytkownika. Najprostszym z nich jest znacznik button, który jest używany do tworzenia prostych przycisków.

    Element button posiada dwie główne własności: label (etykietę) oraz image (obrazek). Możesz skorzystać z jednej lub z obu. Zatem przycisk może posiadać tylko etykietę, tylko obrazek lub obie własności jednocześnie. Przyciski najczęściej stosuje się do tworzenia przycisków <tt>OK</tt> i <tt>Anuluj</tt> wykorzystanych w oknach dialogowych.

    Składnia przycisków

    Znacznik button ma następującą składnię:

    <button
        id="identifier"
        class="dialog"
        label="OK"
        image="images/image.jpg"
        disabled="true"
        accesskey="t"/>
    

    Znaczenie poszczególnych atrybutów (wszystkie są opcjonalne):

    id 
    Unikatowy identyfikator, za pomocą którego można odwoływać się do przycisku. Ten atrybut posiadają wszystkie elementy. Będziemy z niego korzystać za każdym razem, gdy będziemy chcieli się odwołać do przycisku w arkuszu stylów lub w skrypcie. Powinno się go używać we wszystkich elementach., ale w tym kursie czasami został on pominięty dla zwiększenia czytelności.
    class 
    Klasa stylu przycisku. Działa na tej samej zasadzie jak w HTML-u. Atrybutu używa się do wskazania stylu, który będzie wyświetlony w przycisku. W tym przypadku nadano mu wartość dialog. W większości przypadków nie będziemy używali klasy dla przycisku.
    label 
    Etykieta, która pojawi się na przycisku, np. <tt>OK</tt> lub <tt>Anuluj</tt>. Jeśli atrybut zostanie pominięty, na przycisku nie pojawi się żaden tekst.
    image 
    URL obrazka pojawiającego się na przycisku. Jeśli atrybut zostanie pomięty, przycisk pozostanie bez obrazka. Obrazek również można przypisać w arkuszu stylów używając do tego własności list-style-image.
    disabled 
    Jeśli ten atrybut zostanie ustawiony na true, przycisk zostanie wyłączony. Objawia się to zwykle jego "wyszarzeniem". Jeśli jest wyłączony, nie może być wykonana powiązana z nim funkcja. Domyślnie przycisk jest włączony. Do zmiany stanu przycisku można użyć języka JavaScript.
    accesskey 
    Wartością tego atrybutu powinna być litera używana w skrócie klawiaturowym. Litera ta powinna występować w etykiecie przycisku, wówczas zostanie wyróżniona - zwykle poprzez podkreślenie. Kiedy użytkownik naciśnie ALT (lub analogiczny klawisz, w zależności od używanej platformy systemowej) i klawisz skrótu, wybrany przycisk zostanie wywołany z jakiegokolwiek miejsca w oknie.

    Przycisk obsługuje więcej atrybutów poza tymi, które zostały wymienione powyżej. Zostaną one omówione w dalszej części kursu.

    Kilka przykładów przycisków

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

    grafika:buttons1.png
    <button label="Normaly"/>
    <button label="Wyłączony" disabled="true"/>
    

    W przykładzie przedstawionym powyżej pierwszy przycisk jest normalnym przyciskiem. Drugi natomiast jest wyłączony, co jest widoczne poprzez jego "wyszarzenie".


    Rozpoczynamy od utworzenia zwykłego przycisku <tt>Znajdź</tt>, który znajdzie się w oknie narzędzia do szukania plików. Poniżej znajduje się kod, który dodamy do przykładu <tt>findfile.xul</tt>.

    <button id="find-button" label="Znajdź"/>
    
    W Firefoksie 1.0 nie jest dozwolone otwieranie okien chrome z sieci WWW, więc odnośniki <tt>Podgląd</tt> w tym kursie będą otwierane w zwykłych oknach przeglądarki. Z tego też powodu przyciski zostaną rozciągnięte do pełnego rozmiaru okna przeglądarki. Aby zapobiec rozciągnięciu się naszego przykładu, dodaj ten fragment kodu align="start" do znacznika window.
    Przykład <tt>findfile.xul</tt>

    Dodajmy kod do pliku <tt>findfile.xul</tt>, który utworzyliśmy w poprzednim artykule. Kod musi być wstawiony pomiędzy znacznikami window. Fragment kodu zaznaczony na czerwono dodajmy do naszego przykładu:

    <?xml version="1.0"?>
    <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    <window
       id="findfile-window"
       title="Znajdź pliki"
       orient="horizontal"
       xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    
       <button id="find-button" label="Znajdź"/>
       <button id="cancel-button" label="Anuluj"/>
    
    </window>
    
    grafika:buttons2.png
    Dodany został również przycisk <tt>Anuluj</tt>. Ponieważ w oknie została określona orientacja pozioma, oba przyciski umieszczone są obok siebie. Jeśli otworzymy plik z przykładowym kodem w przeglądarce Mozilla, powinniśmy otrzymać podobne okno do obrazka z boku.
    Nie powinno się umieszczać etykiety bezpośrednio w pliku XUL. Zamiast tego powinniśmy używać encji, aby tekst mógł być łatwo tłumaczony.

    W następnym temacie nauczymy się umieszczać w oknie etykiety i obrazki.

    Zobacz także Dodatkowe możliwości przycisku

    Autorzy i etykiety dokumentu

    Contributors to this page: Takenbot, Wie wior, teoli, Witia, gandalf, Mgjbot, Ptak82
    Ostatnia aktualizacja: teoli,