반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 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


*** Page transitions

CSS 기반의 화면전환을 포함한 jQuery Mobile 프레임워크의 화면 전환 효과는 Ajax navigatin 과 함께 어느 link나 form submission에도 적용될 수가 있습니다.

아래는 jQuery Tutorial DOC 에서 제공하는 Sampler 의 이미지와 소스코드 입니다.

모바일에서 여기로 접속하셔서 직접 화면 전환 효과를 체험해 보세요.



<table margin="0">
    <tr>
        <th><h3>fade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
    </tr>
</table>


fade transition 만 볼 수 있으신가요? 모든 화면전환 효과를 보시려면 3D transform이 지원되는 브라우저라야 합니다. 3D 를 제대로 지원하지 않는 (Android 2.x 같은) 곳이서는 디폴트인 fade 효과가 보이게 될 겁니다.

Setting a transition on a link or form submit

디폴트로 프레임워크는 fade 화면전환을 지원합니다. 다른 화면전환효과를 원하시면 data-transition 속성을 링크에 추가하세요.

<a href="index.html" data-transition="pop">I'll pop</a>

Back 버튼이 눌려지면 이 프레임워크는 이 페이지를 보이도록 했던 페이지로 돌아갈 때 reverse version을 자동적으로 사용합니다. 이 기능을 명시하려면 data-direction="reverse" 속성을 링크에 넣어 주시면 됩니다.

Global configuration of transitions

만약 디폴트 화면전환을 다른것으로 하고 싶으면 defaultPageTransition 글로벌 옵션을 세팅하면 됩니다. Dialog는 defaultDialogTransition을 세팅하면 됩니다.

Browser support and performance

모든 화면전환은 CSS keyframe animation과 -webkit vendor prefixed rule 과 -moz rule을 사용해 만들어 졌습니다. -webkit 은 iOS,Blackberry, Android, Safari, Chrome browsers 에 적용되고 -moz 는 Firefox 브라우저에 적용 됩니다. keyframe animation과 부드러운 화면전환을 지원하는 것은 브라우저 버전이나 하드웨어에 따라 약간씩 다르게 나타날 수가 있습니다. 만약 animatin이 지원되지 않는 환경이라면 그냥 화면 전환 효과 없이 페이지 이동이 될 겁니다.

Defining fallback transitions for non-3D support

fade를 제외한 모든 화면전환 효과는 기본적으로 3D transform 이 지원 되어야 합니다. 이 기능이 지원되지 않는 디바이스들에서는 모든 화면전환 효과가 fade 화면전환으로 바뀌어서 display 될 겁니다. 이 경우에도 부드럽게 화면이 움직이는 효과는 지원이 됩니다. 안드로이드 3.0 같은 경우도 기술적으로는 3D transform 이 지원되지만 애니메이션 퍼포먼스가 별로인 경우도 있습니다. 그렇기 때문에 이 기능이 모든 디바이스에서 제대로 동작한다고 말할 수는 없지만 최대한 효과적으로 동작하도록 작업을 하고 있습니다.

3D transform이 적용되지 않는 경우 그에 대한 대비책으로 사용될 수 있는 화면 전환 효과를 설정할 수도 있습니다. 우리는 이것을 fade로 설정해 놓고 있습니다. 만약 아래처럼 세팅을 해 놓으면 화면전환효과가 특별히 없이 페이지 이동이 일어날 겁니다.

$.mobile.transitionFallbacks.slideout = "none"


Setting a max width for transitions

창의 width 가 특정 pixel width 보다 클 경우 transition을 none으로 세팅해서 디폴트로 화면전환 효과를 사용하지 않도록 할 수 있습니다. 이 기능은 큰 스크린의 경우 화면 전환 효과가 별로일 수 있을 때 유용하게 사용할 수 있습니다. 이 기능은 $.mobile.maxTransitionWidth 글로벌 옵션을 사용해서 세팅할 수 있습니다.

이 글로벌 옵션의 디폴트는 false로 돼 있습니다. 이 옵션의 value로는 아무 숫자나 false value 가 올 수 있습니다. 만약 이 value 가 false가 아니면 핸들러는 윈도우의 크기가 특정한 value 보다 클 경우 transition을 none 으로 취급합니다.

Creating custom transitions

jQuery Mobile은 custom transition도 추가할 수 있도록 지원합니다. 이 기능은 $.mobile.transitionHandlers dictionary 에 넣으시면 되는데요.

이걸 이용하면 여러분 앱에 여러분이 원하는 아주 다양한 화면전환 효과를 사용할 수가 있습니다.


반응형

Comment


Page titles

Titles in Ajax navigation

jQuery Mobile로 만든 페이지가 처음 로드될 때 그리고 나서 link를 클릭하거나 form 을 submit 할 때 Ajax는 대상이 되는 page의 내용을 pull 하게 됩니다.

DOM내에 두개의 페이지 모두를 가지는 것이 animated 된 화면 전환을 위해 꼭 필요합니다. 그런데 이러한 이면에는 page title이 항상 첫번째 화면의 title이 남아있게 된다는 문제가 있습니다. 이것을 해결하기 위해 jQuery Mobile은 Ajax를 통해 page title을 pull 해서 자동적으로 parse 합니다. 그리고 나서 title 속성을 바꾸는 겁니다.

Titles in multi-page templates

multi-page 문서에서도 이와 비슷한 방법으로 진행 됩니다. 단지 모든 페이지들은 common title을 share 하고 있는게 다른것이죠. 그래서 각각의 페이지마다

data-title 속성을 넣어서  각각의 페이지마다 title을 다르게 할 수 있도록 합니다. 그래서 HTML 문서의 title은 자동적으로 화면에 display 되는 page의 data-title 값으로 바뀌게 됩니다.

<div data-role="page" id="foo" data-title="Page Foo">

</div><!-- /page -->


Linking Pages


jQuery Mobile은 simple page linking convention을 위해 디자인 됐습니다. 그냥 일반적으로 하듯이 링크를 거시면 됩니다. 그러면 jQuery Mobile이 필요하면 Ajax를 이용해서 single-page 모델내의 페이지 request를 자동적으로 처리할 겁니다. 만약 Ajax가 가능하지 않으면 (same-domain url 이 아니거나 링크에서 특정 속성을 사용한다거나 해서) Ajax 대신에 일반 http request 가 사용됩니다.
이 모델의 goal은 특정 configuration 없이 그냥 일반적인 방법으로 개발자가 쉽게 웹 사이트를 만들도록 하는데 있습니다. 보기 좋은 화면과 native 와 유사한 방법으로 말이죠.

Default link behavior: Ajax

동적인 화면전환을 하려면 Ajax를 통해서 해당 페이지들이 모두 로디 되어야 합니다. 이것을 구현하려면 프레임워크는 그 링크의 href를 파스해서 Ajax request(Hijax)를 formulate 하고 loading spinner를 display  해야 합니다. 이러한 과정은 jQuery Mobile 에 의해 자동적으로 수행 됩니다.
Ajax request 가 성공적이면 새 페이지의 내용은 DOM에 추가 됩니다. 모든 모바일 위젯들은 자동 initialize 됩니다. 그리고 나서 새 페이지는 화면전환효과를 주면서 스크린에 표시 됩니다. 만약 Ajax request 가 실패하면 프레임워크는 작은 에러 메세지 overlay를 잠시 display 하고 없앱니다. 그래서 Ajax request 가 실패했다고 해서 navigation 흐름이 멈추지는 않습니다. 이 에러메세지 관련해서는 example of the error message 를 보세요.

Note :  Ajax navigation active로 multipage document로 링크를 걸지는 못합니다. 왜냐하면 프레임워크는 첫번째로 찾은 페이지만 로드하기 때문입니다. 그 페이지의 full set 을 로드 하지는 않습니다. 이럴 경우에는 Ajax를 사용하지 않고 link 를 해야 합니다. (다음 섹션을 보세요) 그래야 full page refresh가 되서 hash collision 을 방지할 수 있습니다. 이 Ajax를 사용해서 multi page document의 모든 페이지를 로드 할 수 있도록 하는 플러그인인 subpage plugin 이 있습니다. 관심 있으면 살펴 보세요.

Linking without Ajax

다른 도메인으로 링크하거나 rel="external", data-ajax="false" 를 하거나 target 속성을 사용하면 Ajax가 로드하지를 못합니다. 이렇게 하면 full page refresh 가 일어나며 동적인 화면전환이 일어나지 않습니다. rel="external" 과 data-ajax="false" 두 속성 모두 똑 같은 효과가 나타납니다. 다른점은 rel="external"은 다른 site나 다른 도메인으로 링크를 걸 때 사용되어지는 것이고  data-ajax="false"는 같은 도메인 내에서 간단하게 Ajax 로딩을 하지 않을 때 사용할 수 있습니다. 보안 문제 때문에 프레임워크는 항상 외부 도메인으로의 링크에서는 Ajax behavior 를 적용하지 않도록 돼 있습니다.
1.1 버전에서 data-ajax="false"를 parent container에 추가하면 그 하단의 수많은 링크들이 Ajax 네비게이션 시스템을 사용하지 않도록 하는 기능을 추가했습니다. 이 기능을 사용하면 각 링크마다 일일이 코딩해야 하는 번거로움을 줄일 수 있습니다.
Note: jQuery Mobile 어플리케이션을 빌드 시 Ajax Navigation system이 globally 사용할 수 없도록 하거나 각각의 링크에서 빈번하게 사용할 수 없도록 하여야 할 때 $.mobile.pushStateEnabled global configuration option을 사용하실 것을 권장합니다. 그러면 일부 브라우저에서 발생하는 inconsistent navigation behavior를 방지 하실 수 있습니다.

Linking within a multi-page document

한개의 HTML 문서에는 여러개의 page 콘테이너가 들어갈 수 있습니다. div를 여러개 쓰고 각 div마다 data-role을 page로 주면 됩니다. 이렇게 하면 HTML 한 문서에 작은 웹싸이트나 어플리케이션 하나를 다 담을 수도 있겠죠.jQuery Mobile은 처음 이 파일이 불려졌을 때 첫번째 page를 먼저 보여 줍니다.
이 멀티페이지 문서 안에 링크가 anchor(#foo)로 걸려 있다면 프레임워크는 page wrapper 안에 있는 ID(id-"foo")를 찾을 겁니다. 그 HTML문서 안에서 그것을 찾으면 그 새로운 페이지를 보여 줄 겁니다. jQuery Mobile은 멀티페이지 내의 화면 전환뿐만 아니라 외부 링크를 통해 자유롭게 내부,외부로 이동 할 수 있도록 합니다.

사용자가 보기엔 그것이 내부 페이지인지 외부 페이지인지 구분 되지 않고 똑 같이 보여 집니다. (외부 페이지 로딩시 Ajax spinner 가 표시 될때는 약간 다르겠지만요.)

어떤 경우에든 JQuery Mobile은 페이지의 URL hash를 업데이트 해 Back button이나 deep-linking, bookmarking 등이 지원 되도록 합니다.
만약 여러분이 multiple internal 페이지를 포함한 페이지로 Ajax를 통해서 링크를 클릭해서 그 화면을 로딩한다면 여러분은 rel="external"이나 data-ajax="false"를 link 에 넣어야 됩니다.이렇게 해야 프레임워크가 그 URL 내의 Ajax hash 를 없애고 full page를 reload 할 수 있습니다.이 부분은 아주 중요합니다. 왜냐하면 Ajax page들은 Ajax history를 track하기 위해 hash(#)를 사용합니다. 그리고 multiple internal 페이지들도 그 내부 페이지를 가리킬 때 그 hash를 사용하구요. 그래서 위 방법대로 하지 않으면 이 두 부분이 서로 충돌하게 됩니다.

예를 들어 multiple internal page를 향한 링크는 아래와 같이 되어야 합니다.

<a href="multipage.html" rel="external">Multi-page link</a>

"Back" button links

만약 여러분이 anchor에 data-rel="back" 속성을 넣으시면 유저가 그 anchor를 클릭했을 때 back button을 누른 것 처럼 동작 할 겁니다. 바로 전단계 화면으로 가게 됩니다. 이경우 anchor의 디폴트 href는 무시 됩니다.이 기능은 자바스크립트로 간단하게 back button을 생성해야 될 때 유용합니다.(예를 들어 dialog 박스를 닫는다던지...) 이 기능을 사용할 때 브라우저는 href 속성에 지정된 주소는 사용하지 않을 겁니다. 한가지 알아야 할 것은요. C-Grade 브라우저에서는 이 data-rel="back" 기능이 안 먹히기 때문에 그런 경우는 이 href 에 있는 링크로 가게 될 겁니다. 만약 여러분이 history 내의 going back이 아니라 단지 전환을 역순으로 (지금 화면을 부른 화면으로 돌아가기) 하실 때에는 data-direction="reverse" 속성을 사용하시면 됩니다.
Note: data-direction="reverse"는 현재 페이지로 오게 한 바로 그 페이지로 화면전환을 한다는 의미입니다. data-rel="back"은 바로 전 화면으로 이것은 브라우저의 back 버튼을 누른것과 동일한 효과가 나옵니다. 이 두개를 같이 사용하면 reverse는 일어나지 않고 그냥 일반적인 transition이 일어 납니다.

Redirects and linking to directories

디렉토리 인덱스로 링크를 걸 때 (href="typesofcats/index.html 가 아니라 href="typesofcats/" 로 링크를 걸 때) 반드시 trailing slash를 넣어주셔야 합니다. 왜냐하면 jQuery Mobile은 url의 마지막 / 다음에는 파일 이름이 올거라고 예상을 하고 있기 때문입니다. 그리고 나서는 실제 페이지가 참조 됐을 때 이 section을 없앱니다.

어쨌든 여러분은 data-url 속성이 이미 정해져 있는 page div를 return 하는 경우가 있을 겁니다. 이경우 jQuery Mobile은 URL 을 업데이트 하는데 이 속성의값을 사용할 겁니다. 그리고 예를 들어 form을 /login.html 로 포스팅하려고 하는데 이 일이 성공적으로 진행됏을 때 결과 페이지를 /account 에 있는 페이지를 사용하려고 하는 경우가 있을 수 있습니다. 이 경우 여러분은 jQuery Mobile history stack을 사용해서 컨트롤 할 수 있습니다. 아래에 예제가 있습니다.

다음에 나오는 링크는 docs-links-urltest/index.html 로 걸린 겁니다. Test Link . return page는 docs/pages/docs-links-urltest/ 가 될 겁니다. 이 작업은 페이지 소스의 data-url 속성을 통해서 수행 될 겁니다. 값은 전체 hash 로 replace 된다는 것을 항상 염두에 두세요.

jQuery Mobile의 navigation model 과 Ajax, hashes and history 에 좀 더 기술적인 부분은 별도로 살펴 보시기 바랍니다.

Link examples

HTML의 모든 표준 링크 타입은 위에서 살펴 본 대로 jQuery Mobile이 모두 지원합니다. 아래는 자주 사용되는 링크들에 대한 sampler 들 입니다.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">     <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>     <li><a href="../../index.html">Link in the same domain</a></li>     <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>     <li data-role="list-divider">Links that will refresh the page</li>     <li><a href="http://www.jquery.com">External domain</a></li>     <li><a href="../../index.html" rel="external">Link with rel="external"</a></li>     <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>     <li><a href="../../index.html" target="foo">Link with target="foo"</a></li>     <li data-role="list-divider">Email links</li>     <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>     <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>     <li data-role="list-divider">Phone links</li>     <li><a href="tel:15555555555">Phone: tel:15555555555</a></li>     <li data-role="list-divider">Other</li>     <li><a href="#">A href="#" will return false</a></li> </ul>



jQuery Mobile Doc 페이지에 가면 위 화면처럼 나오고 모바일 디바이스에서 각 링크를 클릭하면 실제 작동되는것도 보실 수 있습니다.

보시려면 여기 를 누르셔서 시험해 보세요.


반응형

Comment


오늘은 jQuery Mobile DOC의 Components 부분을 정리하겠습니다.


Components 섹션에는 아래와 같은 6개의 주제가 있습니다.


-Pages & dialogs

- Toolbars

- Buttons

- Content formatting

- Form elements

- List views


그리고 첫번째 Pages & Dialog 부분은 아래 메뉴로 구성돼 있습니다.


- Anatomy of a page
  Single page template
  Multi-page template
- Page titles
- Linking pages
- Dialogs
- Prefetching @ caching pages
- Ajax, hashes & history
- Dynamically injection pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages


그럼 첫번째 주제인 Anatomy of a page를 정리하겠습니다.


JQuery Mobile은 back button history support, animated 된 화면 전환 그리고 Dialog 같은 페이지를 포현하기 위한 간단한 툴들과 함께 external page들의 자동 AJAX page loading 을 지원합니다.


Anatomy of a page


JQuery Mobile 의  "page" structure는 single 페이지나 페이지 내의 local internal linked "pages"를 모두 지원합니다.

이 모델의 goal은 개발자들이 웹사이트를 손쉽게 생성할 수 있도록 하는 겁니다. 간단하게 특별한 configuration 없이 보기 좋은 화면과 native 와 유사한 화면 등 일반 HTTP 가 할 수 없는 일을 JQuery Mobile이 지원하는 겁니다.


Mobile page structure


JQuery Mobile site는 반드시 HTML5의 doctype으로부터 시작해야 합니다. 이렇게 해야 이 프레임워크의 모든 기능을 사용하실 수 있습니다. (구형버전의 브라우저가 있는 구형 디바이스는 HTML5가 적용이 안되며 이 브라우저에서는 그냥 HTML5의 doctype을 무시하고 진행하게 됩니다. 그리고 다른 다양한 custom 속성들도 적용안되고 그냥 무시할 겁니다.)
head 에서는 jQuery,jQuery Mobile 그리고 Mobile theme CSS 를 참조합니다. 이것들을 참조하면서 JQuery Mobile 이 지원하는 모든 기능을 사용할 수 있게 됩니다. jQuery Mobile 1.1 은 1.6.4와 1.7.1 버전의 jQuery core를 모두 지원합니다. 가장 효과적인 퍼포먼스를 위해서는jQuery CDN을 link 해서 사용할 것을 권장합니다.


<!DOCTYPE html>
<html>
 <head>
 <title>Page Title</title>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>

<body>
...content goes here...
</body>
</html>


Viewport meta tag


위의 소스를 보면 head 안에 meta viewport 태그가 있는 것을 보실 수 있을 겁니다. 이것은 브라우저의 page zoom과 dimension을 display 하기 위한 것입니다. 이것이 없으면 대부분의 모바일 브라우저에서는 900픽셀 정도의 virtual 페이지를 사용하게 될 겁니다. (이것은 데스크탑에는 어느정도 맞겠지만 모바일에서는 표현하기가 너무 클 럽니다.) 이 viewport 속성을 content="width=device-width, initial-scale=1"로 세팅하면 스크린의 크기에 맞춰서 width 가 display 될 겁니다.


<meta name="viewport" content="width=device-width, initial-scale=1">


이 세팅은 유저가 페이지를 zoom 하는 것을 막지는 않습니다. 이것과 관련해서 iOS에서는 작은 이슈가 있습니다. 이 viewport 세팅으로는 화면의 orientation이 바뀔 때 제대로 딱 맞게 동작을 하지 않습니다. 이 이슈는 조만간 해결 될 것이라고 기대합니다. 만약에 zoom 기능을 막으려면 viewport 에서 설정을 할 수가 있습니다.


Inside the body: Pages


<body> 태그 안에는 각각이 view 나  "page" 는 element를 통해서 정의 됩니다. (대개 div를 사용합니다.) 그리고 data-role="page"라는 속성을 사용합니다

. 페이지에서 사용할 수 있는 가능한 속성들을 보시려면 data-attribute reference를 보세요.


<div data-role="page">
 ...
</div>


"page" 콘테이너 안에는 일반적인 HTML markup 이 사용될 수 있습니다. 특히 jQuery Mobile에서는 "page" 내부에는 data-role이 header, content, footer로 정위된 div들이 들어가게 됩니다.


<div data-role="page">
 <div data-role="header">...</div>
 <div data-role="content">...</div>
 <div data-role="footer">...</div>
</div>


Putting it together: Basic single page template


위에서 설명한 모든 것을 모아 놓은 예제를 보여드리겠습니다. 이것은 여러분이 프로젝트를 하게 되면 반드시 사용해야 되는 표준 탬플릿 입니다.


<!DOCTYPE html>
<html>
 <head>
 <title>Page Title</title>
 
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

<div data-role="page">

 <div data-role="header">
  <h1>Page Title</h1>
 </div><!-- /header -->

 <div data-role="content"> 
  <p>Page content goes here.</p>  
 </div><!-- /content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>




이 화면은 jQuery Mobile에서 제공하는 Single Page Template 화면입니다.


Multi-page template structure


하나의 HTML 문서는 여러개의 "pages"를 가지고 있을 수 있습니다. 이것은 data-role 을 page로 한 여러개의 div를 사용해서 함께 로드되게 됩니다. 각각의 'page' 단위들은 unique 한 id 가 필요합니다. (id="foo") 이것은 pages들 끼리 내부적으로 링크 연결되는데 사용됩니다. (href="foo") 그 링크가 클릭되면 프레임워크는 내부 page의 ID를 찾게 됩니다. 그리고 그 페이지를 보여줍니다.
아래에는 2개의 페이지가 있는 예제 입니다. 각각의 페이지에는 id가 있고 이 페이지들은 div를 이용해서 나눠져 있습니다. 여기서 사용되는 ID는 오직 internal page linking 지원에만 필요하다는 것을 염두에 두세요. 각각의 페이지들이 각각의 HTML 문서에 나눠져서 있다면 이 ID는 없어도 되는 option 입니다.


<body>

<!-- Start of first page -->
<div data-role="page" id="foo">

 <div data-role="header">
  <h1>Foo</h1>
 </div><!-- /header -->

 <div data-role="content"> 
  <p>I'm first in the source order so I'm shown as the page.</p>  
  <p>View internal page called <a href="#bar">bar</a></p> 
 </div><!-- /content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="bar">

 <div data-role="header">
  <h1>Bar</h1>
 </div><!-- /header -->

 <div data-role="content"> 
  <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link

that references my ID is beeing clicked.</p>  
  <p><a href="#foo">Back to foo</a></p> 
 </div><!-- /content -->

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
</body>







위 화면은 jQuery Mobile 에서 제공하는 Multi page template 화면입니다.



PLEASE NOTE : 모든 Ajax 'pages'의 네비게이션 히스토리를 track 하기 위해 hash를 사용합니다. anchor로 가기 위한 deep link (index.html#foo)는 JQuery Mogile 의 page 기능에서는 현재 가능하지 않습니다. 왜냐하면 프레임워크는 그 ID로 content를 위한 scrolling의 native behavior 대신에 #foo 의 ID를 찾게 될 겁이기 때문입니다.


Conventiions, not requirements


위에 예제는 jQuery Mobile을 사용해 표준 웹 앱 만들기를 위해 권장되는 접근법에 대한 아웃라인 구조입니다. 이 프레임워크는 document structure가 아주

flexible 합니다. page, header, content, footer data- role emements 들은 optional 하고 기본 포맷과 구조를 제공하는데 아주 도움을 많이 줍

니다. auto-initialization 을 위해 사용되는 page wrapper는 single page documents에서는 option 입니다. 그렇기 때문에 특별히 필요한 markup

이 없습니다. custom layout을 사용하는 웹 페이지에서는 이런 모둔 구조적인 elements들은 생략될 수 있습니다. 그리고 Ajax 네비게이션과 모든 위젯들은 그냥 그들

나름대로의 표준구조로 이용 될 수 있습니다. multi page setup을 위해서는 markup안에 page wrapper가 있어야 된다는 것도 잊지 마세요.


여기까지가 Components 내의 Anatomy of a page, Single page template, Multi-page template 내용을 정리한 겁니다.
다음은 Page titles 섹션부터 정리하겠습니다.


 

반응형

Comment


오늘은 JQuery Mobile DOC 의 Overview 부분을 마저 다루겠습니다.


3. Features
4. Accessibility
5. Supported platforms


이렇게 세가주 주제를 다룰건데요. 그냥 간단한 설명들이라서 한번에 다 정리하려구요.


Features

Key features:

  • 익숙한 JQuery core를 사용해서 만들어 졌고 JQuery 신택스가 적용돼 쉽게 배울 수 있고 JQuery UI code와 pattern들을 쉽게 사용할 수 있음
  • 모든 주요 모바일, 태블릿, e-reader, 데스크탑 플랫폼과 잘 호환 됨. iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, 그리고 최근 기술을 지원하는 브라우저들 
  • 소용량이며 이미지에 따라 속도가 크게 차이나지 않도록 구성 됨
  • custom build를 사용할 수 있도록 구성된 Modular architecture
  • 빠르게 개발할 수 있고 최소한의 코딩으로 작업할 수 있도록 HTML5 Markup-driven configuration 을 사용함
  • Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
  • Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens
  • Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState.
  • Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
  • Touch and mouse event support streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
  • Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.
  • Powerful theming framework 과 ThemeRoller application 은 아주 고급스러운 효과를 쉽게 구현할 수 있도록 도와 줍니다.



Accessibility


JQuery Mobile은 표준을 따릅니다. semantic HTML 을 따르며 그로 인해 가능한 많은 device를 지원할 수가 있습니다. A-Grade 브라우저들은 focus management, keyboard navigation 나 W3C의 WAI-ARIA specification을 따르는 HTML 속성을 지원하는 JQuery Mobile의 많은 컴포넌트이 사용 될 수 있습니다.

이러한 기능을 이용해 애플 아이폰의 VoiceOver 같이 앞을 볼 수 없는 유저들을 위한 screen reader나 웹에 접근하는 다른 지원기술들을 제공해 장애를 가지신 분들도 사용할 수 있도록 기능을 제공합니다.



Supported Platform


jQuery Mobile Supported Platforms


jQuery Mobile은 대부분의 데스크탑, 스마트폰, 태블릿, e-reader 플랫폼 에 대해 폭넓게 지원합니다. 또한 피처폰과 구 버전 브라우저도 지원합니다. 우리는 모든 대중적인 플랫폼을 폭 넓게 지원할 수 있는 것에 대해 자부심을 가지고 있습니다.

우리는 3개의 레벨로 나눠서 각 레벨별 플랫폼을 지원하는 시스템을 가지고 있습니다. : A (full), B (full minus Ajax), C (basic HTML). 비쥬얼한 부분과 부드러운 화면 전환은 그 디바이스나 플랫폼이 얼마나 CSS 를 지원하고 처리하느냐에 많이 영향을 받습니다. 그래서 A 등급이라고 해서 아주 정확하게 표현되거나 움직인다고는 할 수 없지만 대부분 정상적으로 움직입니다. 그리고 이러한 제한은 웹 환경에서는 필수불가결한 요소 입니다.


A-grade - Full enhanced experience with Ajax-based animated page transitions.

  • Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)
  • Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)
  • Android 3.1 (Honeycomb)  - Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
  • Android 4.0 (ICS)  - Tested on a Galaxy Nexus. Note: transition performance can be poor on upgraded devices
  • Windows Phone 7-7.5 - Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800
  • Blackberry 6.0 - Tested on the Torch 9800 and Style 9670
  • Blackberry 7 - Tested on BlackBerry® Torch 9810
  • Blackberry Playbook (1.0-2.0) - Tested on PlayBook
  • Palm WebOS (1.4-2.0) - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
  • Palm WebOS 3.0 - Tested on HP TouchPad
  • Firebox Mobile (10 Beta) - Tested on Android 2.3 device
  • Chrome for Android (Beta) - Tested on Android 4.0 device
  • Skyfire 4.1 - Tested on Android 2.3 device
  • Opera Mobile 11.5: Tested on Android 2.3
  • Meego 1.2 - Tested on Nokia 950 and N9
  • Samsung bada 2.0 - Tested on a Samsung Wave 3, Dolphin browser
  • UC Browser - Tested on Android 2.3 device
  • Kindle 3 and Fire - Tested on the built-in WebKit browser for each
  • Nook Color 1.4.1 - Tested on original Nook Color, not Nook Tablet
  • Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
  • Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
  • Firefox Desktop 4-9 - Tested on OS X 10.7 and Windows 7
  • Internet Explorer 7-9 - Tested on Windows XP, Vista and 7
  • Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7

B-grade - Enhanced experience except without Ajax navigation features.

  • Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770
  • Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3
  • Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)

C-grade - Basic, non-enhanced HTML experience that is still functional

  • Blackberry 4.x - Tested on the Curve 8330
  • Windows Mobile - Tested on the HTC Leo (WinMo 5.2)
  • All older smartphone platforms and featurephones - Any device that doesn't support media queries will receive the basic, C grade experience

=> 요약설명한 부분들은 제가 번역하면 오히려 좀 더 이상해 지는 것 같아서 영어로 그대로 옮겼습니다.


 이로써 JQuery Mobile DOC 의 Overview 부분을 모두 정리했습니다.

다음은 Components 부분을 정리하겠습니다.


반응형

Comment


아래 Quick start guide에서는 몇가지 예제가 나옵니다.

이 Quick start guide를 하기전에 이 섹션에서 나온 이 예제들을 한 파일로 모아 놓은 샘플을 먼저 정리합니다.

이 코드와 그 결과물을 한번 보시고 튜토리얼을 보시고 다시 이 예제를 이렇게 저렇게 수정해 보시면 만이 도움이 될 겁니다.


<!DOCTYPE html>
<html>
 <head>
 <title>My Page</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

<div data-role="page">

 <div data-role="header">
  <h1>My Title</h1>
 </div><!-- /header -->

 <div data-role="content">
  <p>Hello world</p>
<ul data-role="listview" data-inset="true" data-filter="true">
 <li><a href="#">Acura</a></li>
 <li><a href="#">Audi</a></li>
 <li><a href="#">BMW</a></li>
 <li><a href="#">Cadillac</a></li>
 <li><a href="#">Ferrari</a></li>
</ul>

<form>
   <label for="slider-0">Input slider:</label>
   <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
</form>
<p>
<a href="#" data-role="button" data-icon="star">Star button</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="a">Button a</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="b">Button b</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="c">Button c</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="d">Button d</a> <p>
<a href="#" data-role="button" data-icon="star" data-theme="e">Button e</a> <p>
 
 </div><!-- /content -->
<div data-role="footer">
<h1>Footer</h>
</div>
</div><!-- /page -->

</body>
<html>






Quick start guide

Getting Started with jQuery Mobile

JQuery Mobile은 Touch friendly UI widget들을 제공합니다. 그리고 AJAX navigation system을 제공해 animated 된 화면 전환효과를 줄 수 있도록 합니다.

Create a basic page template

익숙한 텍스트 에디터를 여시고 페이지 탬플릿을 복사해 넣으세요. 그것을 저장하신 후 웹 브라우저로 열어보세요. 이제 여러분은 모바일 개발자가 됐습니다.

이 탬플릿 안에는 무엇이 있는지 볼까요? head 안에 meta viewport 태그가 화면 width를 디바이스의 width 만큼 설정했습니다. 그 다음엔 css 파일과 java script 파일을 링크를 걸어 JQuery Mobile을 사용할 수 있도록 했습니다. JQuery Mobile 1.1. 은 JQuery core의 1.6.4 와 1.7.1 버전 과 같이 사용될 수 있습니다.

body에서는 div를 사용했고 data-role이 page로 설정됐습니다. 이것은 page를 감싸기 위해  사용된 겁니다. 그리고 header bar (data-role="header") 와  content region (data-role="content") 는 이 페이지 안에 추가 됐습니다. 이 data- 어트리뷰트는 JQuery Mobile에서 미리 만들어진 widget을 사용하기 위해 사용되는 기본 마크업 입니다.

<!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>       
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>


Add your content

Content container안에 여러분은 standard HTML 엘리먼트를 넣을 수 있습니다. (headings, lists, paragraphs 등등). 그리고 JQuery Mobile stylesheet 다음에 추가로 스타일쉬트를 넣어서 custom layout을 생성할 수 있습니다.

Make a listview

JQuery Mobile에는 다양한 리스트뷰가 있습니다. data-role="listview"를 추가하기만 하면 사용하실 수 있습니다. 아래 listview 라는 role을 갖는 간단한 linked list가 있습니다. 여기에 data-inset="true"를 추가함으로서 inset 모듈처럼 보이도록 만들겁니다. 그리고 data-filter="true" 어트리뷰트를 넣어서 다이나믹 검색 필터를 추가했습니다.

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>


Add a slider

JQuery Mobile Framework은 form elements 모두를 포함하고 있습니다. 이 엘리먼트들은 touch-friendly styled 위젯들로 자동적으로 구현해 줍니다. 아래에 HTML5에 새로 등장한 slider 를 사용하는 방법이 있습니다.

<form>
   <label for="slider-0">Input slider:</label>
   <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
</form>


Make a button

버튼을 만드는 것은 몇가지 방법이 있습니다. 그 중에서 링크가 걸려있는 버튼을 한번 봅시다. link로 시작해서 data-role="button" 속성을 추가했습니다. 여기에 data-icon 속성을 사용해서 아이콘도 넣을 수 있습니다. 옵션으로 data-iconpos 속성을 이용해서 그 위치도 설정할 수 있습니다.

<a href="#" data-role="button" data-icon="star">Star button</a>

Play with theme swatches

JQuery Mobile에는 theme framework를 통해 26개 세트의 toolbar,content와 button color 를 지원합니다. 이것을 "swatch"라고 합니다. 간단히 data-theme="e" 속성을 추가하세요. 그리고 이 페이지의 아무 위젯이나 넣으세요. (page, header, list, input for the slider, 노란 button) a-e 까지 디폴트로 제공하는 theme을 넣어 보세요.

page에 이 theme swatch를 넣어보세요. 그리고 그 안에 있는 위젯들이 자동적으로 그것을 상속받는 것을 확인해 보세요. (header는 상속하지않고 디폴트인 a를 사용합니다.)

<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>

custom theme을 만들고 싶다면 drag and drop을 해서 만드는   ThemeRoller 를 사용하세요. 그리고 그 custom theme을 다운 받으시면 됩니다.

Go forth and build stuff

지금까지 보신건 그냥 수박 겉핥기 입니다. 더 많은 훌륭한 기능들이 JQuery Mobile 안에 있습니다. 이러한 기능들을 아주 간단히 이용할 수 있죠. linking pages, animated 페이지 전환, dialog 구현하기 등을 잘 보세요. 기본적으로 JQuery Mobile에서 제공하는 기능을 사용하기 위해 data- 속성을 잘 이용하세요.

좀 더 복잡한 부분으로는 global configuration, events, methods 등이 있습니다. 이것들을 하신 다음에 scripting pages, generating dynamic pages, building PhoneGap apps 등을 보세요.

반응형

Comment


새로 참여하는 프로젝트에서 JQuery Mobile을 사용하게 되서 지금부터는 아무래도 Sencha Touch 보다는 JQuery Mobile에 좀 더 집중해서 정리를 할 것 같습니다.


일단 저는 해당 회사에서 제공하는 공식 튜토리얼을 번역해서 한번 훑어 봐야지 제대로 감이 잡히는 느낌이 들더라구요.


JQueary Mobile DOC는 http://jquerymobile.com/demos/1.1.0/ 에 있습니다.


목차는 아래와 같습니다.


A. Overview

1. Intro to JQuery Mobile
2. Quick start guide
3. Features
4. Accessibility
5. Supported platforms

B. Components

1. Pages & dialogs
2. Toolbars
3. Buttons
4. Content formatting
5. Form elements
6. List views

C. API

1. Configuring defaults
2. Events
3. Methods & Utilities
4. Data attribute reference
5. Theme frame work


그렇게 양이 많은 것 같지 않네요.

일단 튜토리얼 번역을 시작해 볼까요?





Intro to JQuery Mobile

jQuery Mobile Overview

JQuery의 모바일 전략은 아주 간단하게 요약될 수 있습니다. 많이 사용되는 모든 모바일 디바이스 플랫폼에서 JQuery 와 JQuery UI 를 사용해서 차이점 없이 표시되고 동작되는 통일된 유저 인터페이스 시스템을 만드는것이 JQuery 의 전략입니다. 보기 좋은 화면(Feature rich)에 포커스를 두면서도 가벼운 코드베이스로 유연성있게 enhancement 될 수 있도록 합니다. (theming system, ThemeRoller tool)

이 프레임워크는 Ajax 네비게이션 시스템이 포함돼 있습니다. 이것은 animated 된 화면전환 효과를 가능하게 합니다. 그리고 pages, dialogs, toolbars, listviews, buttons with icons, form elements, accordions, collapsibles 등등 같은 UI core set 도 포함돼 있습니다.

우리는 JQuery Mobile로 모든 브라우저와 모든 디바이스에서 작동하는 앱이나 웹을 만드려고 합니다. 그리고 간단하고 마크업 기반의 시스템으로 구성돼 JQuery Mobile을 배우기 쉽도록 하는데 촛점을 맞췄습니다. 좀 더 실력있는 개발자라면 global configuration options, events 같은 풍부한 API를 사용해서  다이나믹한 페이지를 표현하기 위한 메소드를 구현하고 (스크립트를 추가해서)  폰갭같은 툴로 Native App을 빌드할 수도 있습니다.

JQuery Mobile의 모든 페이지는  웹이 가능한 대부분의 디바이스에서 호환성을 주기 위해 clean, semantic HTML을 기반으로 만들어져 보다 많은 상황에서 사용될 수 있도록 했습니다. CSS와 Java Script를 사용할 수 있는 디바이스에서 JQuery Mobile은 JQuery와 CSS의 장점들을 사용해서 인터액티브하고 보기좋은 화면을 보여주는 보다 풍부한 테크닉을 지원합니다.


반응형

Comment

  1. td 2012.06.13 19:12

    감사합니다 좋은내용 포스팅해주셔서 쉽게 공부할수있게되었습니다.