jQuery Mobile - Theming toolbars

해더와 풋터는 페이지의 스타일의 중요한 역할을 하기 때문에 기본적으로 ‘a’ 테마가 적용될 것입니다. 다른 테마를 적용하기 원한다면 data-theme 속성에 원하는 테마를 a~e까지 셋팅하면 해당 테마가 적용됩니다

a테마 기본 예제입니다.

<div data-role="header" data-position="inline">
    <a href="index.html" data-icon="delete" iconpos="notext">Cancel</a>
    <h1>Bar theme "a"</h1>
    <a href="index.html" data-icon="arrow-r" data-iconpos="right" data-theme="a">Save</a>
</div>


<div data-role="content">       
<p>해더와 풋더에 각각 테마를 적용한 예제입니다.</p>               
</div><!-- /content -->

<div data-role="footer" data-theme="a">
        <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="right">left</a>
        <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
        <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="right">up</a>
        <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="right">down</a>
</div>

a테마 부터 e테마까지 위 예제를 이용해 변경해본 화면입니다.
각 태그 마다 개별 테마를 지정할 수도 있으니 이쁘게 꾸며 보세요^^