Selector
Selector의 기본 형식은 OS의 Selector 메뉴 형식에 따라 다르게 나타난다.
또한 팝업 형으로 펼침 방식을 변경 할 수 있으며 <option>의 개수에 따라 자동적으로 형태를 바꿔준다.
<label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label> 과 <selector>를 감싸야 하며 <label>의 for 속성과 Selector의 id 속성 값이 동일 해야한다.
기본코드
<label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <select>를 감싸야 하며
<label> for 속성과 <selector>의 id 속성의 값이 동일 해야한다.
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
모양변경
Selctor의 모양을 사각으로 만들고 싶다면 <select> Tag에 data-corners="false" 을 추가한다
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1" data-corners="false">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
Selctor의 아이콘을 변경하고 싶다면 <select> Tag에 data-icon="[icon]" 을 추가한다
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1" data-icon="star">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
Selctor의 아이콘의 위치를 변경하고 싶다면 <select> Tag에 data-iconpos="[right, left]" 을 추가한다
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1" data-iconpos="left">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
Selctor의 크기를 작게 하고 싶다면 <select> Tag에 data-inline="true" 을 추가한다
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1" data-inline="true">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
Selctor의 Shadow를 제거하고싶다면 <select> Tag에 data-shadow="false" 을 추가한다
선택 하시오:
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">선택 하시오:</label>
<select name="select-choice-1" id="select-choice-1" data-shadow="false">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
형태 변경
Selector option을 그룹화 하여 나타낼 수 있으며 기본코드에 <optgroup label="그룹이름"> 를 추가하여
그룹화 할 option들을 감싼다.
선택하시오:
사과
바나나
포도
양파
토마토
당근 (disabled)
양배추
<div data-role="fieldcontain">
<label for="select-choice-nc" class="select">선택하시오:</label>
<select name="select-choice-8" id="select-choice-nc">
<optgroup label="과일">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
</optgroup>
<optgroup label="야채">
<option value="onion">양파</option>
<option value="tomato">토마토</option>
<option value="carrot" disabled="disabled">당근 (disabled)</option>
<option value="cabbage">양배추</option>
</optgroup>
</select>
</div>
Selector를 눌렀을 때 option이 팝업형태와 페이지 형태로 보이도록 한다.
팝업 효과는 기본코드의 <select name> tag에 data-native-menu="false" 를 추가하며 option의 길이가 브라우저 넓이를 초과할 시
자동으로 팝업 형태로 출력된다.
선택하시오 :
사과
바나나
포도
양파
<select name="select-choice-1" id="select-choice-custom" data-native-menu="false">
또한 Selector의 기본 선택을 위해서는 첫번째 <option> Tag 에 기본 option을 추가한다.
선택하시오 :
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-5" class="select">선택하시오 : </label>
<select name="select-choice-5" id="select-choice-5" data-native-menu="false">
<option></option>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
option을 비활성화하고 싶다면 <option value>에 disabled="disabled" 를 추가한다
선택하시오 :
과일
사과
바나나
포도
양파
<option value="banana" disabled="disabled">바나나 </option>
선택 효과
여러개의 속성을 선택 할수 있으며 Select Tag에 multiple="multiple" 을 추가 한다.
이 역시 형태 변경과 동일하게 option의 길이가 브라우저 넓이를 초과 할시 자동으로 팝업 형태로 출력된다
선택 하시오:
과일
사과
바나나
포도
양파
<div data-role="fieldcontain">
<label for="select-choice-9" class="select">선택 하시오:</label>
<select name="select-choice-9" id="select-choice-9" multiple="multiple" data-native-menu="false">
<option>과일선택</option>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
새로고침
Selector는 새로고침 기능이 제공된다.
Javascript에 아래 코드를 추가 한 후 이벤트로 연결 해주면 지정한 option으로 돌아간다.
선택하시오 :
과일
사과
바나나
포도
양파
refresh
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh")
Switch
기본 코드
Switch는 이진 형식을 따르며 좌우로 선택 하능 하도록 되어있다.
<label>과 같은 행으로 나타 내고 싶을 때는 <fieldcontain>으로 <label>과 <slider>를 감싸야 하며 <label>의 for 속성과 <slider>의 id 속성 값이 동일 해야한다.
선택하시오 :
Off
On
<div data-role="fieldcontain" data-theme="a">
<label for="slider">선택하시오 :</label>
<select name="slider" id="slider" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
새로고침
Switch는 새로고침 기능이 제공된다.
자바 스크립트에 아래 코드를 추가 한 후 이벤트로 연결 해주면 지정한 option으로 돌아간다.
선택하시오 :
Off
On
refresh
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch.selectmenu("refresh")