본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Theming content

by 대소니 2011. 5. 25.

Theming the content area
페이지 속성이 있는 테그에 data-theme=”e” 속성을 추가하여 해당 페이지에 테마를 적용할 수 있습니다.
<div data-role="page" data-theme="a">

Theming collapsible blocks
접이식 해더에 색상을 적용하기 위해서는 data-theme 속성을 추가해 줍니다. 아이콘과 바디는 현재는 data 속성을 통해 테마를 적용할 수 없습니다. 그러나 직접 커스텀 css를 통해 스타일되어 질 수 있습니다.
<div data-role="collapsible" data-collapsed="true" data-theme="a">

Themed examples

<p><strong>A</strong> theme swatch on content &amp; collapsible</p>
<div class="ui-body ui-body-a">
<h1>H1 Heading</h1>
<p>This is a paragraph that contains <strong>strong</strong>, <em>emphasized</em> and <a href="index.html">linked</a> text. Here is more text so you can see how HTML markup works in content. Here is more text so you can see how HTML markup works in content.</p>
<div data-role="collapsible" data-collapsed="true" data-theme="a">
    <h3>I'm an themed collapsible</h3>
    <p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
</div><!-- /collapsible -->
</div><!-- /themed container -->


댓글