Panel Widget은 화면의 오른쪽 또는 왼쪽의 보이지 않는 공간을 활용하는 컴포넌트로 네비게이션, 폼 등으로 사용할 수 있다.
Panel Widget의 기본코드는 <div data-role="panel" id="[panelwidget ID]">를 사용한다.
Panel Widget으로 사용할 <div data-role="panel"> ~ </div> 영역은 해당 페이지의 Header, Content Footer과 같은 레벨에 추가해야한다.
페이지 내부 링크를 통해 Panel Widget을 열 수 있다.
Panel Widget은 Panel Widget을 열었을 경우, 원래의 페이지 영역을 선택(클릭)하거나 ESC키를 눌러서 패널을 닫을 수 있다.
또 영역 내에 data-rel="close"가 추가된 Link를 추가하여 Panel Widget를 닫을 수 있다.
이 때 링크에는 패널을 열었던 영역의 ID를 href값으로 지정하는 것이 좋다.
예를 들어, ID가 myheader인 Header에서 버튼을 클릭하여 Panel Widget을 열었다면
Panel Widget을 닫기 위한 링크의 href값을 '#myheader'로 지정한다.
Panel Widget을 화면에 활성화 시키는 디스플레이 방식을 변경할 때는 data-display="[reveal, overlay, push]"를 추가한다.
Attribute를 추가하지 않을 경우 기본 디스플레이 방식은 reveal이다.
Panel Widget은 왼쪽에서 디스플레이 되는 것이 Default이다. 디스플레이 방향을 변경하려면 기본코드에 data-position="right" 을 추가한다.
Panel Widget은 페이지의 스크롤 이벤트에 따라 같이 스크롤 된다.
또 페이지의 세로길이가 화면영역보다 넓을 때, Panel Widget을 열면 페이지도 맨위로 화면이 같이 움직일 수 있다.
페이지 영역의 스크롤에 관계없이 위치를 고정시키려면
기본코드에 data-position="right"을 추가한다.
Panel Widget 영역의 내용이 화면의 높이보다 길 경우 위치 고정을 사용할 수 없다.
Reveal Example
Overlay Example
Push Example
Display Right Example
Display Left Example
Fixed Position Example