jQuery를 모바일 자동 스타일 HTML 양식들을 결합 및 터치 친화적 보이게.
jQuery Mobile Form 구조
jQuery를 모바일 그들에게 매력적이고 사용하기 쉬운 만들기, 스타일 HTML 양식 요소에 CSS를 사용합니다.
jQuery를 모바일에서 다음과 같은 양식 컨트롤을 사용할 수 있습니다 :
- 텍스트 입력
- 검색 입력
- 라디오 버튼
- 체크 박스
- 메뉴를 선택합니다
- 슬라이더
- 플립 토글 스위치
jQuery를 모바일 형태로 작업 할 때 당신은 알고 있어야합니다 :
- <form> 요소는 방법 및 동작 특성이 있어야합니다
- 각 폼 요소는 고유 한 "ID"속성이 있어야합니다. ID는 사이트의 페이지에서 고유해야합니다. 이 JQuery와 모바일의 단일 페이지 내비게이션 모델은 여러 "페이지"가 동시에 존재할 수있게되기 때문에
- 각 양식 요소는 레이블이 있어야합니다. 요소의 ID와 일치하는 라벨의 속성의 설정
예
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
»그것을 자신을 시도 팁 : 입력 필드의 예상 값을 설명하는 짧은 힌트를 지정하는 자리 표시자를 사용하여
예
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
»그것을 자신을 시도 팁 : 레이블을 숨기려면 사용 "ui-hidden-accessible" 클래스를. 당신이 요소의 자리 표시 자 속성이 레이블 역할을 할 때 자주 사용된다 :
예
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
»그것을 자신을 시도 팁 : 당신이 원하는 경우 "clear button" (필드의 내용을 지우고 입력 필드의 오른쪽에 X 아이콘), 데이터 맑은-BTN = "true"로 속성을 추가 :
예
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
»그것을 자신을 시도 "clear button" 모든에 추가 할 수 있습니다 <input> 을 제외하고, 요소 <textarea> . 검색 필드는 설정이 속성이 "true" , 변경 단순히 지정 - 기본적으로 data-clear-btn="false" .
jQuery를 이동할 수있는 형태의 버튼
형태의 버튼은 표준 HTML로 코딩되어 <input> 요소 (버튼, 제출 리셋). 그들은 자동으로 모두 모바일 장치 및 데스크톱 컴퓨터에 그들이 매력적이고 사용하기 쉬운하고, 스타일된다 :
예
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
»그것을 자신을 시도 추가적으로 <입력> 버튼 스타일을, 아래 표에 나와있는 데이터 - * 속성 중 하나를 사용하십시오
굵게 값은 기본 값을 나타냅니다.
| 속성 | 값 | 기술 |
|---|---|---|
| data-corners | true | false | 버튼이 둥근 모서리가 없거나할지 여부를 지정합니다 |
| data-icon | Icons Reference | 버튼의 아이콘을 지정합니다 |
| data-iconpos | left | right | top | bottom | notext | 아이콘의 위치를 지정합니다 |
| data-inline | true | false | 버튼 인라인 여부를할지 여부를 지정합니다 |
| data-mini | true | false | 버튼이 작거나없는할지 여부를 지정합니다 |
| data-shadow | true | false | 버튼 그림자이 없거나할지 여부를 지정합니다 |
포함 또는 속성 (들)이 /가 원하지 않는 원하는 제외 :
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
»그것을 자신을 시도 Field Containers
라벨 및 양식 요소가 더 넓은 화면에서 제대로 보이게하기 위해, 포장 <div> 또는 <fieldset> 와 요소를 "ui-field-contain" 라벨 / 폼 요소 주위 클래스 :
예
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
»그것을 자신을 시도 "ui-field-contain" 페이지의 폭에 따라 클래스 스타일의 라벨과 폼 컨트롤을. 페이지 폭 480 픽셀보다 클 때, 자동 형태 제어와 같은 줄의 라벨을 놓는다. 때보다 480 픽셀, 레이블은 폼 요소 위에 배치됩니다.
팁 : 자동 스타일 tappable / 클릭 할 수있는 요소는 사용하는 jQuery를 모바일을 방지하려면 data-role="none" 속성 :
예
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
»그것을 자신을 시도 의 jQuery 모바일에서 양식 제출
jQuery를 모바일 자동 AJAX를 통해 양식 제출을 처리하고, 응용 프로그램의 DOM에 서버 응답을 통합하려고 시도합니다.