selection list 들은 jQuery Mobile 에 의해서 처리됩니다. jQuery Mobile 은 <select>
element 를 사용하고 한개 이상의 <option>
elements 를 포함합니다. jQuery 의 standard method들도 jQuery Mobile 에 의해 추가된 selectmenu
() method 처럼 유용합니다. selection list들은 standard selectmenu component 와 관계되어 있습니다.
selection list를 생성하려면 한개 이상의 <option>
elements 를 포함한 <select>
element 를 넣으면 됩니다.
value
attribute는 <option>
elements 의 필수 요소입니다. 이것은 jQuery Mobile 에 의해 리스트의 일 부분으로 간주 됩니다. jQuery Mobile convention 처럼 리스트를 display 한다면 true 입니다. 하지만 그 리스트가 브라우저의 native aspect 로 display 되면 true 가 아닙니다. 이 후의 예제들은 jQuery Mobile에 의해 improve된 non-native로 display 할 겁니다.
Dynamically creating a selection list
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment type: </span>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<select data-native-menu=false>";
html += "<option value=1> 1 bedroom </option>";
html += "<option value=2> 2 bedrooms </option>";
html += "<option value=3> 3 bedrooms </option>";
html += "<option value=4> 4 bedrooms </option>";
html += "<option value=5> 5 bedrooms </option>";
html += "</select>";
$("#home div:jqmData(role=content)").append (html);
</script>
tistory461_01.html이 예제를 실행하면 아래와 같이 보일 겁니다. 버튼을 누르면 리스트가 열릴 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| selection list 추가하기와 지우기 (0) | 2012.11.15 |
|---|---|
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |