jQuery Mobile - Button markup options

버튼들은 앵커 태그를 사용하는 링크와 같은 네비게이션의 용도와 폼을 전송하기 위한 용도로 많이 사용됩니다.

-링크를 버튼 스타일로 만들기

링크를 위한 앵커 태그에 [data-role=”button”] 속성을 추가하면, 프레임웍에서 해당 링크를 버튼 스타일로 보이도록 css를 생성해 줍니다.

<a href="index.html" data-role="button">link bar</a>

-폼 버튼

편리한 스타일링을 위해 프레임웍에서 자동적으로 버튼 태그를 변환해줍니다. Input 타입이 submit, reset, button, image들도 [data-role=”button”] 속성이 없더라도 버튼 처럼 자동으로 변환해줍니다.

<button> 기본 버튼 </button>
<input type="button" value="button" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
<input type="image" value="image" />

임의의 버튼 태그에 강제로 속성을 추가해 스타일을 셋팅해 보려하니 적용이 되지 않았습니다. 그래서, 프레임웍에서 자동으로 변환하는 소스를 보니 아래와 같이 여러 스타일과 태그들로 이루어져 있었는데 이 때문인것 같네요.^^

버튼 태그 사용시에 변환된 소스
<div aria-disabled="false" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"> 기본 버튼 </span></span><button aria-disabled="false" class="ui-btn-hidden"> 기본 버튼 </button></div>