반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


*** Dialogs

Creating dialogs


page anchor link 에 data-rel="dialog" 속성을 추가하면 어느 페이지에서든지 dialog 화면을 display 할 수 있습니다. 이 dialog 속성이 적용되면 프레임워크는 rounded corner 로 표시하도록 style을 추가하고 페이지 둘레에 margin을 넣고 dialog 만 선명하게 보이도록 그 이외의 부분은 어두운 background로 처리합니다.

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


jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.


<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.







Transitions

디폴트로 dialog 는 pop transition으로 열릴겁니다. 다른 페이지들 처럼 이 dialog에도 다른 화면전환 효과를 적용할 수 있습니다. data-transition 속성을사용하세요. 그런데 이게 좀 더 dialog 화면처럼 보이도록 하려면 pop이나 slideup, flip 화면전환 효과를 사용하실 것을 권합니다.

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


jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.


<div>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
</div>


직접 보시려면 모바일에서 여기로 접속해서 보세요.


Closing dialogs

dialog안에 있는 아무 링크라도 click 되면은 프레임워크는 자동적으로 그 dialog를 닫고 해당 페이지로 화면을 전환합니다. cancel 버튼을 dialog 안에 넣고 싶은 경우 버튼을 만들고 링크에 data-rel="back"이라는 속성을 넣어 주면 됩니다. 이 기능은 dialog 뿐만이 아니라 다른 페이지에서도 유용하게 사용될 수 있으며 non-JS 디바이스에서도 사용하실 수 있습니다.

자바스크립트가 생성한 링크에 대해서는 그냥 href attribute를 #로 세팅하고 data-rel="back" 속성을 사용하세요. 그리고 프로그래밍으로 dialog의 close()메소드를 call 하셔도 됩니다.

예) $('.ui-dialog').dialog('close').

Setting the close button text

페이지 플러그 인 처럼 dialog의 close 버튼 text를 option이나 data 속성을 통해서 세팅할 수도 있습니다. option은 mobileinit 이벤트와 $.mobile.dialog.prototype.options.closeBtnText 프로퍼티를 사용해서 모든 dialog에 적용되도록 세팅할 수 있습니다. 그러면 여러분이 원하는 텍스트에 이 기능을 적용할 수 있습니다. 또는 data-close-btn-text 속성을 여러분의 markup에서 text 에 지정해 줄 수 있습니다.

History & Back button behavior

Dialog는 한 페이지 내에서 표시되고 없어지는 것이기 때문에 프레임워크는 이 dialog를 hash state history tracking에 포함시키지 않습니다. 즉 dialog 화면은 back 버튼을 눌렀을 때 뜨지 않을 거라는 거죠. 예를 달어 여러분이 한 페이지를 보고 있고 그 페이지에서 dialog를 열고 또 닫았다고 합시다. 그리고 나서 다른 페이지로 갔을 때 여기서 브라우저의 back 버튼을 누르면 원래의 페이지로 돌아가고 dialog 화면으로는 가지 않을 겁니다.

Styling & theming

Dialog는 다른 theme swatch들로 style 될 수 있습니다. 다른 일반적인 페이지들과 마찬가지로 data-theme 속성을 header,content,footer container들에 추가하시면 됩니다. 아래에 예제가 있습니다.


jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.


<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>


직접 보시려면 모바일에서 여기로 접속해서 보세요.


Dialog는 overlay layer 위에 표시됩니다. 이 overlay는 디폴트로 swatch A content color를 적용받게 됩니다. 이것을 바꾸고 싶으면 data-overlay-them 속성을 page wrapper에 넣으시면 됩니다. 아래 swatch e 로 세팅한 예제가 있습니다.


jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.


<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>


직접 보시려면 모바일에서 여기로 접속해서 보세요.



Dialog는 여러개의 버튼이 있는 control sheet 처럼 사용될 수도 있습니다. dialog의 inner container element에서 top margin을 없애면 됩니다. 예를 들어 dialog 페이지가 my-dialog라는 클래스를 가지고 있다고 한다면 여러분은 이 dialog를 top에 고정시키기 위해 CSS를 사용해야 합니다.: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 } 혹은 모든 dialog에 이런 스타일을 적용하셔야 합니다. .ui-dialog .ui-dialog-contain { margin-top: 0 } 사용 예제는 아래에 있습니다.


jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.


<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>


직접 보시려면 모바일에서 여기로 접속해서 보세요.



Dialog width and margins

가독성이 있도록 하기 위해  dialog는 디폴트 max-width를 500픽셀로 가지고 있습니다. (여기에 15픽셀의 padding이 사방에 있습니다.) 그리고 더 큰 스크린에서는 10%의 top margin이 주어집니다. 그런데 더작은 스마트폰 화면 같은데서는 이것이 깨지기도 합니다. 이 스타일을 오버라이드 하려면 아래 CSS를 고쳐서 사용하세요.

.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
 max-width: 500px;
 margin: 10% auto 15px auto;
}


반응형

Comment