mozilla
Wyniki wyszukiwania

    Pudełko kart

    W oknie właściwości często występują strony z kartami. W tym artykule dowiemy się, jak je zrobić.

    Pudełko kart

    Pudełka kart zazwyczaj stosujemy w aplikacjach i w oknach właściwości. Seria kart dostępna jest u góry okna i umieszczona wzdłuż niego. Użytkownik może kliknąć każdą z tych kart i zobaczyć ustawienia różnych opcji. Jest to bardzo użyteczne rozwiązanie w przypadku, gdy mamy więcej opcji niż miejsca w jednym oknie.

    XUL dostarcza metod do utworzenia takiego okna dialogowego. Można przy tym użyć pięć nowych elementów, z których każdy jest omówiony pokrótce poniżej:

    tabbox
    Pudełko zewnętrzne, które zawiera karty przez całą swoją górę i osobne strony kart.
    tabs
    Pudełko wewnętrzne, które stanowi pojedynczą kartę. Innymi słowami, jest to wiersz kart.
    tab
    Określona karta. Kliknij w kartę, aby pojawiła się ona jako pierwsza strona.
    tabpanels
    Kontener dla strony.
    tabpanel
    Ciało pierwszej strony. Za pomocą tego elementu możemy umieścić zawartość dla strony karty. Pierwszy tabpanel zostanie przypisany do pierwszej karty, drugi do drugiej i tak dalej z pozostałymi przypisaniami.

    tabbox jest zewnętrznym elementem. Składa się z dwóch potomków, elementu tabs, który określa wiersz kart oraz elementu tabpanels, który składa się ze stron karty.

    Poniżej pokazana została ogólna składnia pudełka kart:

    <tabbox id="tablist">
      <tabs>
        <!-- elementy tab będą tu -->
      </tabs>
      <tabpanels>
        <!-- elementy tabpanel będą tu -->
      </tabpanels>
    </tabbox>
    

    Elementy tab są umieszczone wewnątrz elementów tabs, które są bardziej jak regularne pudełka. Element tabs sam został umieszczony w elemencie tabbox. Element tabbox także składa się z elementu tabpanels, który będzie dostępny poniżej karty stosowanej do orientacji poziomej wokół pudełka kart.

    element which will appear below the tabs due to the vertical orientation on the whole tabbox. [hmm troche to dziwne, musze spr. to (ptaszor)]

    Naprawdę to tu nic specjalnego nie ma o elementach karty, które by tworzyły inne elementy poza pudełkami kart. Tak jak pudełka, karty także składają się z jakiś elementów. Różnica jest taka, że karty renderują nieco inaczej swoją treść i tylko jeden panel treści karty/kart jest widoczny w danym momencie, coś jak deck.

    Treść pojedynczej strony karty powinna być wewnątrz każdego elementu tabpanel. Nie powinna zostać umieszczona w elemencie tab, gdyż znajdowałby się tam, gdzie treść karty jest wyświetlana wzdłuż góry.

    Każdy element tabpanels staje się stroną wyświetloną na pudełku karty. Pierwszy panel powiązany jest z pierwszą kartą, drugi z drugą kartą i tak dalej. Jest to związek jeden-na-jeden pomiędzy elementem tab i elementem tabpanel.

    Kiedy decydujemy o rozmiarze tabbox, to zastosowany zostanie największy możliwy rozmiar. Znaczy to tyle, że, jeśli będzie dziesięć pól tekstowych na jednej karcie i tylko jedno na kolejnej, strona będzie dopasowana rozmiarem do jednej z dziesięciu na niej występujących. Obszar wzięty przez obszar nowej karty nie zmieni się, kiedy użytkownik stworzy nową stronę karty.

    Spójrz na poniższy przykład:

    Przykład tabbox

    Źródła Podgląd

    grafika:tabpanel1.png
    <tabbox>
      <tabs>
        <tab label="Poczta"/>
        <tab label="Nowości"/>
      </tabs>
      <tabpanels>
        <tabpanel id="mailtab">
          <checkbox label="Automatycznie sprawdź pocztę"/>
        </tabpanel>
        <tabpanel id="newstab">
          <button label="Wyczyść bufor nowości"/>
        </tabpanel>
      </tabpanels>
    </tabbox>
    


    Tutaj zostały dodane dwie karty, pierwsza z etykietą <tt>Poczta</tt> oraz druga z etykietą <tt>Nowości</tt>. Kiedy użytkownik kliknie kartę 'Poczta', to zostanie wyświetlona zawartość pierwszej karty. W tym przypadku strona będzie dostępna z etykietą pola wyboru <tt>Automatycznie sprawdź pocztę</tt>. Kiedy klikniemy w drugą kartę, strona będzie zawierała przycisk z etykietą <tt>Wyczyść bufor nowości</tt>.

    Obecnie zaznaczony element tab posiada dodatkowy atrybut selected, który jest ustawiony na wartość true. Ta przeróbka wyglądu aktualnie zaznaczonej karty tworzy ją jakby była zaznaczona. W jednym momencie tylko jedna karta może posiadać wartość true tego atrybutu.

    Rozmieszczenie kart

    Kończąc, możemy zmienić pozycję kart, więc będzie dostępne na jakiejkolwiek stronie karty. Nie ma jakiejś specjalnej składni do zrobienia tego. Możemy w prosty sposób ustawić atrybuty orient oraz dir jako atrybuty wymagane. Pamiętaj, że elementy kart są bardzo regularnymi polami w obszarze graficznym strony. Oprócz tego element tabbox jest bardzo podobny do regularnych kontenerów pola z domyślną pionową orientacją, gdzie element tabs jest bardzo podobny do kontenerów pola z domyślną orientacją w poziomie.

    Na przykład, umieść karty wzdłuż lewej strony, zmień orientację elementu tabs na pionową, aby utworzyć karty dostępne na poziomym stosie. Następnie uporządkuj tabbox, więc niech posiada orientację poziomą. Utworzona zostanie karta dostępna z lewej strony karty (nie powyżej). Zwróć uwagę, że ta zmiana orientacji elementu tabpanels nie będzie miała żadnego efektu do momentu, aż strony kart są ułożone jedna na drugiej.

    Możemy wstawić karty po prawej lub u dołu strony poprzez przeniesienie elementu tabs za element tabpanels w twoim kodzie. Po kolei możemy ustawiać atrybut dir na atrybut reverse w tabbox. Jednakże powinieneś prawdopodobnie zostawić kartę na górze, w innym przypadku może nie wyglądać za dobrze w określonym motywie.

    Dodawanie karty do okna <tt>Znajdź pliki</tt>

    Dodajmy drugą kartę do okna dialogowego <tt>Znajdź pliki</tt>. Utworzymy kartę <tt>Opcje</tt> (oraz zaznaczymy ją jako domyślną do wyświetlenia), która będzie składać się z kilku opcji służących do szukania. Może to nie jest najlepszy interfejs, aby to wykonać, ale użyjemy go, aby zademonstrować karty. Etykieta na górze karty i pudełko kryteriów szukania będzie nam potrzebne do zrobienia pierwszej karty. Dodajmy także kilka opcji do kolejnej karty. Pasek postępu i przyciski zostały w oknie głównym, na zewnątrz kart.

    <vbox flex="1">
    
    <tabbox selectedIndex="1">
      <tabs>
        <tab label="Szukaj"/>
        <tab label="Opcje"/>
      </tabs>
    
      <tabpanels>
       <tabpanel id="searchpanel" orient="vertical">
    
        <description>
          Wpisz poniżej swoje kryteria szukania i naciśnij przycisk Znajdź, 
          aby rozpocząć szukanie.
        </description>
    
        <spacer style="height: 10px"/>
    
        <groupbox orient="horizontal">
          <caption label="Kryteria szukania"/>
    
          <menulist id="searchtype">
            <menupopup>
              <menuitem label="Nazwa"/>
              <menuitem label="Rozmiar"/>
              <menuitem label="Data modyfikacji"/>
            </menupopup>
          </menulist>
          <spacer style="width: 10px;"/>
          <menulist id="searchmode">
            <menupopup>
              <menuitem label="Jest"/>
              <menuitem label="Nie jest"/>
            </menupopup>
          </menulist>
    
          <spacer style="height: 10px"/>
          <textbox id="find-text" flex="1" style="min-width: 15em;"/>
    
        </groupbox>
       </tabpanel>
    
       <tabpanel id="optionspanel" orient="vertical">
        <checkbox id="casecheck" label="Wyszukuj szczegółowo"/>
        <checkbox id="wordscheck" label="Dopasuj całą nazwę"/>
       </tabpanel>
    
     </tabpanels>
    </tabbox>
    
    grafika:tabpanel2.png

    Elementy karty są umieszczone wokół głównej treści okna. Możemy zobaczyć dwie karty <tt>Szukaj</tt> oraz <tt>Opcje</tt>. Kliknięcie na którejś wywoła pokazanie się jednej ze stron wspomnianych kart. Pierwsza karta wygląda lepiej niż wyglądała wcześniej, poza kartami wzdłuż góry.


    Przykład: <tt>Znajdź pliki</tt>

    Źródła Podgląd

    Następnie, zobaczymy jak się tworzy zawartość siatki.

    Autorzy i etykiety dokumentu

    Contributors to this page: Ptak82, Witia, teoli, Cnr roxx, Mgjbot
    Ostatnia aktualizacja: teoli,