selection list 를 open 하려면 <select> element에 selectmenu ("open") method 를 사용하시면 됩니다. 닫으려면 selectmenu ("close") method 를 사용하시구요.
이 두 메소드는 <select> element 가 data-native-menu="false" attribute 가 있는 경우에만 동작합니다. 그러니까 native selection list에 대해서는 이 메소드들을 갖고 open 하거나 close 할 수 없는거죠.
아래에는 list 가 이미 HTML 안에 있는 경우와 다이나믹하게 jQuery 에 의해 생성된 경우 이 두 메소드를 사용하는 방법을 다룰 겁니다.
Selection list already present in the HTML
Open a selection list since its creation
<!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>
<select data-native-menu=false>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").bind ("selectmenucreate", function ()
{
$("select").selectmenu ("open");
});
</script>
selection list 의 HTML code 는 jQuery Mobile 에 의해 수정됐습니다. 우리는 selectmenu ("open") method를 call 하기 전에 이 리스트가 완전히 생성될 때까지 기다려야 합니다. 만약 이 selection list 가 제 위치에 제대로 display 되지 않는다면 이것을 css () method를 사용해서 바꿔주어야 합니다.
Position the selection list to 25 pixels from the left
$("select").bind ("selectmenucreate", function ()
{
$("select").selectmenu ("open");
$(".ui-selectmenu").css ( { top : "130px", left : "25px" } );
});
tistory466_01.htmlSelection list dynamically created
이제 selection list의 HTML code 를 JavaScript 를 통해 insert 하겠습니다.
Create and open 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);
$("select").bind ("selectmenucreate", function ()
{
$("select").selectmenu ("open");
$(".ui-selectmenu").css ( { top : "130px", left : "25px" } );
});
</script>
약간 변형시키는 것도 가능합니다. pagecreate event (instead of before this event as above) 에서 이 HTML 코드를 insert 한다면 리스트가 insert 됐을 때 window는 이미 생성돼 있을 겁니다. 그 다음에 오리지널 HTML code 가 jQuery Mobile convention에 맞게 display 될 겁니다. 이 작업은 <select>
element 에서 selectmenu
() method 가 call 되면서 이루어 집니다.
Create the selection list after creating the window
<!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>
$("#home").bind ("pagecreate", function ()
{
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);
$("select").selectmenu ();
$("select").selectmenu ("open");
$(".ui-selectmenu").css ( { top : "130px", left : "25px" } );
});
</script>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| selection list 관련 예제들 (0) | 2012.11.18 |
|---|---|
| selectiion list customize 하기 (0) | 2012.11.17 |
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |
| selection list 추가하기와 지우기 (0) | 2012.11.15 |
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |