Home Back

egovframework

Popup Widget

Popup Widget은 툴팁이나 사진 등을 팝업화면으로 출력할 수 있는 컴포넌트이다.

기본코드

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

Panel Widget으로 사용할 <div data-role="popup"> ~ </div> 영역은 해당 페이지 안에 존재해야한다..

    Popup Widget

    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이 추가된다.

    No padding Popup Widget
    Add Padding Popup Widget

    No padding Popup Widget

    Add Padding Popup Widget

  • <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
    Close

    Popup Widget 오른쪽 닫기 버튼이 적용된다.

    Close

    Popup Widget 왼쪽에 닫기 버튼이 적용된다.

    Close

    Popupup Widget의 닫기 버튼 이외의 닫기입력을 방지한다.

  • <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 속성을 사용하여 화면 전환효과를 적용할 수 있다.

No transition Pop Fade Flip Turn Flow Slide Slidefade Slide up Slide down

data-tansition 속성을 이용하여 화면전환 효과를 적용한다.

  • <a href="#transitionExample" data-transition="none" data-role="button" data-rel="popup">No transition</a>
    <a href="#transitionExample" data-transition="pop" data-role="button" data-rel="popup">Pop</a>
    <a href="#transitionExample" data-transition="fade" data-role="button" data-rel="popup">Fade</a>
    <a href="#transitionExample" data-transition="flip" data-role="button" data-rel="popup">Flip</a>
    <a href="#transitionExample" data-transition="turn" data-role="button" data-rel="popup">Turn</a>
    <a href="#transitionExample" data-transition="flow" data-role="button" data-rel="popup">Flow</a>
    <a href="#transitionExample" data-transition="slide" data-role="button" data-rel="popup">Slide</a>
    <a href="#transitionExample" data-transition="slidefade" data-role="button" data-rel="popup">Slidefade</a>
    <a href="#transitionExample" data-transition="slideup" data-role="button" data-rel="popup">Slide up</a>
    <a href="#transitionExample" data-transition="slidedown" data-role="button" data-rel="popup">Slide down</a>

    <div data-role="popup" id="transitionExample" class="ui-content" data-theme="d">
    <p>data-tansition 속성을 이용하여 화면전환 효과를 적용한다.</p>
    </div>

테마 적용

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>

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