Popup Widget
Popup Widget은 툴팁이나 사진 등을 팝업화면으로 출력할 수 있는 컴포넌트이다.
기본코드
Popup Widget의 기본코드는 <div data-role="popup" id="[popupwidget ID]">를 사용한다.
Panel Widget으로 사용할 <div data-role="popup"> ~ </div> 영역은 해당 페이지 안에 존재해야한다..
Popup Widget
-
<div data-role="popup" id="[popupwidget ID]">
<Popup Widget>
</div>
<a href="#[popupwidget ID]" data-role="button" data-rel="popup"> Popup Widget </a>
Popup Widget Padding 추가
class="ui-content" 추가하면 Popup Widget 영역에 가장자리 영역으로 15px정도의 Padding이 추가된다.
-
<a href="#popupNoPaddingExample" data-role="button" data-rel="popup">
No padding Popup Widget
</a>
<a href="#popupAddPaddingExample" data-role="button" data-rel="popup">
Add Padding Popup Widget
</a>
<div data-role="popup" class="ui-content" id="[popupwidget ID]">
<Popup Widget>
</div>
<div data-role="popup" class="ui-content" id="[popupwidget ID]">
<Popup Widget>
</div>
Popup Widget 열기
Popup Widget은 data-rel="popup" 속성을 추가한 페이지 내부 링크를 통해 화면에 출력된다.
-
<a href="#[popupwidget ID]" data-role="button" data-rel="popup"> Panel Widget </a>
Popup Widget 닫기
Popup Widget은 Popup Widget을 열었을 때, Pupup 된 영역의 외부를 선택(클릭)하거나 ESC키를 눌러서 Pupup Widget을 닫을 수 있다.
또 Popup Widget 영역 내에 data-rel="back" 속성의 Link를 추가하여 Popup Widget에 닫기버튼을 추가하여 사용할 수 있으며
닫기버튼의 위치는 class="[ui-btn--left, ui-btn-right]로 지정할 수 있다.
링크로 추가된 닫기 버튼 이외의 닫기 방식을 사용하지 않으려면 Popup Widget 영역헤 data-dismissible="false" 속성을 추가한다.
Right close button
Left close button
Undismissible Popup
-
<a href="#popupWidgetCloseRight" data-rel="popup" data-role="button">
Right close button
</a>
<a href="#popupWidgetCloseLeft" data-rel="popup" data-role="button">
Left close button&
lt;/a>
<a href="#popupWidgetUndismissible" data-rel="popup" data-role="button">
Undismissible Popup
</a>
<div data-role="popup" id="popupWidgetCloseRight">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">
Close
</a>
<p>Popup Widget 오른쪽에 닫기 버튼이 적용된다.</p>
</div>
<div data-role="popup" id="popupWidgetCloseLeft">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">
Close
</a>
<p>Popup Widget 왼쪽에 닫기 버튼이 적용된다.</p>
</div>
<div data-role="popup" id="popupWidgetUndismissible" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">
Close
</a>
<p>Popupup Widget의 닫기 버튼 이외의 닫기입력을 방지한다.</p>
</div>
위치 변경
Popup Widget을 화면에 나타나는 위치를 변경할 때는 팝업을 열기 위한 링크에data-position-to="[window, origin, #target]"를 추가한다.
#target의 경우 지정한 링크나 객체의 ID 값로 지정하여 그 값을 가지는 영역에 Popup Widget를 출력한다.
'#target' Popup이 표시되는 영역
Window
Origin
#target
창의 가운데에 Popup Widget가 표시된다.
Popup Widget을 여는 Link에 Popup Widget가 표시된다.
id가 "target"인 영역에 Popup Widget가 표시된다.
-
<h4 id="target" align="center">
#target popup이 표시되는 영역
</h4>
<a href="#positionWindowExample" data-role="button" data-rel="popup" data-position-to="window">
Window
</a>
<a href="#positionOriginExample" data-role="button" data-rel="popup" data-position-to="origin">
Origin
</a>
<a href="#targetExample" data-role="button" data-rel="popup" data-position-to="#target">
#target
</a>
<div data-role="popup" id="positionWindowExample" class="ui-content" data-theme="a">
<p>창의 가운데에 Popup Widget가 표시된다.</p>
</div>
<div data-role="popup" id="positionOriginExample" data-theme="a">
<p>Popup Widget을 여는 Link에 Popup Widget가 표시된다.</p>
</div>
<div data-role="popup" id="targetExample" data-theme="a">
<p>id가 "target"인 영역에 Popup Widget가 표시된다.</p>
</div>
화면 전환
Popup Widget이 화면에 출력될 때 data-transition 속성을 사용하여 화면 전환효과를 적용할 수 있다.
테마 적용
Popup Widget의 테마적용은 data-theme와 data-overlay-theme 속성을 추가하여 적용할 수 있다.
data-theme 속성은 Popup Widget에 테마를 적용하기 위한 속성이며,
data-overlay-theme 속성은 Popup Widget 외부에 테마를 적용하기 위한 속성이다.
Theme
Overlay
Theme + Overlay
투명한 배경
그림자 없음
Popup Widget에 data-theme="e" 적용
Popup Widget에 data-overlay-theme="a" 적용
Popup Widget에 data-theme="e", data-overlay-theme="a" 적용
Popup Widget에 data-theme="none" 적용
Popup Widget에 data-shadow="false" 적용
-
<a href="#theme" data-rel="popup" data-role="button">Theme</a>
<a href="#overlay" data-rel="popup" data-role="button">Overlay</a>
<a href="#both" data-rel="popup" data-role="button">Theme + Overlay</a>
<a href="#transparent" data-rel="popup" data-role="button">투명한 배경</a>
<a href="#noShadow" data-rel="popup" data-role="button">그림자 없음</a>
<div id="theme" data-role="popup" data-theme="e">
<p>Popup Widget에 data-theme="e" 적용</p>
</div>
<div id="overlay" data-role="popup" data-overlay-theme="a">
<p>Popup Widget에 data-overlay-theme="a" 적용</p>
</div>
<div id="both" data-role="popup" data-theme="e" data-overlay-theme="a">
<p>Popup Widget에 data-theme="e", data-overlay-theme="a" 적용</p>
</div>
<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
<p>Popup Widget에 data-theme="none" 적용</p>
</div>
<div id="noShadow" data-role="popup" data-theme="e" data-shadow="false">
<p>Popup Widget에 data-shadow="false" 적용</p>
</div>