jQuery Mobile — Bar · Form · Select · Collapsible 완전 정리

 

 

Web Development · jQuery Mobile

Bar · Form · Select · Collapsible
jQuery Mobile 폼 요소 정리

ui-bar · 인풋 · 체크박스 · 슬라이더 · 셀렉트 · 접이식 패널

시작 폼 만들기는 jQuery Mobile의 진가

이번에 다룰 컴포넌트들은 모두 입력과 정보 표시에 관련된다. ui-bar로 강조 영역, fieldcontain으로 깔끔한 입력 폼, collapsible로 접이식 패널, select의 그룹화·다이얼로그 표시, 그리고 슬라이더까지 — 한 줄 속성으로 모바일에 어울리는 UI가 완성된다.

---

용어 핵심 키워드

ui-bar강조 헤더 바 (한 줄)

ui-body본문 박스 (테두리 + 패딩)

fieldcontainlabel + input 한 쌍 컨테이너

ui-disabled비활성화 클래스

controlgroup체크박스/라디오 묶음

data-type="horizontal"가로 정렬 (세그먼트 컨트롤)

range슬라이더 + 숫자 입력

optgroupselect 옵션 그룹화

data-native-menufalse면 커스텀 다이얼로그 형태

data-placeholder힌트 텍스트 옵션

collapsible제목 클릭으로 접고 펼치는 패널

---

1 ui-bar · ui-body — 강조 영역

<div class="ui-bar ui-bar-b">꽃나무</div> <div class="ui-body ui-body-a"> <h3>진달래</h3> <p>참꽃 또는 두견화라고도 하며 ...</p> </div>

ui-bar

• 한 줄짜리 강조 박스
• 섹션 제목·카테고리 등에
• ui-bar-a~e 테마 적용 가능

ui-body

• 본문 박스 — 여러 요소 담음
• 제목·텍스트·이미지 한 덩어리
• ui-body-a~e 테마 적용 가능

ui-bar (b 테마, 어두움) + ui-body (a 테마, 밝음)

꽃나무

진달래

참꽃 또는 두견화라고도 하며 전국의 50~2,000m 높이의 산야에서 무리지어 자란다.

개나리

연교·신리화라고도 하며, 북한에서는 개나리꽃나무라고 부른다. 산기슭 양지에서 많이 자란다.

---

2 텍스트 입력 — fieldcontain

<!-- (1) 라벨 + 입력 — 가장 단순 --> <label>도시이름 <input type="text" id="txt1"> </label> <!-- (2) fieldcontain — 비활성화 + jQM 스타일 끔 --> <div data-role="fieldcontain" class="ui-disabled"> <label for="txt2">도시이름</label> <input type="text" id="txt2" data-role="none"> </div> <!-- (3) fieldcontain — 기본값 적용 --> <div data-role="fieldcontain"> <label for="txt3">도시이름</label> <input type="text" id="txt3" value="서울"> </div>

속성/클래스	역할
data-role="fieldcontain"	label + input을 한 쌍으로 — 와이드에서는 가로 배치, 모바일은 세로
class="ui-disabled"	전체 비활성화 — 클릭/포커스 막힘
data-role="none"	jQuery Mobile 스타일 적용 안 함 → 원래 input 모양
label[for]	접근성·라벨 클릭으로 input 포커스

3가지 입력 패턴

(1) 도시이름

(2) 도시이름 (비활성)

(3) 도시이름

---

 

3 체크박스 — controlgroup

fieldset에 data-role="controlgroup"을 주면 체크박스가 한 덩어리로 묶이는 카드 형태가 된다. data-type="horizontal"로 가로 정렬도 가능.

<fieldset data-role="controlgroup"> <legend>연락매체</legend> <input type="checkbox" id="type1" checked> <label for="type1">e-mail</label> <input type="checkbox" id="type2"> <label for="type2">address</label> </fieldset> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>성별</legend> <!-- 가로형 = 세그먼트 컨트롤 (남성 | 여성) --> </fieldset>

세로 그룹 (체크박스 리스트)

✓ e-mail

address

✓ phone

가로 그룹 (data-type="horizontal" — 세그먼트 형태)

✓ 남성

여성

---

반응형

4 range — 슬라이더 입력

<div data-role="fieldcontain"> <label for="score1">점수</label> <input type="range" id="score1" value="50" min="0" max="100"> </div>

📌 jQuery Mobile은 HTML5 type="range"를 자동으로 숫자 입력 박스 + 슬라이더 트랙 두 형태로 표시한다. 둘은 양방향 동기화.

슬라이더 — value 50, min 0, max 100

점수

 

 

---

5 select + optgroup — 옵션 그룹화

<select id="age1" data-inline="true"> <option value="">선택하세요</option> <optgroup label="그룹A"> <option value="num1">0~9세</option> <option value="num2">10~19세</option> </optgroup> <optgroup label="그룹B"> <option value="num4">30~39세</option> <option value="num6" disabled>50세이상</option> </optgroup> </select>

optgroup — 카테고리로 옵션 묶기 + disabled로 비활성화

연령대

선택하세요

그룹A

0~9세

10~19세

20~29세 (선택)

그룹B

30~39세

40~49세

50세이상 (disabled)

---

6 dialog select — 다이얼로그 형태 + 다중 선택

data-native-menu="false"를 주면 OS 기본 select 대신 jQuery Mobile 스타일의 다이얼로그가 뜬다. multiple까지 함께 쓰면 여러 항목을 선택할 수 있다.

<select id="age1" data-native-menu="false" multiple="multiple"> <option value=" " data-placeholder="true">선택하세요(복수 가능)</option> <option value="num1">신문</option> <option value="num2">인터넷</option> <option value="num3">SNS</option> </select>

data-placeholder="true" — 첫 옵션은 안내 문구로

정보습득매체

신문

인터넷

SNS

지인소개

방송

※ native vs custom menu

• native (기본) — OS 표준 select UI 사용 — 빠르고 익숙
• data-native-menu="false" — jQM이 다이얼로그로 그려줌 — 일관된 디자인, multiple/optgroup 표현 다양
• multiple은 native에서 OS마다 다르게 표시되니 false 권장

---

7 collapsible — 접이식 패널

<div data-role="collapsible"> <h3>접이식 패널제목</h3> <p>패널 내용</p> </div>

📌 안의 첫 번째 <h1>~<h6>가 자동으로 토글 헤더가 된다. 클릭하면 그 아래 내용이 펼쳐진다(아코디언).

제목 클릭 = 펼치기/접기

접이식 패널제목

패널 내용 — 펼쳐진 상태

접이식 패널제목 2

중첩 collapsible — 폴더처럼 깊게

<div data-role="collapsible"> <h3>상위 패널</h3> <p>상위 내용</p> <div data-role="collapsible"> <h3>하위 패널 1</h3> <p>하위 내용</p> <div data-role="collapsible"> <h3>하위 패널 2</h3> <p>더 깊은 내용</p> </div> </div> </div>

3단 중첩 — 폴더/카테고리/세부 구조에 적합

상위 접이식 패널

패널 내용

하위 접이식 패널 1

패널 내용

하위 접이식 패널 2

💡 collapsible-set으로 묶으면 아코디언처럼 한 번에 하나만 열린다. 단순 collapsible은 각자 독립 토글.

---

8 자주 하는 실수

증상	원인	해결
label 클릭해도 input에 포커스 X	label[for]와 input[id] 매칭 X	둘의 값을 동일하게
checkbox 가로가 안 됨	data-type 빠짐	fieldset에 data-type="horizontal"
multiple select가 OS 기본으로 떠 못생김	native 메뉴 사용 중	data-native-menu="false"
optgroup이 무시됨	option이 optgroup 밖에 있음	option 전체를 optgroup 안으로
collapsible이 안 접힘	h1~h6 제목이 없음	div 안 첫 자식으로 헤딩 태그 추가
range가 슬라이더로 안 변환됨	data-role="none"이 적용됨	none 제거 — 기본 동작 사용

---

9 핵심 한 줄 요약

JQUERY MOBILE — FORM & UI

강조 헤더div.ui-bar.ui-bar-{a~e}

본문 박스div.ui-body.ui-body-{a~e}

입력 폼data-role="fieldcontain" + label[for] + input[id]

비활성화class="ui-disabled"

체크박스 그룹fieldset[data-role="controlgroup"] + data-type="horizontal"

슬라이더input[type="range"] + min/max/value

옵션 그룹화select 안 optgroup label="..."

커스텀 다이얼로그data-native-menu="false" + multiple

접이식data-role="collapsible" + 안 첫 자식 hN

Tags

#jQueryMobile #uiBar #uiBody #fieldcontain #controlgroup #checkbox #rangeInput #select #optgroup #collapsible #dialogSelect #티스토리

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

jQueryMobile, uiBar, uiBody, fieldcontain, controlgroup, checkbox, rangeInput, select, optgroup, collapsible, dialogSelect, 티스토리