jQuery Mobile - 다이얼로그

Dialog

앵커 링크에 data-rel=”dialog” 속성을 추가하면 링크로 호출되는 페이지를 대화상자(dialog) 형태로 표현할 수 있습니다. 대화상자 속성이 적용되면, 프레임웍은 둥그스런 모서리 스타일을 추가하고, 페이지 마진을 조정하고, 배경에 그림자 효과를 넣어 볼록하게 보여줍니다.

위의 링크 버튼에 아래와 같이 다이얼로그 속성을 추가하면 다음과 같이 페이지가 다이얼로그로 보여집니다.
<a href="JQM page6-1.html" data-role="button"  data-rel="dialog">Open dialog</a>

아래는 다이얼로그 속성이 없을때 일반 페이지입니다. 다이얼로그 속성 있을때와 비교해보세요.

Transitions

기본적으로 다이얼로그는 ‘pop’ 효과로 페이지가 열리게 됩니다.
링크 태그에 다이얼로그 속성과 함께 data-transition 속성을 추가 하여 전환효과를 설정할수 있습니다.
(전환효과에 대한 내용은 Page transitions 글을 참조하세요)

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

Closing dialogs

다이얼로그내의 다른 링크가 클릭되면, 프레임웍은 자동적으로 다이얼로그를 닫고 요청받은 페이지로 페이지이동을 합니다.
다이얼로그 내에 취소 버튼을 만들기 위해서는 간단히 링크 태그를 추가하고 data-rel=”back” 속성을 추가합니다.
자바스크립트로 링크를 만들 때는 간단하게 href속성값으로 “#”을 셋팅하고 data-rel=”back”속성을 사용하면 됩니다. 또한, 다이얼로그의 close() 함수를 호출하여 닫기도 가능합니다. 예를 들면, $(‘.ui-dialog’).dialog(‘close’) 와 같이 사용도 가능합니다.

Option 이나 data 속성을 통해서 다이얼로그의 닫기 버튼에 문구를 셋팅할수 있습니다.
Option은 Mobileinit 이벤트를 바인딩하고, $.mobile.dialog.prototype.options.closeBtnText 프로퍼티에 문구를 셋팅함으로 모든 다이얼로그들에 설정되어 집니다.
또는, 태그에 data=close-btn-text 속성을 설정하여 문구를 셋팅하는 방법이 있습니다.


History & Back button behavior

다이얼로그 페이지는 브라우저의 히스토리에 남지 않습니다. 때문에, 브라우저에서 제공하는 뒤로가기 버튼을 클릭하여도 다이얼로그 페이지로 가지않고 다이얼로그를 호출하는 첫 페이지로 가게 됩니다.

Styling & theming

다이얼로그 페이지에도 태마를 적용할 수 있습니다. page태그내에 header 태그나 content 태그에 적용하면 됩니다.
위에서 본 예제의 content 태그에 테마 e를, 이전 페이지로 가는 버튼은 테마 b를 적용해보면 아래처럼 보여집니다.