본문 바로가기
프로그램/jQuery Mobile

22. select 양식

by 로드러너 2013. 12. 26.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

Index

20. HTML5 에서 추가된 폼 양식

21. range 양식, slider

22. select 양식

23. checkbox, radio 버튼 양식

24. flip toggle 양식

 

 

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)

 

 

 

[영어회화] Just about. 거의

'프로그램 > jQuery Mobile' 카테고리의 다른 글

24. flip toggle 양식  (0) 2013.12.28
23. checkbox, radio 버튼 양식  (0) 2013.12.27
21. range 양식, slider  (0) 2013.12.25
20. HTML5 에서 추가된 폼 양식  (0) 2013.12.23
19. jQuery Mobile 폼 양식  (0) 2013.12.22