2016. 3. 24. 10:35ㆍlanguage/jquery mobile
form 요소 두번째 시간입니다.
이번시간에는 Filp Switch , Checkbox, Radio Button 에 대해서 설명하겠습니다.
Filp Switch
Filp Switch 는 말 그대로 스위치 입니다. 플립 토글 이라고도 부릅니다.
실제 사용시 유용하게 사용되며 설정 부분이나 일정한 기능을 끄고 켜는 인터페이스를 구현할 경우 많이 사용합니다.
|
1
2
3
4
5 |
<label for="slider2">Flip switch:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select> |
cs |
2번 라인 : form 요소 중 select 태그를 사용하고 data-role="slider" 속성을 사용합니다. option 은 2개만 가능하니 주의하시기 바랍니다.
크기를 작게 만들 수도 있습니다.
|
1
2
3
4
5 |
<label for="slider-flip-m">Mini flip switch:</label>
<select name="slider-flip-m" id="slider-flip-m" data-role="slider" data-mini="true">
<option value="off">No</option>
<option value="on" selected="">Yes</option>
</select> |
cs |
2번 라인 : data-mini="true" 속성을 설정하면 작은 Filp Switch가 됩니다.
Checkbox
사용자가 무엇을 다중으로 선택하거나 체크할 경우 많이 사용됩니다.
|
1
2
3
4
5
6
7
8
9
10
11 |
<fieldset data-role="controlgroup">
<legend>Checkboxes, vertical controlgroup:</legend>
<input name="checkbox-1a" id="checkbox-1a" type="checkbox" checked="">
<label for="checkbox-1a">Cheetos</label>
<input name="checkbox-2a" id="checkbox-2a" type="checkbox">
<label for="checkbox-2a">Doritos</label>
<input name="checkbox-3a" id="checkbox-3a" type="checkbox">
<label for="checkbox-3a">Fritos</label>
<input name="checkbox-4a" id="checkbox-4a" type="checkbox">
<label for="checkbox-4a">Sun Chips</label>
</fieldset> |
cs |
1번 라인 : fieldset 태그를 사용하고 data-role="controlgroup" 속성을 이용해서 checkbox들을 묶어줍니다. (그룹핑)
input 태그를 사용하여 type="checkbox" 속성을 주어 기존에 checkbox 처럼 사용합니다.
그림처럼 자동으로 체크박스가 그룹화가 된 것을 확인할 수 있습니다.
Checkbox를 버튼식으로 표현할 수 도 있습니다.
|
1
2
3
4
5
6
7
8
9 |
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Checkboxes, mini, horizontal controlgroup:</legend>
<input name="checkbox-6" id="checkbox-6" type="checkbox">
<label for="checkbox-6">b</label>
<input name="checkbox-7" id="checkbox-7" type="checkbox" checked="">
<label for="checkbox-7"><em>i</em></label>
<input name="checkbox-8" id="checkbox-8" type="checkbox">
<label for="checkbox-8">u</label>
</fieldset> |
cs |
1번 라인 : data-type="horizontal" 속성을 사용하면 다음 그림처럼 가로로 그룹핑되고 버튼식으로 표현할 수 있습니다.
Radio Button
라디오 버튼은 옵션버튼이라고도 합니다. 다중의 항목 중에서 한가지만 선택해야 할 경우 사용합니다.
|
1
2
3
4
5
6
7
8
9
10
11 |
<fieldset data-role="controlgroup">
<legend>Radio buttons, vertical controlgroup:</legend>
<input name="radio-choice-1" id="radio-choice-1" type="radio" checked="checked" value="choice-1">
<label for="radio-choice-1">Cat</label>
<input name="radio-choice-1" id="radio-choice-2" type="radio" value="choice-2">
<label for="radio-choice-2">Dog</label>
<input name="radio-choice-1" id="radio-choice-3" type="radio" value="choice-3">
<label for="radio-choice-3">Hamster</label>
<input name="radio-choice-1" id="radio-choice-4" type="radio" value="choice-4">
<label for="radio-choice-4">Lizard</label>
</fieldset> |
cs |
사용방법은 위의 Checkbox와 같고 input은 기존의 Radio Button 과 같습니다.
버튼식으로 표현도 가능합니다.
|
1
2
3
4
5
6
7
8
9 |
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Radio buttons, mini, horizontal controlgroup:</legend>
<input name="radio-choice-b" id="radio-choice-c" type="radio" checked="checked" value="list">
<label for="radio-choice-c">List</label>
<input name="radio-choice-b" id="radio-choice-d" type="radio" value="grid">
<label for="radio-choice-d">Grid</label>
<input name="radio-choice-b" id="radio-choice-e" type="radio" value="gallery">
<label for="radio-choice-e">Gallery</label>
</fieldset> |
cs |
사용방법은 위의 Checkbox 처럼 똑같은 속성으로 사용가능합니다.
