Turning an HTML element into a jQuery Mobile selection list다음의 두가지 경우를 생각해 봅시다.
먼저 native display 의 selection list 를 사용하는 경우. 이 경우는 <select>
element에 있는 data-native-menu
attribute 가 "false" 가 아닙니다.
그 다음 경우는 display 가 non-native를 사용하는 경우. 예를 들어 jQuery Mobile에 의해 좀 더 improve 된 selection list를 display 하는 경우. 이 경우는 data-native-menu
attribute 를 "false"로 세팅합니다.
Using the native display selection lists
이전의 예제를 사용하겠습니다. <select>
element description 안에 data-native-menu="false"
attribute를 넣습니다.
<select>
element without the data attribute-native-menu="false"
<script>
var html = "";
html += "<select>";
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>
Firebug로 jQuery Mobile에 의해 만들어진 HTML 은 아래와 같습니다.
original <select>
element가 두개의 <div>
elements 안에 둘러 쌓여져 있습니다. 하나는 ui-select
CSS class 이고 다른 하나는 ui-btn
class 입니다. 그것들은 selection list를 open 할 수 있는 window의 버튼으로 표시됩니다. 위의 ui-btn-inner
CSS class 가 있는 <span>
element는 버튼에 display 된 list안에 선택된 아이템과 연관돼 있습니다.
Using the improved display selection lists
이제 <select>
element description에 data-native-menu="false"
attribute를 넣어 보겠습니다.
<select>
element with the data-native-menu="false" attribute
<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>
tistory462_01.html
다음을 제외하고는 위의 예제와 같습니다.
ui-selectmenu-hidden
class는 리스트가 현재 display 되지 않는 것을 가리킵니다. (이 리스트는 버튼이 클릭 됐을 때 보여질 겁니다.) 이것을 하기 위해 이 클래스는 element 의 top 과left
CSS properties 를 -9999px로 정의했습니다. 이것은 화면 밖 어딘가에 있을 겁니다. 버튼을 클릭하면 jQuery Mobile 은 이 CSS class를 없앱니다. 그리고 element 이 top
과left를 window안에 그 list를 display 합니다.
action10.php
