HTML element를 jQuery Mobile selection list로 바꾸기

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-btn class 가 있는 <div>는 이제 <a> element 입니다. 그리고 ui-btn class를 가지고 있습니다. 이것은 selection list 를 open 하기 위한 버튼이 됩니다.
  

•  ui-selectmenu 와 ui-selectmenu-hidden CSS classes 가 있는 <div> element가 다른 element들 다음에 insert 됐습니다. 여기에는 여러 <li> elements를 가지고 있는 <ul> element가 포함돼 있습니다. 이 <div> element는 버튼을 누르면 나올 리스트입니다. 이제 native display 보다 더 style 된 나아진 display 를 보시게 될 겁니다.
  

ui-selectmenu-hidden class는 리스트가 현재 display 되지 않는 것을 가리킵니다. (이 리스트는 버튼이 클릭 됐을 때 보여질 겁니다.) 이것을 하기 위해 이 클래스는 element 의 top 과left CSS properties 를 -9999px로 정의했습니다. 이것은 화면 밖 어딘가에 있을 겁니다. 버튼을 클릭하면 jQuery Mobile 은 이 CSS class를 없앱니다. 그리고 element 이 top 과left를 window안에 그 list를 display 합니다.