jQuery Mobile — Listview 심화 · 아이콘 버튼 · 페이지 탭 완전 정리

 

 

Web Development · jQuery Mobile

Listview 심화 · 아이콘 버튼 · Page Tab
jQuery Mobile 컴포넌트 정리 2탄

필터·다중라인·중첩·스플릿·썸네일 + 아이콘 버튼 + 탭

시작 리스트뷰의 7가지 변종

모바일 앱의 절반은 리스트다. jQuery Mobile은 단순 리스트 외에 필터(검색), 다중 라인(영화 정보 카드), 중첩(폴더 구조), 스플릿(좌·우 분할 클릭), 썸네일(이미지 + 텍스트)까지 한 줄 속성으로 만든다. 여기에 아이콘 버튼과 페이지 내부 탭까지 한꺼번에 정리한다.

---

용어 핵심 키워드

data-icon버튼/리스트에 아이콘 부착

data-iconpos아이콘 위치 — left/right/top/notext

data-inline버튼을 인라인으로 (한 줄에 여러 개)

data-role="none"jQM 스타일 적용 안 함 (기본 HTML 유지)

data-filter리스트 검색창 자동 추가

data-filter-placeholder검색창 안내 문구

ui-li-aside리스트 우측 상단 보조 텍스트

data-split-icon스플릿 리스트 우측 아이콘

data-split-theme스플릿 우측 영역 색상 테마

data-role="tabs"페이지 안에서 탭 전환

---

1 아이콘 버튼 — data-iconpos 4가지

<button data-icon="check">확인</button> <!-- left (기본) --> <button data-icon="check" data-iconpos="notext">확인</button> <!-- 아이콘만 --> <input type="button" value="검색" data-icon="search" data-iconpos="notext"> <a href="#" data-role="button" data-icon="info" data-iconpos="notext">정보</a>

data-iconpos	의미
left (기본)	아이콘 왼쪽 + 텍스트
right	텍스트 + 아이콘 오른쪽
top / bottom	아이콘 위/아래에
notext	아이콘만 (둥근 버튼처럼)

기본 vs notext (아이콘만) ✓확인 ✕취소 ✓ ✕ ↻ 🔍 i

📌 data-role="none"은 "이건 jQuery Mobile이 건드리지 마"라는 뜻. 원래 HTML 모양 그대로 유지하면서 기능만 쓰고 싶을 때.

---

2 이미지 버튼

<button><img src="buttonimg.png"></button> <input type="image" src="buttonimg.png" data-role="button"> <a href="#" data-role="button"><img src="buttonimg.png"></a>

버튼 안에 이미지 넣기

---

3 Listview Filter — 검색 가능한 리스트

data-filter="true" 한 줄로 리스트 위에 검색창이 자동 생성된다. 사용자가 입력하면 매칭되는 항목만 실시간으로 보여준다.

<ul data-role="listview" data-filter="true" data-filter-placeholder="검색키워드를 입력하세요"> <li data-role="listdivider">ㄱ<span class="ui-li-count">1</span></li> <li><a href="#">강</a></li> ... </ul>

검색창 + 그룹 헤더에 카운트 버블

ㄱ 1

강 ›

ㅂ 2

바다 ›

바다새 ›

ㅎ 1

하늘 ›

---

4 Multiline Listview — 영화 정보 카드

<ul data-role="listview"> <li><a href="#"> <p class="ui-li-aside">2014/12/25</p> <h3>겨울왕국</h3> <p>등급: 12세관람가</p> <p>상영시간: <strong>108분</strong></p> <p>줄거리: 언니'엘사'는 ...</p> </a></li> </ul>

태그	역할
<h1> ~ <h6>	큰 제목 — 보통 상품명/영화제목
<p>	설명 — 보조 정보
<p class="ui-li-aside">	우측 상단에 표시 — 날짜·가격·개수

영화 카드 — 제목·메타·줄거리·날짜를 한 항목에

2014/12/25

겨울왕국

등급: 12세관람가

상영시간: 108분

줄거리: 언니'엘사'는 모든 것을 얼려버리는 신비로운 힘이 두려워 떠나고, 얼어버린 왕국의 저주를 풀기 위해 '안나'는 언니를 찾아 환상적인 여정을 떠난다.

---

반응형

5 Nested Listview — 중첩 리스트

li 안에 또 ul을 넣으면 jQuery Mobile은 자동으로 새 페이지로 분리한다. 클릭 시 슬라이드 전환되어 하위 리스트로 이동.

<ul data-role="listview"> <li>상위리스트 1</li> <li>상위리스트 2 <ul> <li data-icon="info"><a href="#">하위리스트 2.1</a></li> <li data-icon="info"><a href="#">하위리스트 2.2</a></li> </ul> </li> </ul>

상위 리스트 → 클릭 시 하위로 이동

상위리스트 1

상위리스트 2 ›

→ 하위리스트 2.1

→ 하위리스트 2.2

상위리스트 3 ›

⚙ 하위리스트 3.1

상위리스트 4

---

6 Split Listview — 좌·우 두 영역 클릭

li 안에 a를 두 개 넣으면 jQuery Mobile이 자동으로 분할한다. 좌측은 메인 동작, 우측은 보조 동작(상세보기, 삭제 등).

<ul data-role="listview" data-split-icon="grid" data-split-theme="e"> <li><a href="#">리스트1</a><a href="#">상세내용</a></li> <li><a href="#">리스트2</a><a href="#">상세내용</a></li> </ul>

좌측 = 본문 클릭 / 우측 = 그리드 아이콘 액션

리스트1

 

리스트2

 

리스트3

 

💡 실전 활용 — 메인 영역에는 "보기"를, 우측 작은 영역에는 "삭제/편집/공유" 같은 보조 액션. 한 줄에 두 가지 행동을 깔끔하게 분리.

---

7 Thumbnail Listview — 이미지 + 텍스트

<ul data-role="listview"> <li><a href="#"> <img src="listimg.png"> 리스트1 </a></li> </ul>

📐 썸네일 사이즈 규칙 — img의 가로/세로가 80px 이하면 자동으로 좌측 작은 썸네일, 그 이상이면 큰 이미지로 처리된다.

이미지 + 텍스트가 한 줄에

IMG1

리스트1

IMG2

리스트2

IMG3

리스트3

---

8 Page Tab — 페이지 안에서 탭 전환

지금까지의 navbar는 페이지 자체를 전환했지만, data-role="tabs"는 같은 페이지 안에서 컨텐츠만 바뀐다. SPA 느낌의 탭.

<div data-role="tabs"> <div data-role="navbar"> <ul> <li><a href="#tab1">탭1</a></li> <li><a href="#tab2">탭2</a></li> <li><a href="#tab3">탭3</a></li> </ul> </div> <div id="tab1"><h1>첫번째 탭 내용</h1></div> <div id="tab2"><h1>두번째 탭 내용</h1></div> <div id="tab3"><h1>세번째 탭 내용</h1></div> </div>

탭 클릭 → 같은 페이지 안에서 내용만 교체

탭1

탭2

탭3

첫번째 탭 내용

navbar (외부)

• 다른 page로 이동
• 슬라이드 전환 애니메이션
• URL 해시 변경

tabs (내부)

• 같은 page 안에서 div 교체
• 전환 없이 즉시 표시
• 한 페이지에 여러 컨텐츠

---

9 자주 하는 실수

증상	원인	해결
아이콘만 버튼이 안 됨	data-iconpos="notext" 누락	속성 추가
filter가 안 나옴	data-filter="true" 빠짐	ul에 속성 추가
중첩 리스트가 평면으로 보임	li 직접 자식으로 ul	li 안 끝에 ul 닫기 — 하위 페이지 자동 생성
split이 한 줄 안에 두 개로 안 나뉨	li 안에 a가 1개	a를 정확히 2개
썸네일이 너무 큼	이미지 사이즈가 80px 초과	이미지 자체를 80×80 이하로 리사이즈
tabs가 일반 페이지로 전환됨	navbar로 #id가 다른 page와 겹침	tabs 안의 id는 그 안에서만 유일하게

---

10 핵심 한 줄 요약

JQUERY MOBILE — LISTVIEW & MORE

아이콘만 버튼data-icon + data-iconpos="notext"

스타일 적용 Xdata-role="none"

검색 가능 리스트data-filter + data-filter-placeholder

우측 보조 텍스트p.ui-li-aside (다중 라인 카드)

중첩 리스트li 안에 ul → 자동 하위 페이지화

스플릿li 안에 a 2개 + data-split-icon

썸네일li 안에 80px 이하 img

페이지 내 탭data-role="tabs" + 내부 navbar + #id div

Tags

#jQueryMobile #listview #splitListview #thumbnailListview #multilineListview #nestedListview #listviewFilter #iconButton #imageButton #pageTab #모바일UI #티스토리

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

jQueryMobile, listview, splitListview, thumbnailListview, multilineListview, nestedListview, listviewFilter, iconButton, imageButton, pageTab, 모바일UI, 티스토리