jQuery Mobile - Select menus(선택 매뉴)

선택매뉴는 기본 Select 요소와 좀 다릅니다. 하지만, 기본 select들은 뷰에 숨겨져 있으면서 JQM에 의해 스타일이 변경된 select 버튼으로 바뀝니다. 변화된 select들은 ARIA를 사용가능하며 데스크탑에서 키보드로 접근 할 수 있습니다. 선택버튼이 클릭되면, OS의 기본 select menu 선택자가 열리게 됩니다. Value가 매뉴에서 선택될 때, 사용자 지정 select 버튼은 새로운 선택과 일치하도록 업데이트 됩니다.

페이지에 select 위젯을 추가하기 위해, 표준 select요소와 option 요소의 셋을 생성하고, label 태그의 for속성에 select 태그의 id를 일치시킵니다. 그 후 div 태그로 감싸고 속성으로 data-role=”fieldcontain”을 추가합니다.
프레임웍은 모든 select 요소를 찾아서 자동적으로 사용자 선택 매뉴로 변경해줍니다.

<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>

또 optgroup 요소를 사용해 옵션 그룹을 만들수 있습니다.
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">Preferred delivery:</label>
<select name="select-choice-8" id="select-choice-nc">
<optgroup label="FedEx">
    <option value="firstOvernight">First Overnight</option>
    <option value="expressSaver">Express Saver</option>
    <option value="ground">Ground</option>
</optgroup>
<optgroup label="UPS">
    <option value="firstOvernight">First Overnight</option>
    <option value="expressSaver">Express Saver</option>
    <option value="ground">Ground</option>
</optgroup>
<optgroup label="US Mail">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express" disabled="disabled">Express: next day (disabled)</option>
    <option value="overnight">Overnight</option>
</optgroup>
</select>
</div>

알림: 기본 매뉴들은 multiple=”multiple”을 사용한 멀티셀랙션을 제공하지 못합니다. 만약, 이 속성이 필요하다면 사용자 매뉴를 사용할 것을 추천합니다.

Option to use custom menus
여러분은 기본 버전 대신에 사용자 스타일의 선택매뉴를 사용할 수 있습니다. 이것은 테마를 적용해 여러분의 사이트를 더 보기 좋게 하며, 플렛폼에 관계없이 일관적인 비쥬얼을 제공합니다. 추가적으로 multiple selection도 제공합니다. 안드로이드에서 optgroup지원과 같은 특정 플렛폼에 기능 누락을 복원하고 자리 표시자 값을 처리하는 우수한 방법을 제공합니다. 마지막으로 사용자 매뉴는 데스크탑 브라우저에서 더 좋게 보일 것입니다.
사용자 매뉴를 만들기 위해 기본 select 를 파싱하는 것이 포함됨을 기억하세요. 만약 페이지에 많은 select들이 있거나, 하나의 select 에 많은 리스트의 option이 있으면 페이지의 성능에 영향이 있습니다. 그래서 가급적 최소한으로 사용하길 추천합니다.
사용자 매뉴를 만들기 위해서 select 태그를 설정하고 data-native-menu=”false”속성을 추가합니다. 또 다른 방법으로 select menu의 nativeMenu 설정옵션을 false로 하여 프로그램적으로 셋팅할수 있습니다. 이것은 기본적으로 모든 select가 사용자 매뉴로 적용될 것입니다. jQuery가 로딩된 후 JQM이 로딩되기 전의 부분에 포함되어야 합니다.

$(document).bind('mobileinit',function(){
    $.mobile.selectmenu.prototype.options.nativeMenu = false;
});

<div data-role="fieldcontain">
<label for="select-choice-custom" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

만약, 디바이스 화면에 보여지는 것보다 select 매뉴가 너무 많으면 프레임웍에서 보기좋도록 스크롤이 있는 새로운 페이지를 만들어줍니다.

<div data-role="fieldcontain">
<label for="select-choice-3" class="select">Your state:</label>
<select name="select-choice-3" id="select-choice-3" data-native-menu="false">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>

    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>

    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>

    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>

    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>

    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>

    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>

    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>

    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
</select>
</div>

Placeholder options
대부분의 개발자들이 옵션 선택 문구를 보여주는 null 값의 옵션을 추가합니다. 만약, placeholder 옵션이 마크업에 있다면, JQM은 오버레이 매뉴에서 다른것 들을 숨길 것이고, 사용자가 선택한 값만을 보여주며 placeholder 문구를 매뉴에 보여줄 것입니다.

Placeholder 옵션 추가하기
- 값이 없는 옵션
- text node가 없는 옵션
- data-placeholder=”true”속성인 옵션

여러분은 선택매뉴 플러그인의 hideplaceholdeMenuItems옵션을 통해 이 요소를 disable 할 수 있습니다.
$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false;

<div data-role="fieldcontain">
<label for="select-choice-4" class="select">Choose shipping method:</label>
<select name="select-choice-4" id="select-choice-4" data-native-menu="false">
    <option></option>
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="select-choice-5" class="select">Choose shipping method:</label>
<select name="select-choice-5" id="select-choice-5" data-native-menu="false">
    <option>Choose one...</option>
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

<div data-role="fieldcontain">
<label for="select-choice-6" class="select">Choose shipping method:</label>
<select name="select-choice-6" id="select-choice-6" data-native-menu="false">
    <option value="choose-one" data-placeholder="true">Choose one...</option>
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

Disabled options
JQM은 Style 옵션 태그에 disabled속성을 추가하면 자동적으로 disable 합니다.

<div data-role="fieldcontain">
<label for="select-choice-7" class="select">Choose shipping method:</label>
<select name="select-choice-7" id="select-choice-7" data-native-menu="false">
    <option value="standard">Standard: 7 day</option>
    <option value="rush" disabled="disabled">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

Optgroup support
만약 select 매뉴에 optgroup 요소가 포함되어 있다면, JQM은 label속성의 문구로 구분하고 그룹아이템을 생성할 것입니다.

<div data-role="fieldcontain">
<label for="select-choice-8" class="select">Choose shipping method:</label>
<select name="select-choice-8" id="select-choice-8" data-native-menu="false">
    <optgroup label="USPS">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </optgroup>
    <optgroup label="FedEx">
        <option value="firstOvernight">First Overnight</option>
        <option value="expressSaver">Express Saver</option>
        <option value="ground">Ground</option>
    </optgroup>
</select>
</div>

Multiple selects
만약, multiple속성이 있다면, JQM은 다음의 몇가지 요소를 향상 시킬 것입니다.
- header 요소가 매뉴안에 만들어지고 placeholder 문구가 표시되며, 버튼이 닫혀집니다.
- 오버레이 매뉴에서 아이템을 클릭해도 위젯이 닫혀지지 않습니다.
- 각각의 아이템 옆에 선택 아이콘이 나타날 것입니다. 선택된 아이콘은 체크박스로 변경됩니다.
- 두개 아이템을 선택했다면, 선택된 아이템의 총 개수가 버튼 안에 나타납니다.
- 각각의 선택된 아이템의 텍스트는 리스트 처럼 버튼 안에 보여집니다. 만약 리스트가 다 보여질 만큼 화면이 넓지 않다면 타원으로 잘려 보여집니다.
- 아이템을 선택하지 않았다면, 버튼의 텍스트는 디폴트 placeholder 텍스트가 될 것입니다.
- placeholder 요소가 없다면, 기본 버튼 텍스트에 공백이 되고 해더는 닫혀진 버튼처럼 보여지게 됩니다. 이것은 사용자 경험에 친근하지 않기 때문에 항상 placeholder 요소를 사용하길 추천합니다.

<div data-role="fieldcontain">
<label for="select-choice-9" class="select">Choose shipping method(s):</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
    <option>Choose options</option>
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
</select>
</div>

Data attribute support
JQM버튼의 data-attribute 속성을 select 요소에 사용하여 테마를 적용하거나 인라인속성을 사용할 수 있습니다.

<div data-role="fieldcontain">
<label for="select-choice-11" class="select">Actions</label>
<select name="select-choice-11" id="select-choice-11" data-theme="a" data-icon="gear" data-inline="true" data-native-menu="false">
    <option value="edit">Edit user</option>
    <option value="delete">Delete user</option>
</select>
</div>

Refreshing a select
Javascript를 통해 선택을 변경하고자 할때는 업데이트를 위한 refresh method를 호출해야 합니다.

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");