모바일 응용 프로그램은 표시 할 것 물건을 도청의 단순성에 내장되어 있습니다.
jQuery를 모바일에서 버튼 만들기
jQuery를 모바일에있는 버튼은 세 가지 방법으로 생성 할 수 있습니다 :
- 은 Using <input> 요소를
- 은 Using <button> 으로 요소 class="ui-btn"
- 은 Using <a> 와 요소 class="ui-btn"
jQuery를 모바일에서 버튼이 자동으로 모바일 기기와 데스크톱 컴퓨터 모두에서 그들을 매력적이고 유용한 만들기, 스타일 수 있습니다. 우리는 당신이 사용하는 것이 좋습니다 <a> 와 요소 class="ui-btn" 페이지 사이를 연결하고,하기 <input> 또는 <button> 양식 제출에 대 한 요소.
참고 : 버전 1.4 전에, 우리가 사용하는 data-role="button" jQuery를 모바일에서 버튼을 생성하는 속성을. 1.4으로, 스타일 버튼에 프레임 워크를 사용 CSS 클래스 (제외 <input> 버튼).
탐색 버튼
사용, 버튼으로 페이지 간 연결하려면 <a> 과 요소 class="ui-btn" :
그룹화 된 버튼
jQuery를 모바일 함께 버튼을 그룹화하는 쉬운 방법을 제공합니다.
사용 data-role="controlgroup" 와 함께 속성 data-type="horizontal|vertical" : 컨테이너 요소에, 여부를 가로 또는 세로로 그룹 버튼에 지정
예
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
»그것을 자신을 시도 기본적으로 그룹화 된 버튼은 그들 사이의 여백과 공간을 수직으로 그룹화됩니다. 그리고 첫 번째와 마지막 버튼을 그룹화 할 때 좋은 모양을 생성하는, 모서리를 둥글게하고있다.
돌아 가기 버튼
백 버튼을 만들려면 사용 data-rel="back" 속성 (:이 앵커의 무시 주 href 값) :
인라인 버튼
기본적으로 버튼은 화면의 전체 폭을 차지합니다. 당신이 버튼을 원하는 경우 그 내용으로 만 넓은, 또는 당신이 나란히 표시 두 개 이상의 버튼을 원하는 경우 추가 "ui-btn-inline" 클래스를 :
링크 버튼에 대한 더 많은 CSS 클래스
| 수업 | 기술 | 예 |
|---|---|---|
| ui-btn-b | 흰색 텍스트와 검은 배경에 버튼의 색상을 변경합니다 (기본값은 검정색 텍스트와 회색 배경입니다). | 시도 해봐 |
| ui-corner-all | 버튼에 둥근 모서리를 추가합니다 | 시도 해봐 |
| ui-mini | 버튼을 작게 만든다 | 시도 해봐 |
| ui-shadow | 버튼에 그림자를 추가합니다 | 시도 해봐 |
당신은 하나 이상의 클래스를 사용하여 같은 공백으로 각 클래스를 구분합니다 : class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
기본적으로 <input> 버튼 그림자와 둥근 모서리가 있습니다. <a> 과 <button> 요소는하지 않습니다.
일반적인 스타일에 대한 CSS 클래스의 완전한 참고로, 우리의 방문 jQuery를 모바일 CSS 클래스 참조 .
다음 장에서는 버튼에 아이콘을 연결하는 방법을 보여줍니다.