Home Back

egovframework

Menu

모바일 Page의 메뉴 기능은 Dialog, Grid, List, Collapsible 의 기능을 활용하여 구현할 수 있다.

Dialog 형식

링크에 data-rel="dialog" 및 data-transition="slide, slideup, slidedown, pop, fade, flip, turn, flow, slidefade" 속성을 추가하여 다이얼 로그의 효과적인 표출 효과를 사용 할 수 있다.
※dialog 형식의 메뉴는 UX Dialog Component 유의 사항을 참고한다.

  • <ul data-role="listview" data-inset="true">
  • <li data-role="list-divider">Menu</li>
  • <li><a href="#menu1" data-rel="dialog" data-transition="slide">표준프레임워크 개요</a></li>
  • <li><a href="#menu2" data-rel="dialog" data-transition="slidedown">다운로드</a></li>
  • <li><a href="#menu3" data-rel="dialog" data-transition="slideup">가이드</a></li>
  • <li><a href="#menu4" data-rel="dialog" data-transition="pop">자료실</a></li>
  • <li><a href="#menu5" data-rel="dialog" data-transition="fade">개발자 지원</a></li>
  • <li><a href="#menu6" data-rel="dialog" data-transition="flip">오픈 커뮤니티</a></li>
  • </ul>

Grid 형식

비슷한 레벨의 콘텐츠를 아이콘화 하여 여러 개 배치하여 사용하며, 메뉴 정렬 순서는 좌측에서 우측, 위에서 아래 방향으로 배치한다.

개요
다운로드
가이드
자료실
개발자
커뮤니티
  • <div class="ui-grid-b">
  • <div class="ui-block-a"><a href="" data-role="button" data-theme="a">개요</a></div>
  • <div class="ui-block-b"><a href="" data-role="button" data-theme="b">다운로드</a></div>
  • <div class="ui-block-c"><a href="" data-role="button" data-theme="c">가이드</a></div>
  • <div class="ui-block-a"><a href="" data-role="button" data-theme="d">자료실</a></div>
  • <div class="ui-block-b"><a href="" data-role="button" data-theme="e">개발자</a></div>
  • <div class="ui-block-c"><a href="" data-role="button" data-theme="g">커뮤니티</a></div>
  • </div>

Accordion 형식

텍스트 형식의 메뉴표현으로 메뉴 목록을 접고 펼치는 방식을 적용하며, 하나의 화면에서 레벨이 다른 메뉴간 바로 이동이 가능하다.
* 화면에서 메뉴가 차지하는 영역이 크므로 보통 첫 화면에만 제공되는 편이다.

  • <div data-role="collapsible-set">
  • <div data-role="collapsible">
  • <h3>전자정부 표준프레임워크 개요</h3>
  • <ul data-role="listview" data-inset="true" data-theme="d">
  • <li><a href="#">소개</a></li>
  • <li><a href="#">구성</a></li>
  • <li><a href="#">아키텍쳐</a></li>
  • <li><a href="#">라이선스</a></li>
  • <li><a href="#">추진성과 및 적용사례</a></li>
  • <li><a href="#">찾아오시는 길</a></li>
  • </ul>
  • </div>
  • <div data-role="collapsible" data-collapsed="true">
  • <h3>다운로드</h3>
  • <ul data-role="listview" data-inset="true" data-theme="d">
  • <li><a href="#">실행환경</a></li>
  • <li><a href="#">개발환경</a></li>
  • <li><a href="#">운영환경</a></li>
  • <li><a href="#">공통컴포넌트 목록</a></li>
  • <li><a href="#">공통컴포넌트 맵</a></li>
  • <li><a href="#">공유서비스 맵</a></li>
  • </ul>
  • </div>
  • ....
  • </div>

List 형식

각 메뉴마다 하위 콘텐츠를 대표하는 성격의 레이블이나 아이콘을 제공하며, 추가 메뉴에 대한 공간 제약이 덜하므로 확장성이 좋다.
각각의 메뉴는 상세 화면으로의 이동을 의미하는 시작적인 단서를 제공하거나 터치를 유도할 수 있도록 버튼 스타일로 제공하는 것이 바람직하다.
* Nested List형식의 경우 jQuery Mobile v1.3에서 deprecated되었고, v1.4에서 제거 되어서 현재는 사용할수 없는 기능이다.

  • <ul data-role="listview">
  • <li>
  • <h3>프레임워크 개요</h3>
  • <p>전자정부 표준프레임워크의 전체적인 개요를 살펴보실 수 있습니다.</p>
  • <ul>
  • <li><a href="#">소개</a></li>
  • <li><a href="#">구성</a></li>
  • <li><a href="#">아키텍쳐</a></li>
  • <li><a href="#">라이선스</a></li>
  • <li><a href="#">추진성과 및 적용사례</a></li>
  • <li><a href="#">찾아오시는 길</a></li>
  • </ul>
  • </li>
  • <li>
  • <h3>다운로드</h3>
  • <p>실행환경, 개발환경, 공통컴포넌트의 개발자료 다운로드 서비스를 제공합니다.</p>
  • <ul>
  • <li><a href="#">실행환경</a></li>
  • <li><a href="#">개발환경</a></li>
  • <li><a href="#">운영환경</a></li>
  • <li><a href="#">공통컴포넌트 목록</a></li>
  • <li><a href="#">공통컴포넌트 맵</a></li>
  • <li><a href="#">공유서비스 맵</a></li>
  • </ul>
  • </li>
  • ....
  • </ul>

Copyright(c)2012 Ministry of Government Administration and Home Affairs.