외부메모리 -_-

디폴트 버튼의 가로 길이는 스크린을 꽉 채운 형태입니다.
만약, 작은 버튼을 만들고자 한다면, 버튼 속성으로 data-inline=”true” 를 추가해 주면 됩니다.

<a href="index.html" data-role="button" data-inline="true">Button</a>

만약, 같은 라인에 여러 버튼을 나열하고 싶은때는 버튼 태그를 data-inline=”true” 속성을 추가한 상위 div 태그로 감싸줍니다.

<div data-inline="true">
<a href="index.html" data-role="button">Cancel </a>
<a href="index.html" data-role="button" data-theme="b">Save </a>
< /div>

하지만 실제로 해보니 아직은 적용이 안되네요. 버젼이 올라가면 가능해질 것 같습니다.
불편하지만 현재까지는 각 태그별로 속성을 추가하여야 합니다.

<a href="index.html" data-role="button" data-inline="true">Cancel lalalaalal</a>
< a href="index.html" data-role="button" data-theme="b" data-inline="true">Save</a>

Adding Icons to Buttons

버튼에 아이콘을 추가할 수 있습니다.
JQM 프레임웍은 모바일 앱에서 자주 사용되는 아이콘을 포함하고 있습니다.
저용량 다운로드 JQM버젼에는 모든 배경색에 훌륭하게 대비될 수 있는 검정색의 반투명 원모양위에 하얀색 아이콘을 포함하고 있습니다. data-icon 속성을 추가하여 사용합니다.

< a href="index.html" data-role="button" data-icon="delete">Delete</a>

Icon set

Left arrow - data-icon="arrow-l"

Right arrow - data-icon="arrow-r"

Up arrow - data-icon="arrow-u"

Down arrow - data-icon="arrow-d"

Delete - data-icon="delete"

Plus - data-icon="plus"

Minus - data-icon="minus"

Check - data-icon="check"

Gear - data-icon="gear"

Refresh - data-icon="refresh"

Forward - data-icon="forward"

Back - data-icon="back"

Grid - data-icon="grid"

Star - data-icon="star"

Alert - data-icon="alert"

Info - data-icon="info"

Home - data-icon="home"

Search - data-icon="search"

Icon positioning

아이콘의 디폴트 위치는 왼쪽입니다.
아이콘의 위치 설정 속성은 data-iconpos=[right, top, bottom] 입니다.
notext 값을 주면 버튼의 텍스트 부분이 줄어 아이콘 버튼이 됩니다.

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">right position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">top position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">bottom position icon Delete </a>
< a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">notext icon Delete </a>

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

Styling links as buttons

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

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

Form buttons

편리한 스타일링을 위해 프레임웍에서 자동적으로 버튼 태그를 변환해줍니다. 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" />