jQuery Mobile 버튼

모바일 애플리케이션은 터치操作의 편리성 위에 구축되었습니다.

jQuery Mobile에서 버튼을 생성하다

jQuery Mobile에서 버튼은 세 가지 방법으로 생성할 수 있습니다:

  • <button> 요소를 사용하여
  • <input> 요소를 사용하여
  • data-role="button"를 사용하는 <a> 요소

<button>

<button>버튼</button>

직접 시험해 보세요

<input>

<input type="button" value="버튼">

직접 시험해 보세요

<a>

<a href="#" data-role="button">버튼</a>

직접 시험해 보세요

힌트：jQuery Mobile의 버튼은 자동으로 스타일을 얻어 이동 장치에서의 상호작용성과 사용성을 강화합니다. 페이지 간의 링크를 생성하려면 data-role="button"의 <a> 요소를 사용하고, <input> 또는 <button> 요소를 사용하여 양식을 제출하도록 권장합니다。

네비게이션 버튼

버튼을 통해 페이지를 링크하려면 data-role="button"의 <a> 요소를 사용하세요：

예제

<a href="#pagetwo" data-role="button">페이지 두 번째로 이동</a>

직접 시험해 보세요

행내 버튼

기본적으로, 버튼은 화면의 전체 너비를 차지합니다. 버튼이 내용에 맞게 조정되거나 두 개나 많은 버튼이 모두 열려 표시되어야 할 경우 data-inline="true"를 추가하세요：

예제

<a href="#pagetwo" data-role="button" data-inline="true">페이지 두 번째로 이동</a>

직접 시험해 보세요

조합 버튼

jQuery Mobile은 버튼 조합을 간단하게 제공합니다。

data-role="controlgroup" 속성과 data-type="horizontal|vertical"를 함께 사용하여 버튼을 수직이나水平的로 조합하도록 설정하세요：

예제

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">버튼 1</a>
  <a href="#anylink" data-role="button">버튼 2</a>
  <a href="#anylink" data-role="button">버튼 3</a>
</div>

직접 시험해 보세요

힌트：기본적으로, 조합 버튼은 수직으로 그룹화되며, 간격이나 공백이 없습니다. 또한 첫 번째와 마지막 버튼만 둥근 모서리를 가지고 있어 조합 후에 아름다운 외관을 만듭니다.

뒤로 가기 버튼

뒤로 가기 버튼을 생성하려면 data-rel="back" 속성을 사용하세요（앵커의 href 값은 무시됩니다）：

예제

<a href="#" data-role="button" data-rel="back">뒤로 가기</a>

직접 시험해 보세요

更多用于按钮的 data-* 속성

속성 값 설명 예제
data-corners true | false 버튼에 둥근 모서리가 있는지 확인합니다. 테스트
data-mini true | false 소형 버튼인지 확인합니다. 테스트
data-shadow true | false 버튼에 그림자가 있는지 확인합니다. 테스트

jQuery Mobile data-* 속성에 대한 완전한 정보는 우리의 jQuery Mobile Data 속성 참조 매뉴얼.

버튼에 아이콘을 추가하는 방법을 설명합니다.