Home Back

Dialog

기본 다이얼로그는 Anchor 링크가 있는 곳에 다이얼로그를 나타 낼수있으며 다이얼로그 속성이 지정되면 대화상자 효과를 나타내기 위하여 주위 여백이 어두운 배경으로 나타난다.

유의사항

Ajax로 도메인 내부링크를 연결 후 Dialog를 호출하면 정상페이지가 아닌 이전 페이지가 출력된다.
이를 방지 하기 위해 첫 도메인 내부링크는 data-ajax="false" 또는 rel="external"를 선언하여 페이지를 호출한다.

예시보기

A.jsp

<a href="B.jsp" data-role="button" data-ajax="false">Go To 2nd Page</a>
<a href="B.jsp" data-role="button" rel="external">Go To 2nd Page</a>

B.jsp

<--main page start-->
<div data-role="page" id=main>
<div data-role="header" data-theme="b">
...
</div>
<div data-role="content">
<h1>This is #One</h1>
<a href="#sub" data-role="button" data-rel="dialog">Go to the #sub</a>
</div>
...
</div>
<--sub page start-->
<div data-role="page" id="sub">
...
</div>

기본 코드

다이얼로그를 새 창으로 전환 할 경우 팝업 효과 등으로 나타 낼 수 있으며 Anchor Tag에 data-rel="dialog"를 추가 하면 다이얼로그 효과가 나타난다.

Open dialog

<a href="/guide/components/back.do" data-rel="dialog" data-role="button">Open dialog</a>

효과 변경

기본 다이얼로그 효과는 팝업 효과 이며, 다른 전환 효과를 나타낼 경우 기본 코드에 data-transition="[slide, slideup, slidedown, pop, fade, flip]"를 넣어 준다.

slide slideup slidedown pop fade flip turn flow slidefade

<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="flip">flip</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="turn">turn</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
<a href="/guide/components/dialog/back.do" data-role="button" data-rel="dialog" data-transition="slidefade">slidefade</a>

기타 Dialog

기타 Dialog는 자바 스크립트를 이용하여 Alert, Confirm 등의 창을 띄운다. 아래 스크립트 코드를 EgovMobile.js와 jquery.mobile-1.1.1.js 사이에 선언하여 이벤트를 걸어 사용한다. 각 Dialog는 Dialog의 id값을 참조하여 스크립트가 실행된다.

Action sheet: 여러 선택창을 Dialog로 선택할 경우 사용되며 'jActionSheet' 함수를 지정하여 지정하여 사용한다.

you entered :

$("#actionsheet_dialog").click( function() {
var btmItem = [{id : 'button1', value: "커피"},
{id : 'button2', value: "사이다"},
{id : 'button3', value: "맥주"}];
jActionSheet('Can you make a choice?', 'Action sheet Dialog', 'a', btmItem , function(r) {
$('#actionsheetOut').text(r);
});
});

Overlay: 이벤트 링크에 대한 부가 설명 등을 할 때 사용되며 해당 'jOverlay' 함수를 사용하며 이벤트가 걸리면 사라진다.

$("#overlay_dialog").click( function() {
jOverlay('This is a Overbox', 'OverLay', 'a');
});

Alert: 알림 창이며 'jAlert' 함수를 이용하며 확인 버튼을 누르면 창이 사라진다.

$("#alert_dialog").click( function() {
jAlert('This is a custom alert box', 'Alert Dialog', 'a');
});

confirm: 확인 창이며 jConfirm 함수를 이용하며 확인 또는 닫기 버튼을 누르면 창이 사라진다..

$("#confirm_dialog").click( function() {
jConfirm('Can you confirm this?', 'Confirmation Dialog', 'a', function(r) {
});});

prompt: 문자를 입력할 수 있는 창이 나타나며 'jPrompt' 함수를 이용, 확인 버튼을 누르면 문자가 입력된다.