참조 - 삶의 조각들
select 양식은 여러개의 항목 중에서 하나를 선택할 수 있는 UI이다. <select>태그를 사용해서 표현한다.
단순히 <select>태그를 사용하면 각 모바일 기기에서 제공하는 입력 도구가 나오기 때문에 통일성이 없다. 모바일 기기에 상관없이 동일한 UI가 나오기를 원하면 data-native-menu="false" 속성을 추가한다.
<div data-role="fieldcontain">
<label for="phoneKind">Select :</label>
<select id="phoneKind" name="phoneKind" data-native-menu="false">
<option value="iphone4">iPhone 4</option>
<option value="iphone5">iPhone 5</option>
<option value="iphone5s">iPhone 5S</option>
</select>
</div>
<select> 태그에 사용할 수 있는 data-* 속성
data-* 속성 | 설명 | 값 |
data-icon | 아이콘 지정 | home | delete | plus | arrow-u | arrow-d (default) | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search |
data-iconpos | 아이콘 위치 조정 | left | right (default) | top | bottom | notext |
data-inline | 항목 글자 길이에 맞춤 | true | false (default) |
data-native-menu | 기기에서 제공하는 선택 도구 사용 여부 | swatch letter (a-z) |
data-overlay-theme | jQuery Mobile 선택 도구 테마 - data-native-theme가 false일 경우 | swatch letter (a-z) |
data-theme | select 양식 테마 | swatch letter (a-z) |