Przewijane menu

Artykuł ten opisuje przewijane menu oraz jak stosować mechanizm przewijania wraz z innymi elementami.

Tworzenie dużego menu

Zastanawialiście się, co by się stało, jeśli utworzylibyśmy menu wraz ze zbyt dużą ilością pozycji, które nie chcą się pomieścić w oknie? Mozilla dostarczyła mechanizm przewijania, który pozwala na przewijanie poprzez swoje pozycje w oknie.

Jeśli w menu zabraknie dostępnej wolnej przestrzeni w oknie menu, to automatycznie pojawią się na obu jego końcach strzałeczki. Jeśli najedziesz kursorem myszki na którąkolwiek strzałkę, to menu zostanie przewinięte w dół albo w górę. Jeśli natomiast jest więcej dostępnego miejsca, a menu się mieści w oknie, to strzałki nie zostaną wyświetlone. Zwróć uwagę, że pojawienie się strzałek zależy od aktualnie zastosowanego motywu.

Powyższe zachowanie jest wywoływane automatycznie. Nie musimy nic więcej robić, aby pojawił się on w przewijanym menu. Znajdzie on zastosowanie do menu w pasku narzędzi, w wyskakujących okienkach lub listach menu. Zaimplementowany zostanie poprzez element arrowscrollbox. Ten element może być zastosowany do utworzenia przewijanego pudełka, posiadającego strzałki.

Element arrowscrollbox możemy zastosować gdziekolwiek w regularnym pudełku. Nie musisz go stosować do menu. Jest on zawsze pionowym pudełkiem i może być wewnątrz niego umieszczony dowolny element. Możemy go zastosować do implementacji listy, kiedy nie chcemy tworzyć listy za pomocą listy rozwijanej.

Poniższy przykład pokazuje, jak stworzyć przewijaną listę przycisków (aby zobaczyć strzałki przewijania, należy zminimalizować okno z poniższym przykładem):

Przykład - przewijana lista przycisków

Źródła Podgląd

<arrowscrollbox orient="vertical" flex="1">
  <button label="Czerwony"/>
  <button label="Niebieski"/>
  <button label="Zielony"/>
  <button label="Żółty"/>
  <button label="Pomarańczowy"/>
  <button label="Srebrny"/>
  <button label="Lawendowy"/>
  <button label="Złoty"/>
  <button label="Turkusowy"/>
  <button label="Brzoskwiniowy"/>
  <button label="Bordowy"/>
  <button label="Czarny"/>
</arrowscrollbox>

Chcąc zobaczyć działanie przykładu, najpierw otwórz zmaksymalizowanie okno wraz z powyższym przykładem. Następnie zmniejsz rozmiar okna, co spowoduje pojawienie się strzałek umożliwiających przewijanie listy przycisków. Ponowne zmaksymalizowanie tego samego okna spowoduje, iż strzałki znikną.

Możemy ustawić własność CSS max-height dla elementu arrowscrollbox, aby ograniczyć rozmiar pola przewijania, co spowoduje wyświetlenie się strzałek, które będą dostępne przez cały czas.

Element arrowscrollbox jest użyteczny głównie w menu i czasem w okienkach wyskakujących.

W następnym artykule pokażemy, jak dodać obsługę zdarzeń do elementów XUL.