More Menu Features

 

이번 단원에서는 하위 메뉴와 체크 메뉴를 만드는 방법을 알아 보겠습니다.

하위 메뉴 만들기

여러분은 기존에 있는 요소들을 사용하여 다른 메뉴 내에 있는 서브메뉴(중첩 메뉴)를 만들 수 있습니다. menupopup안에는 어떤 요소든 넣을 수 있다는 것을 기억해보세요. 지난 단원에서는 menupopup안에 menuitemmenuseparator를 넣는 방법을 알아 보았습니다. 그러나 여러분은 menupopup 요소내에 menu를 넣기만 하면 하위 메뉴를 만들 수 있습니다. 이것은 menu 요소가 꼭 메뉴바의 바로 아래에 있지 않더라도 유효한 것이기 때문에 동작하게 됩니다. 아래는 File 메뉴내에 간단한 하위 메뉴가 존재하는 예제입니다.

예제 1 : Source View

Image:menubar-ex3.png
<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menu id="new-menu" label="New">
          <menupopup id="new-popup">
            <menuitem label="Window"/>
            <menuitem label="Message"/>
          </menupopup>
        </menu>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

우리의 파일 찾기 예제에 메뉴 추가하기

이제 파일 찾기 대화창에 메뉴를 넣어 봅시다. 우리는 File 메뉴와 Edit 메뉴에 간단한 명령 몇 가지를 넣을 것입니다. 이 방법은 위의 예제와 비슷합니다.

<toolbox>

 <menubar id="findfiles-menubar">
  <menu id="file-menu" label="File" accesskey="f">
    <menupopup id="file-popup">
      <menuitem label="Open Search..." accesskey="o"/>
      <menuitem label="Save Search..." accesskey="s"/>  
      <menuseparator/>
      <menuitem label="Close" accesskey="c"/>
    </menupopup>
  </menu>
  <menu id="edit-menu" label="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem label="Cut" accesskey="t"/>
      <menuitem label="Copy" accesskey="c"/>
      <menuitem label="Paste" accesskey="p" disabled="true"/>
    </menupopup>
  </menu>
 </menubar>

<toolbar id="findfiles-toolbar>
Image:menubar1.png

여기서 여러개의 명령을 가진 두 개의 메뉴를 만들었습니다. 툴박스 내에 어떻게 메뉴바가 추가되었는지를 유심히 보세요. Open Search와 Save Search 뒤에 불은 세 개의 점은 사용자가 해당 명령을 선택할 때 대화창이 열릴것이라는 것을 알려주는 일반적인 방법입니다. 각 메뉴와 메뉴 항목에는 접근글쇠(Access key)가 지정되어 있습니다. 그림을 보면 지정된 글자가 메뉴 제목에 밑줄로 표시된 것을 알 수 있습니다. 또 붙이기(Paste) 명령은 현재 사용불가 상태입니다. 우리는 아무 것도 붙일 것이 없다고 가정할 것입니다.

지금까지의 파일 찾기 예제 : Source View

메뉴에 체크 표시 넣기

많은 프로그램들에서는 체크할 수 있는 메뉴를 사용합니다. 예를 들어 현재 사용하고 있는 기능은 명령 옆에 체크가 있고 그렇지 않은 기능은 체크가 없는 메뉴 같은 것입니다. 사용자가 메뉴를 선택하면 체크 상태가 바뀝니다. 또 메뉴 항목에 라디오 버튼을 넣고 싶을 때도 있을 것입니다.

체크 메뉴를 만드는 방법은 checkboxradio를 만드는 방법과 비슷합니다. 이를 위해서는 두 개의 속성이 필요한데, type 속성은 체크의 형식을 지정할 때, name 속성은 관련된 명령을 하나로 묶을 때 사용합니다. 아래는 체크 항목을 가진 메뉴를 만드는 예제입니다.

예제 2 : Source View

<toolbox>
  <menubar id="options-menubar">
    <menu id="options_menu" label="Options">
      <menupopup>
        <menuitem label="Make Backups" type="checkbox"/>
        <menuitem label="Email Administrator" type="checkbox" checked="true"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

메뉴 항목이 체크될 수 있도록 type 속성이 추가되었습니다. 해당 속성값을 checkbox로 설정하면 메뉴 항목을 클릭할 때마다 체크가 설정/해제됩니다.

라디오버튼이 있는 메뉴

일반 체크 외에도 type 속성의 값을 radio로 지정하면 라디오 형식의 체크를 만들 수 있습니다. 라디오 체크는 한 그룹의 메뉴 항목 중 하나만 선택할 수 있도록 만들 때 사용됩니다. 예를 들면 한번에 하나의 글꼴만 선택할 수 있는 글꼴 메뉴 같은 것입니다. 이 때 다른 항목이 선택되면 이전에 선택되었던 항목은 체크가 해제됩니다.

여러 개의 메뉴 항목을 하나의 그룹으로 묶을 때는 각 메뉴 항목의 name 속성을 같은 값으로 지정하면 됩니다. 아래 예제를 보겠습니다.

예제 3 : Source View

<toolbox>
  <menubar id="planets-menubar">
    <menu id="planet-menu" label="Planet">
      <menupopup>
        <menuitem id="jupiter" label="Jupiter" type="radio" name="ringed"/>
        <menuitem id="saturn" label="Saturn" type="radio" name="ringed" checked="true"/>
        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
        <menuseparator/>
        <menuitem id="earth" label="Earth" type="radio" name="inhabited" checked="true"/>
        <menuitem id="moon" label="Moon" type="radio" name="inhabited"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

예제를 실행시키면, 처음 세 개의 메뉴 항목 중 한 가지만 선택할 수 있다는 것을 알게 될 것입니다. 이 메뉴 항목들은 모두 동일한 name 속성값을 가지고 있기 때문에 하나의 그룹으로 엮인 것입니다. 마지막 메뉴 항목인 Earth는 라디오 메뉴이지만 name 속성값이 다르기 때문에 그 무리에 속하지 않습니다.

물론 하나의 그룹 항목들은 모두 동일한 메뉴 안에 있어야 합니다. 꼭 붙어 있어야 할 필요는 없지만, 상식적으로 생각할 때 서로 붙어 있는 것이 좋을 것입니다.

다음 단원에서는 팝업 메뉴를 작성하는 방법에 대해 알아보겠습니다.

문서 태그 및 공헌자

태그: 
 이 페이지의 공헌자: teoli, Suguni
 최종 변경: teoli,