using CSS themes -- JQuery Mobile



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).


덧글

댓글 입력 영역