mozilla
검색 결과

    Scrolling Menus

     

    이번 단원에서는 스크롤 메뉴와 스크롤 기능의 사용 방법에 대해 알아보겠습니다.

    큰 메뉴 만들기

    화면에 다 넣을수 없을만큼 많은 명령을 가진 메뉴를 작성하면 어떻게 될지 궁금하실 것입니다. Mozilla에서는 이런 경우를 위해 항목이 스크롤되는 기능을 제공합니다.

    Image:menuscroll1.png

    만약 사용할 수 있는 공간이 모자라면 메뉴의 양 끝에 화살표가 나타납니다. 이 때 마우스를 화살표 위에 갖다 대면 메뉴가 위, 아래로 스크롤됩니다. 공간이 충분하다면 화살표는 나타나지 않습니다. 이 때 주의할 것은 스크롤의 작동 방식은 테마에 따라 다르다는 것입니다.

    스크롤 기능은 자동으로 실행됩니다. 따라서 스크롤 메뉴를 만들기 위해 다른 것을 건드릴 필요는 없습니다. 스크롤 기능은 menubar, popup, menulist에 있는 메뉴에 적용됩니다. 이 기능은 arrowscrollbox 요소를 이용하여 구현됩니다. arrowscrollbox 요소는 화살표가 있는 스크롤 상자를 만들 때도 사용할 수 있습니다.

    arrowscrollbox 요소는 일반 상자가 사용될 수 있는 곳 어디서나 사용될 수 있습니다. 꼭 메뉴에만 사용해야 하는 것은 아닙니다. arrowscrollbox 요소는 항상 세로 상자이며 어떤 요소든 포함할 수 있습니다. 여러분은 드롭다운이 아닌 목록을 구현하기 위해 arrowscrollbox 요소를 사용할 수도 있습니다.

    예제 - 스크롤되는 버튼 목록

    아래는 스크롤할 수 있는 버튼 목록을 만드는 방법을 보여주는 예제입니다(화살표를 보려면 창을 줄여야 할것입니다).

    예제 1 : Source View

    <arrowscrollbox orient="vertical" flex="1">
      <button label="Red"/>
      <button label="Blue"/>
      <button label="Green"/>
      <button label="Yellow"/>
      <button label="Orange"/>
      <button label="Silver"/>
      <button label="Lavender"/>
      <button label="Gold"/>
      <button label="Turquoise"/>
      <button label="Peach"/>
      <button label="Maroon"/>
      <button label="Black"/>
    </arrowscrollbox>
    

    예제를 실행하면 전체 화면으로 표시될 것입니다. 하지만 창의 높이를 줄이면, 스크롤 화살표가 나타날 것입니다. 다시 창을 키우면 화살표가 사라질 것입니다.

    항상 화살표가 보이도록 하고 싶다면 arrowscrollbox에 CSS의 max-height 속성을 사용하여 크기를 제한하면 됩니다.

    arrowscrollbox는 주로 메뉴와 팝업에서 유용하게 사용됩니다.

    다음에는 XUL 요소에 이벤트 핸들러를 지정하는 방법에 대해 알아보겠습니다.

    문서 태그 및 공헌자

    태그: 
    Contributors to this page: teoli, Suguni
    최종 변경: teoli,