jquery mobile 강좌 16 [ From 요소 / Flip switch / 플립토글 / Checkbox / 체크박스 / RadioButton / 라디오버튼 / 만들기 ] (2)

2016. 3. 24. 10:35language/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 처럼 똑같은 속성으로 사용가능합니다.