jQuery Mobile — Button · Panel · Listview · Column Toggle 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile
Button · Panel · Listview · Column Toggle

버튼 3가지 · 컨트롤 그룹 · 패널 · 리스트뷰 · 반응형 표

시작 한 폴더에 모인 5가지 컴포넌트

jQuery Mobile은 data-role 속성으로 다양한 UI 컴포넌트를 만든다. 이번에는 모바일 웹앱에서 가장 많이 쓰는 5가지를 한 번에 정리한다.

• 버튼 — 3가지 만드는 법, 테마 적용, 그룹화
• 패널 — 사이드에서 슬라이드되는 메뉴/로그인
• 리스트뷰 — 인셋·디바이더·카운트 버블
• 컬럼 토글 테이블 — 화면이 좁아지면 컬럼 자동 숨김
• 네비게이션 바 — header 안의 탭 (헤더 navbar)

---

용어 핵심 키워드

data-role="button"a 태그를 버튼 모양으로

data-themea/b 등 색상 테마

controlgroup버튼 여러 개를 하나로 묶기

data-typehorizontal/vertical 그룹 방향

data-inline한 줄 안에 여러 버튼 나열

data-role="panel"슬라이드 사이드 패널

data-displayoverlay/reveal/push

data-rel="close"패널 닫기 버튼

data-role="listview"모바일 리스트 UI

data-inset리스트 좌우 여백

listdivider그룹 구분 헤더

ui-li-count리스트 우측 카운트 버블

data-mode="columntoggle"반응형 컬럼 토글

data-priority컬럼 우선순위 (1=먼저 숨김)

---

1 버튼 만들기 — 3가지 방법

<a data-role="button" href="#">(1) a태그 버튼</a> <button>(2) button태그 버튼</button> <input type="button" value="(3) input태그 버튼">

동일하게 보이지만 만드는 방법은 3가지

a태그 버튼 (data-role="button" 필수)

button 태그 버튼 (자동 인식)

input[type=button] 버튼 (자동 인식)

📌 <a>는 data-role="button"이 반드시 필요하다. <button>과 <input>은 jQuery Mobile이 알아서 버튼 스타일로 변환.

---

2 data-theme — 버튼 색상 테마

<button>버튼1 (기본)</button> <button data-theme="a">버튼2 (a-테마)</button> <input type="button" value="버튼3" data-theme="b"> <a href="#" data-role="button" data-theme="b">버튼4</a>

data-theme: 기본(c) / a (밝음) / b (어두움)

버튼1 (기본 = c-테마)

버튼2 (a-테마, 흰색 톤)

버튼3 (b-테마, 어두움)

버튼4 (b-테마)

💡 swatch a~e — jQuery Mobile은 a, b, c, d, e 5가지 기본 테마(swatch)를 제공한다. ThemeRoller 도구로 커스텀도 가능.

---

3 controlgroup — 버튼 그룹화

data-role="controlgroup"으로 묶으면 버튼들이 붙어서 한 덩어리가 된다. 모서리 둥글기·테두리가 그룹 단위로 적용된다.

<!-- 세로 그룹 (기본) --> <div data-role="controlgroup"> <a href="#" data-role="button">버튼1</a> <a href="#" data-role="button">버튼2</a> <a href="#" data-role="button">버튼3</a> </div> <!-- 가로 그룹 --> <div data-role="controlgroup" data-type="horizontal"> ... </div>

세로 그룹 (기본)

버튼1

버튼2

버튼3

data-type="horizontal"

버튼1

버튼2

버튼3

---

반응형

4 listview — 모바일 리스트 UI

<ul data-role="listview"> <li>기본리스트1</li> <li>기본리스트2</li> <li>기본리스트3</li> </ul>

기본리스트1

기본리스트2

기본리스트3

data-inset — 좌우 여백 + 둥근 모서리

<ul data-role="listview" data-inset="true">

data-inset="true" — 가장자리에서 떨어진 카드 형태

인셋 리스트 1

인셋 리스트 2

---

5 listdivider · count bubble

listdivider — 카테고리 구분

<ul data-role="listview"> <li data-role="listdivider">ㄱ</li> <li><a href="#">강</a></li> <li data-role="listdivider" data-divider-theme="a">ㅅ</li> <li><a href="#">산</a></li> <li><a href="#">산마루</a></li> </ul>

한글 초성으로 그룹핑된 리스트

ㄱ

강 ›

ㅅ

산 ›

산마루 ›

ㅎ

하늘 ›

count bubble — 우측 알림 숫자

<ul data-role="listview" data-inset="true" data-count-theme="a"> <li><a href="#">리스트1 <span class="ui-li-count">5</span></a></li> <li><a href="#">리스트3 <span class="ui-li-count">hot</span></a></li> </ul>

메일 받은편지함, 카톡 알림 같은 패턴

리스트1 5

리스트2 17

리스트3 hot

리스트4 new

💡 카운트는 숫자뿐 아니라 텍스트(hot, new, ★ 등)도 들어간다. 디자이너 입장에서 활용도 매우 높음.

---

6 panel — 슬라이드 사이드 메뉴

패널은 화면 옆에서 미끄러져 나오는 영역이다. 햄버거 메뉴, 로그인 폼, 빠른 메모 등에 적합. page 안에 형제로 넣으면 자동 처리된다.

<div data-role="page"> <div data-role="panel" id="panel1" data-display="overlay" data-theme="b"> <form> <h3>로그인 패널</h3> <input name="name" type="text" data-clear-btn="true"> <a href="#" data-role="button" data-rel="close">취소</a> </form> </div> <div data-role="panel" id="panel3" data-position="right"> <!-- 오른쪽에서 슬라이드 --> </div> <div data-role="content"> <a href="#panel1" data-role="button">로그인 패널</a> </div> </div>

data-display 3가지

값	동작
overlay	패널이 본문 위에 떠서 슬라이드 — 본문은 그대로
reveal (기본)	본문이 옆으로 밀리면서 패널이 드러남
push	패널과 본문이 같이 슬라이드

3가지 display 비교

overlay
위에서 덮음

reveal
본문이 밀림

push
함께 이동

패널 닫기 — data-rel="close"

패널 안의 버튼/링크에 data-rel="close"를 주면 클릭 시 패널이 닫힌다. 모달 닫기 X 버튼 같은 역할.

<a href="#" data-role="button" data-rel="close">취소</a>

---

7 Column Toggle Table — 반응형 표

모바일에서는 표의 컬럼이 너무 많으면 가로 스크롤이 생긴다. data-mode="columntoggle"은 화면 폭에 맞춰 덜 중요한 컬럼부터 숨긴다. 사용자는 우상단 토글로 다시 켤 수 있다.

<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stripe"> <thead> <tr> <th data-priority="2">학년</th> <th>이름</th> <!-- priority 없음 = 항상 표시 --> <th data-priority="3">성별</th> <th data-priority="1">성적</th> </tr> </thead> </table>

data-priority — 숫자가 작을수록 먼저 숨김

data-priority	의미	예시
없음	항상 표시 (필수 컬럼)	이름
1	가장 먼저 숨김 (덜 중요)	성적
2	중간	학년
3+	가장 나중에 숨김 (중요)	성별

⚠ 직관과 반대다 — priority 1이 가장 먼저 사라진다. "1순위로 숨기는 컬럼"으로 외우는 게 편하다.

columntoggle 토글로 컬럼 켜고 끄기

컬럼

학년P2	이름	성별P3	성적P1
1	홍길동	남	94
4	신나라	여	77
3	홍미미	여	88

---

8 header 안의 navbar

navbar를 header 안에 넣으면 제목 아래에 탭 형태로 들어간다. footer에 두면 하단 탭바, header에 두면 페이지 네비.

<div data-role="header"> <h1>페이지 제목</h1> <div data-role="navbar"> <ul> <li><a href="#page2" class="ui-btn-active">page2</a></li> <li><a href="#page3">page3</a></li> <li><a href="#page4">page4</a></li> </ul> </div> </div>

---

9 자주 하는 실수

증상	원인	해결
a 태그가 버튼 모양 안 됨	data-role="button" 누락	속성 추가
controlgroup이 흩어져 보임	버튼들이 div 안에 안 들어감	모든 버튼을 같은 div로 감싸기
패널이 안 열림	panel이 page 밖에 있거나 id 매칭 X	page 안 형제로 두고 href="#패널id"
리스트 화살표가 안 나옴	li 안에 a 태그 없음	li 안에 a 태그로 감싸기
columntoggle 토글이 없음	class="ui-responsive" 빠짐	table에 ui-responsive 추가
priority 1 컬럼이 안 사라짐	화면이 충분히 좁지 않음	브라우저 폭 줄여서 테스트

---

10 핵심 한 줄 요약

JQUERY MOBILE — COMPONENTS

버튼 3가지a (data-role 필요) / button / input[type=button]

테마data-theme="a~e" — swatch 5종

버튼 그룹data-role="controlgroup" + data-type

리스트뷰ul[data-role="listview"] + data-inset

구분 헤더li[data-role="listdivider"]

카운트 버블span.ui-li-count (숫자/텍스트)

패널data-role="panel" + data-display(overlay/reveal/push)

패널 닫기data-rel="close"

반응형 표data-mode="columntoggle" + data-priority

Tags

#jQueryMobile #button #controlgroup #dataTheme #panel #listview #listdivider #countBubble #columntoggle #모바일UI #반응형표 #티스토리

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

jQueryMobile, button, controlgroup, dataTheme, panel, listview, listdivider, countBubble, columntoggle, 모바일UI, 반응형표, 티스토리