jQuery Mobile 패널 — 사이드 슬라이드 메뉴 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 패널
사이드 슬라이드 메뉴 · 폼 · 메모 완전 정리

data-role="panel" + data-display + data-position 조합으로 만드는 3가지 패턴

시작 오늘 분석할 코드

모바일 앱에서 햄버거 메뉴를 누르면 옆에서 슬라이드되어 나타나는 "사이드 패널"을 만든다. 이 코드는 패턴 3가지를 한 페이지에 담았다.

패널	data-display	data-position	용도
panel1 (로그인)	overlay	(좌측)	폼 입력
panel2 (메뉴)	overlay	(좌측)	리스트형 메뉴
panel3 (메모)	overlay	right	오른쪽 메모/사이드바

<!-- 1. 좌측 로그인 패널 (b 테마, 폼) --> <div data-role="panel" id="panel1" data-display="overlay" data-theme="b"> <form> <h3>로그인 패널</h3> <input type="text" data-mini="true" data-clear-btn="true"> <input type="password" data-mini="true" data-clear-btn="true"> <div class="ui-grid-a"> <div class="ui-block-a"><a data-role="button" data-rel="close">취소</a></div> <div class="ui-block-b"><a data-role="button" data-rel="close">저장</a></div> </div> </form> </div> <!-- 2. 좌측 메뉴 패널 (리스트뷰) --> <div data-role="panel" id="panel2" data-display="overlay"> <ul data-role="listview"> <li data-icon="delete"><a data-rel="close">메뉴 패널 종료</a></li> <li><a href="#">메뉴1</a></li> ... </ul> </div> <!-- 3. 우측 메모 패널 --> <div data-role="panel" id="panel3" data-display="overlay" data-position="right"> ... </div> <!-- 본문에서 패널 호출 --> <a href="#panel1" data-role="button">로그인 패널</a>

실제 출력 미리보기

본문

로그인 패널

사용자명 비밀번호 취소저장

panel1 (좌측·다크)

본문

• ✕ 메뉴 패널 종료
• 메뉴1
• 메뉴2
• 메뉴3
• 메뉴4

panel2 (좌측·리스트)

본문

패널 메모

오른쪽 메모
패널 영역입니다.

패널 종료

panel3 (우측·메모)

---

용어 핵심 키워드

data-role="panel"사이드 패널 — 화면 옆에서 슬라이드되어 나타남

data-display패널이 본문 위에 어떻게 보이는가

overlay본문 위로 떠서 그늘 만듦 (가장 흔한 방식)

reveal본문이 통째로 옆으로 밀리고 패널이 드러남

push본문과 패널이 같이 움직임

data-position패널 위치: left(기본) 또는 right

data-rel="close"버튼을 누르면 패널을 닫는 동작

ui-grid-a2분할 그리드 — 좌(ui-block-a)/우(ui-block-b) 50%씩

data-mini="true"컴포넌트를 작은 사이즈로 — 패널처럼 좁은 공간에 적합

data-clear-btn입력창 우측에 X(지우기) 버튼 자동 추가

---

1 패널 위치 — page 안의 첫 번째 자식

이 코드의 가장 중요한 규칙: panel은 page 안에 들어가야 하고, header보다 앞에 있어야 한다. 그래야 jQuery Mobile이 슬라이드 애니메이션을 정확히 만든다.

<div data-role="page"> <div data-role="panel"> ... </div> // ← 가장 먼저 <div data-role="header"> ... </div> <div data-role="content"> ... </div> <div data-role="footer"> ... </div> </div>

---

2 data-display — 패널 표시 방식

data-display	동작	분위기
overlay (이 코드)	패널이 본문 위로 떠서 슬라이드 — 본문은 그대로	현대적인 모바일 앱 (네이버, 카카오톡 햄버거)
reveal	본문이 통째로 옆으로 밀려나가고 그 뒤에 있던 패널이 드러남	책장에서 책을 빼는 느낌
push (기본)	본문과 패널이 같이 슬라이드 — 패널이 본문을 밀어냄	iOS 메일 앱 같은 고전 방식

---

3 data-position — 좌/우

기본은 left(왼쪽). data-position="right"면 오른쪽에서 슬라이드된다. panel3은 우측 메모/사이드바 용으로 자주 쓰는 패턴이다.

⚙ UX 관습 — 좌측 패널은 네비게이션·메뉴, 우측 패널은 도구·설정·메모로 쓰는 게 일반적이다. 사용자는 화면 좌측 위 햄버거 = 메뉴라고 학습되어 있다.

---

 

반응형

 

4 패널 열기/닫기

본문에서 패널을 열려면 <a href="#panel1">처럼 패널의 id로 링크한다. 닫으려면 data-rel="close"를 가진 a를 패널 안에 둔다.

열기

<a href="#panel1" data-role="button">

닫기

<a data-rel="close" data-role="button">

📌 자동 닫힘 — 사용자가 패널 바깥(어두워진 본문 영역)을 탭해도 패널이 자동으로 닫힌다. 별도 코드 필요 없음.

---

5 ui-grid-a — 2칸 그리드

로그인 패널의 [취소][저장] 버튼이 좌우 50%씩 나뉘어 있다. ui-grid-a는 2분할, ui-grid-b는 3분할, c는 4분할, d는 5분할이다.

클래스	분할	자식 클래스
ui-grid-a	2분할	ui-block-a, ui-block-b
ui-grid-b	3분할	ui-block-a, b, c
ui-grid-c	4분할	~ ui-block-d
ui-grid-d	5분할	~ ui-block-e

---

6 data-mini와 data-clear-btn

패널처럼 좁은 공간에서는 컴포넌트를 작게 만들어야 한다. data-mini="true"는 입력창·버튼 등의 크기를 줄인다. data-clear-btn="true"는 입력창 우측에 X(지우기) 버튼을 자동 부착한다.

---

7 자주 하는 실수

실수	증상	해결
panel을 page 밖에 둠	패널이 동작하지 않음	page의 첫 자식으로 이동
id 없는 panel	href="#id"로 호출 불가	panel마다 고유 id 필수
data-rel="close" 빠뜨림	닫기 버튼이 동작 안 함	닫는 a/button에 명시
page 사이에 panel 공유 시도	page는 자기 panel만 인식	각 page에 panel 따로 작성
data-display 오타	기본(push)으로 동작	overlay/reveal/push 정확히

---

핵심 한 줄 요약

data-role="panel"사이드 슬라이드 패널 — page 안 첫 자식

data-displayoverlay / reveal / push 중 표시 방식

data-position="right"우측 패널 (기본은 좌측)

href="#panel1"패널 열기 (id 참조)

data-rel="close"패널 닫기 (a/button에 부여)

ui-grid-a + ui-block-a/b2분할 그리드 (취소/저장 같은 좌우 버튼)

data-mini + clear-btn좁은 공간용 작은 입력창 + X 지우기

Tags

#jQuery-Mobile #panel #data-display #overlay #reveal #push #data-position #data-rel #ui-grid #data-mini #clear-btn #사이드메뉴 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, panel, data-role, data-display, overlay, reveal, push, data-position, data-rel, ui-grid, data-mini, clear-btn, 사이드메뉴, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리