jQuery Mobile - Theming Buttons

JQM은 버튼들의 스타일을 제어하는 rich theming system 을 가지고 있습니다.
테마가 적용된 Container에 하위 태그가 하나 추가가 되면, 자동적으로 부모 container가 가지고 있는 테마를 적용 받습니다. 그래서 ‘a’ 테마가 적용된 content의 자식 개체들은 자동적으로 a 테마를 적용 받습니다.
아래 버튼들은 같은 html 마크업에 다른 테마를 적용했습니다.

<div data-role="content" data-theme="a"><h4>A swatch</h4><a href="index.html" data-role="button" >Button</a></div>
<div data-role="content" data-theme="b"><h4>B swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="c"><h4>C swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="d"><h4>D swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="content" data-theme="e"><h4>E swatch</h4><a href="index.html" data-role="button">Button</a></div>
<div data-role="button" ><h4>A swatch</h4><a href="index.html" data-role="button" data-theme="a">Button</a></div>

마지막 예제와 같이 상위 태그를 버튼으로 하고 하위 버튼에 테마를 적용하면, 기본 테마의 버튼안에 글자와 테마가 적용된 버튼을 구성으로 보여집니다.

각각의 버튼에도 테마를 적용할 수 있습니다.
<a href="index.html" data-role="button" data-theme="a">Theme a</a>

상위태그에 테마가 적용되어 있어도 하위 태그에서 다른 테마를 적용할 수 있습니다.
프레임웍이 제공하는 테마는 a~e까지 5가지 입니다. 만약, 테마 f를 적용하였을 경우 오류가 발생하는 것이 아니라 디폴트 테마로 보여지게 됩니다.