JQuery Mobile - Theming buttons

Theming buttons

jQuery Mobile은 아주 훌륭한 theming system 을 가지고 있습니다. 이  시스템을 이용하면 어떻게 버튼을 style 할 지 정한 후 쉽게 그것을 구현할 수 있도록 도와줍니다.

container에 link가 add 되면 버튼 안의 텍스트 색은 자동적으로 그 버튼 bar나 content box의 색에 따라 시각적으로 구별될 수 있는 색으로 할당 됩니다.  버튼이 theme a 가 적용된 container에 위치되게 되면 버튼의 색은 자동적으로 theme a 가 됩니다. 

Assigning theme swatches

버튼 markup에 data-theme attribute를 추가하면 원하는 button color swatch를 적용할 수 있습니다.

			
<a href="index.html" data-role="button" data-theme="a">Swatch a</a>			

아래에 data-theme attribute를 통해 assign된 여러 버튼이 있습니다.

Theme variations

Swatch "a" on container with themed buttons inside

ButtonThemes.html