JQuery Mobile - Theming Page

Page Theming

jQuery Mobile 에서는 페이지의 style을 지원하는 rich theming system을 제공하고 있습니다. 각 페이지 위젯에는 자세한 theming documentation이 있습니다. 이 글에서는 어떻게 theming이 apply 되는지 몇개의 high-level 예제들을 살펴보도록 하겠습니다.

data-them attribute는 헤더나 footer 콘테이너에 apply 될 수 있습니다. 이 콘테이너에 apply 되서 lettered theme color swatch들을 적용할 수 있도록 합니다. data-theme attribute가 content container에 적용 될 때에는 data-role="page"가 적용된 div나 콘테이너에 넣으라고 권장 드립니다. 그렇게 하면 배경색이 전체 페이지에 적용될 수 있습니다. 이 작업이 끝나면 페이지의 모든 위젯들은 그 페이지 콘테이너에 적용된 theme을 상속 받게 됩니다. header와 footer에는 디폴트로 theme "a"가 적용 됩니다. 모든 element에 theme "b" 가 적용되기를 원하신다면 이것을 header나 footer에 적용 시키세요. 페이지 div에 data-theme="b"를 하듯이 header와 footer div에도 이렇게 하면 됩니다. 이 디폴트 theme은 다양한 견본(swatches)들을 활용해서 visual texture를 만들고 각각 에 맞는 최상의 contrast를 다양한 element들에 적용하고 있습니다.

위 화면에 대한 소스와 기타 theme a ~ e 까지의 간단한 예제가 있는 소스를 아래에 올립니다.

themingpages.html

그리고 Tutorial Page에 가시면 A~E 까지의 theme들을 적용한 각 form 들을 보여주는 페이지가 있습니다.

이 페이지들을 따로 작업해서 파일로 만들었습니다.

보시면 도움이 될 겁니다.

themingApage.html

themingBpage.html

themingCpage.html

themingDpage.html

themingEpage.html

소스들을 보시면서 이것 저것 바꾸시고 테스트해 보시면 확실히 자기것으로 만들 수 있을 겁니다.

그럼 항상 즐 코딩 하세요.