using CSS themes

-- JQuery Mobile 2012. 11. 9. 16:49
,
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

JQuery Mobile은 CSS Theme를 제공하는데, 아래와 같이 Theme 타입을 a, b, c, d, e 중 하나를 지정하는 것으로 사용할 수 있다.

<!-- 첫 번째 윈도우 -->
<div id="list" data-role="page">
    <div data-role="header" data-theme=b>
        <h1>리스트</h1>
    </div>
    <div data-role="content" data-theme=b>
        
    </div>
</div>

간단히 타입을 지정한 것만으로 훌륭한 테마를 이용할 수 있으며, 이 테마들은 CSS의 속성 상 상속받아 특정 부분만 원하는 스타일로 변경이 가능하다.

아래는 CSS Theme관련된 속성이므로 참고바란다.

Attributes

Signification

data-theme

This attribute can be used for all all the elements of a window (including <div> element associated with the window).
- If applied on <div> with the data-role="page" attribute: the theme allows us to define the contents of the window. By default the contents of the window is using the "c" theme.
- If applied on <div> with the data-role="header" attribute: the theme allows us to define the title bar. By default the title bar of the window is using the "a" theme.
- If applied on <div> with the data-role="footer" attribute: the theme allows us to define the bar at the bottom of page. By default the bottom bar of the window is using the "a" theme.
- If applied on <div> with the data-role="content" attribute: the theme allows us to define the contents of the window. By default the contents of the window uses the theme associated with the window.

data-header-theme

This attribute is used on the <div> associated with the window (data-role="page"). It sets the theme of the title bar (default theme "a").

data-footer-theme

This attribute is used on the <div> associated with the window (data-role="page"). It sets the theme of the bar at the bottom of the page (default theme "a").

data-content-theme

This attribute is used on the <div> associated with the window (data-role="page"). It sets the theme of the contents of the window (default theme associated with the window).

'-- JQuery Mobile' 카테고리의 다른 글

jquery mobile button  (0) 2012.11.12
jquery mobile list  (0) 2012.11.09
Move from one window to another  (0) 2012.11.09
jQuery Mobile Tutorial: Basics  (0) 2012.10.30
JQuery Mobile의 특징  (0) 2012.10.30
posted by 어린왕자악꿍

티스토리툴바