jQuery Mobile 토글 스위치 — select + data-role="slider" 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 토글 스위치 —
select + data-role="slider"

두 옵션을 좌우로 끌어 선택하는 스위치 위젯

시작 오늘 분석할 코드

option이 정확히 2개인 select에 data-role="slider"를 붙이면 jQM이 좌우 토글 스위치로 변환한다. 라디오 버튼보다 모바일에서 더 직관적이다.

<div data-role="fieldcontain"> <label for="gender1">성별</label> <select name="gender" id="gender1" data-role="slider"> <option value="male">남자</option> <option value="female">여자</option> </select> </div>

실제 출력 미리보기

header 영역

성별

 

남자

여자

(다른 상태)

 

남자

여자

footer 영역

---

용어 핵심 키워드

data-role="slider"select 또는 input을 슬라이더 위젯으로 변환

option 2개정확히 2개 — 좌/우 두 상태

option value서버 전송값 — 표시 텍스트와 다를 수 있음

첫 option기본 선택 — 본 코드에선 "남자"

---

1 같은 data-role="slider" 두 가지 사용법

jQM의 data-role="slider"는 두 가지 다른 위젯을 만든다. 어느 태그에 붙였느냐로 결정된다.

대상	결과	용도
<input type="range">	막대 슬라이더 (0~100 식)	점수, 볼륨 등 연속값
<select> + option 2개 (본 코드)	좌우 토글 스위치	이분 선택 — 남/여, ON/OFF

⚠ option이 3개 이상이면? — 토글 스위치 변환 실패. 일반 select 메뉴로 표시될 수 있다. 정확히 2개여야 한다.

---

2 라디오 버튼과의 비교

• 라디오 버튼 — 두 개의 동그라미 + 텍스트, 정확하지만 클릭 영역 작음
• 토글 스위치 — 한 손가락으로 좌우 끌기, 모바일에서 직관적
• 같은 의미 — 둘 다 "두 개 중 하나" 선택. 데이터 모델은 같다

💡 언제 토글? — 정말 둘 중 하나(ON/OFF, 남/여)일 때. "기타"가 있으면 라디오나 select가 낫다.

---

3 첫 option = 기본 선택

jQM은 첫 번째 option을 기본 선택 상태로 만든다. 본 코드에서는 페이지 로드 시 "남자"가 선택돼 있다.

다른 값을 기본으로 하고 싶으면:

<option value="female" selected>여자</option>

---

 

반응형

 

4 서버로 전송되는 값

토글 스위치가 좌우로 움직여도 실제로는 일반 select이므로 form submit 시 name=value 한 쌍이 전송된다.

• "남자" 선택 → gender=male
• "여자" 선택 → gender=female

표시 텍스트(option 안의 텍스트)는 화면용이고, 실제 데이터는 value 속성이다. 한국어/영어 두 사이트를 만들 때 표시는 다양해도 value는 같게 둘 수 있다.

---

5 자주 하는 실수

실수	증상	해결
option 3개 이상	일반 select로 표시	정확히 2개로 줄이기
data-role 오타 (slidder)	변환 안 됨	"slider" 정확히
label과 매칭 빠짐	접근성 저하	for=id 매칭
checkbox로 토글 시도	jQM은 별도 flipswitch 사용	2 option select가 표준

---

6 현대식 대안

HTML5 표준엔 토글 스위치가 없지만 CSS로 checkbox를 변형해 만드는 게 표준 패턴이다.

<label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>

Bootstrap/Tailwind 같은 프레임워크는 토글 스위치를 표준 컴포넌트로 제공한다. iOS·Material Design 디자인 가이드의 일부다.

---

핵심 한 줄 요약

data-role="slider"select(2 option)을 토글 스위치로

option 2개 필수3개 이상이면 변환 X

첫 option 기본selected로 변경 가능

전송값option의 value (표시 텍스트 X)

현대식checkbox + CSS 또는 컴포넌트

Tags

#jQuery-Mobile #slider #switch #토글스위치 #select #option #data-role #on-off #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, slider, switch, 토글스위치, select, option, data-role, on-off, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리