Home Back

egovframework

Panel Widget

Panel Widget은 화면의 오른쪽 또는 왼쪽의 보이지 않는 공간을 활용하는 컴포넌트로 네비게이션, 폼 등으로 사용할 수 있다.

기본코드

Panel Widget의 기본코드는 <div data-role="panel" id="[panelwidget ID]">를 사용한다.

Panel Widget으로 사용할 <div data-role="panel"> ~ </div> 영역은 해당 페이지의 Header, Content Footer과 같은 레벨에 추가해야한다.

    Panel Widget
  • <div data-role="page">

    <!-- panel widget-->
    <div data-role="panel" id="[panelwidget ID]">
    <!-- panel content goes here -->
    </div>

    <!-- header -->
    <!-- content -->
    <a href="#[panelwidget ID]" data-role="button"> Panel Widget </a>
    <!-- footer -->
    </div>

Panel Widget 열기

페이지 내부 링크를 통해 Panel Widget을 열 수 있다.

  • <a href="#[panelwidget ID]" data-role="button"> Panel Widget </a>

Panel Widget 닫기

Panel Widget은 Panel Widget을 열었을 경우, 원래의 페이지 영역을 선택(클릭)하거나 ESC키를 눌러서 패널을 닫을 수 있다.

또 영역 내에 data-rel="close"가 추가된 Link를 추가하여 Panel Widget를 닫을 수 있다.
이 때 링크에는 패널을 열었던 영역의 ID를 href값으로 지정하는 것이 좋다.
예를 들어, ID가 myheader인 Header에서 버튼을 클릭하여 Panel Widget을 열었다면
Panel Widget을 닫기 위한 링크의 href값을 '#myheader'로 지정한다.

  • <a href="" data-role="button" data-rel="close"> Close Panel Widget </a>

디스플레이 방식 변경

Panel Widget을 화면에 활성화 시키는 디스플레이 방식을 변경할 때는 data-display="[reveal, overlay, push]"를 추가한다.
Attribute를 추가하지 않을 경우 기본 디스플레이 방식은 reveal이다.

Reveal Overlay Push
  • <div data-role="panel" data-display="reveal" id="revealExample"> Overlay Example </div>
    <div data-role="panel" data-display="overlay" id="overlayExample"> Overlay Example </div>
    <div data-role="panel" data-display="push" "id="pushExample"> Push Example </div>

디스플레이 방향 변경

Panel Widget은 왼쪽에서 디스플레이 되는 것이 Default이다. 디스플레이 방향을 변경하려면 기본코드에 data-position="right" 을 추가한다.

Right Left
  • <div data-role="panel" data-position="right" id="displayRightExample"> Display Right Example </div>
    <div data-role="panel" id="displayLeftExample"> Display Left Example </div>

위치 고정

Panel Widget은 페이지의 스크롤 이벤트에 따라 같이 스크롤 된다.
또 페이지의 세로길이가 화면영역보다 넓을 때, Panel Widget을 열면 페이지도 맨위로 화면이 같이 움직일 수 있다.
페이지 영역의 스크롤에 관계없이 위치를 고정시키려면 기본코드에 data-position="right"을 추가한다.
Panel Widget 영역의 내용이 화면의 높이보다 길 경우 위치 고정을 사용할 수 없다.

Fixed Postion
  • <div data-role="panel" data-position="right" id="displayRightExample" data-position-fixed="true"> Display Right Example </div>

Copyright(c)2012 Ministry of Security and Public Administration.

Close menu

Reveal Example

Close menu

Overlay Example

Close menu

Push Example

Close menu

Display Right Example

Close menu

Display Left Example

Close menu

Fixed Position Example