jQuery 모바일 개발에서 인라인 버튼과 그룹 버튼 작성에 대한 간략한 분석_jquery

인라인 버튼 data-inline=true
기본적으로 본문 콘텐츠 내의 모든 버튼은 블록 수준 요소라고 부르므로 화면 너비를 채웁니다.

그러나 버튼이 컴팩트하게 보이고 너비가 내부 텍스트와 아이콘에만 맞도록 하려면 버튼에 data-inline="true" 속성을 추가하세요.

동일한 줄에 나란히 배치되어야 하는 여러 개의 버튼이 있는 경우 각 버튼에 대해 data-inline="true" 속성을 설정하세요. 이렇게 하면 버튼의 스타일이 콘텐츠 너비에 맞춰지고 버튼이 같은 줄에 배치되도록 플로팅됩니다.

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

인라인 버튼의 더 컴팩트한 버전을 만들려면 data-mini="true"를 추가하세요.

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

그룹 버튼 data-role=controlgroup
때로는 버튼 그룹을 별도의 컨테이너에 넣어 별도의 탐색 위젯처럼 보이도록 하고 싶을 때가 있습니다. 컨테이너의 버튼 그룹을 래핑한 다음 data-role="controlgroup" 속성을 컨테이너에 추가할 수 있습니다. Jquery Mobile은 수직 버튼 그룹을 생성하고 버튼 사이의 여백과 그림자를 삭제한 다음 처음 첫 번째와 마지막 버튼은 모서리가 둥글게 되어 있어 버튼 그룹처럼 보입니다.

<div data-role="controlgroup">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

가로 정렬 data-type="horizontal"

기본적으로 그룹 버튼은 세로 목록으로 표시됩니다. 컨테이너에 data-type="horizontal" 속성을 추가하면 가로 버튼 목록으로 변환될 수 있습니다. 내용의 너비에 맞게 크기만 설정하세요. ((그래서 가로 레이아웃에서 버튼이 너무 많거나 버튼에 단어가 너무 많이 들어가지 않도록 주의하세요)

<div data-role="controlgroup" data-type="horizontal">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

미니 버전 data-mini="true"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button">Yes</a>
 <a href="index.html" data-role="button">No</a>
 <a href="index.html" data-role="button">Maybe</a>
</div>

아이콘만 data-iconpos="notext"

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
 <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
 <a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext">Down</a>
 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>