jQuery Mobile 양식 기본사항
jQuery Mobile은 HTML 양식의 스타일을 자동으로 지정하여 더욱 매력적이고 터치하기 쉽게 만듭니다.
jQuery 모바일 양식 구조
jQuery Mobile은 CSS를 사용하여 HTML 양식 요소의 스타일을 지정하므로 더욱 매력적이고 사용하기 쉽습니다.
jQuery Mobile에서는 다음 양식 컨트롤을 사용할 수 있습니다.
텍스트 입력 상자
검색 입력 상자
라디오 버튼
Checkbox
메뉴 선택
- 슬라이더
- Flip Toggle Switch
- <form> 요소에는 메서드와 작업 속성이 있어야 합니다.
- 각 Form 요소에는 고유한 "id가 있어야 합니다. " 기인하다. ID는 사이트의 모든 페이지에서 고유해야 합니다. 이는 jQuery Mobile의 단일 페이지 탐색 메커니즘을 통해 여러 다른 페이지를 동시에 렌더링할 수 있기 때문입니다
- 각 양식 요소에는 레이블이 있어야 합니다. 요소의 id
instance태그를 숨기려면 ui-hidden-accessible 클래스를 사용하세요. 이는 요소의 자리 표시자 속성을 레이블로 사용할 때 자주 사용됩니다. ’ s s ’ s ’ s ’ s ‐ ‐ ‐ 에
입력 상자의 내용을 지우는 버튼을 추가하는 data-clear-btn="true" 속성(온라인 예제
<form method="post" action="demoform.html"> <label for="fname">姓名:</label> <input type="text" name="fname" id="fname"> </form>
입력 상자를 지우는 버튼은 다음에서 사용할 수 있습니다. <input> 요소에 있지만 <textarea>에는 없습니다. 검색 상자에서 data-clear-btn의 기본값은 "true"입니다. data-clear-btn="false"를 사용하여 아이콘을 제거할 수 있습니다.
jQuery 모바일 양식 아이콘
양식의 버튼 코드는 표준 HTML <input> 재설정, 제출). 자동으로 스타일을 렌더링하고 모바일 장치 및 데스크톱 장치에 자동으로 적응할 수 있습니다.
Example
<form method="post" action="demoform.html"> <label for="fname" class="ui-hidden-accessible">姓名:</label> <input type="text" name="fname" id="fname" placeholder="姓名..."> </form>
<입력> 버튼에 추가 스타일을 추가해야 하는 경우 다음을 사용할 수 있습니다. 테이블 데이터-* 속성:
| 속성 | 값 | 설명 |
|---|---|---|
| data-corners | true | false | 버튼의 모서리가 둥근지 여부 지정 |
| 데이터 아이콘 | 아이콘 참조 버튼 아이콘 지정 | Left |
| Data-Inline | true | 여부를 지정합니다. 연결된 버튼 내에 있습니다 | data-mini |
| 미니 버튼인지 지정하세요 | data-shadow | |
| | false | effect | |
Example<label for="fname">姓名:</label> <input type="text" name="fname" id="fname" data-clear-btn="true"> |
레이블과 양식 요소를 와이드 스크린에 더 적합하게 만들려면 <를 "ui- field-contain" 클래스 ;div> 또는 <fieldset> 요소는 레이블/양식 요소를 둘러쌉니다:
인스턴스
<input type="button" value="按钮"> <input type="reset" value="重置按钮"> <input type="submit" value="提交按钮">
ui-field-contain 클래스는 페이지 너비를 기준으로 합니다. 레이블 및 양식 컨트롤의 경우 스타일을 추가합니다. 페이지 너비가 480px보다 크면 자동으로 양식 컨트롤과 같은 줄에 레이블이 배치됩니다. 페이지 너비가 480px보다 작으면 레이블이 양식 요소 위에 배치됩니다.
