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' 함수를 지정하여 지정하여 사용한다.
- Overlay
- 이벤트 링크에 대한 부가 설명 등을 할 때 사용되며 해당 'jOverlay' 함수를 사용하며 이벤트가 걸리면 사라진다.
- Alert
- 알림 창이며 'jAlert' 함수를 이용하며 확인 버튼을 누르면 창이 사라진다.
- confirm
- 확인 창이며 jConfirm 함수를 이용하며 확인 또는 닫기 버튼을 누르면 창이 사라진다..
- prompt
- 문자를 입력할 수 있는 창이 나타나며 'jPrompt' 함수를 이용, 확인 버튼을 누르면 문자가 입력된다.
- 색상 변경
- 기타 Dialog는 색상을 변경 할 수 있는 문자를 입력 받을 수 있으며 세번째 파마리터로 색상을 지정 할 수 있다.
또한 색상 파라미터는 총 7가지 색상을 지원하며 null 값이 입력 되는 경우 상위 테마를 적용한다.