jQuery Mobile 분할 리스트 아이콘 — data-split-icon · split-theme 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 분할 리스트 아이콘
data-split-icon · data-split-theme 완전 정리

분할 리스트의 우측 보조 버튼만 따로 아이콘·색 지정

시작 오늘 분석할 코드

일반 분할 리스트는 우측 보조 버튼이 ▶ 화살표로 표시된다. 이 코드는 data-split-icon으로 아이콘 종류를, data-split-theme으로 색을 따로 지정한다.

<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>

실제 출력 — 우측 grid 아이콘 + e 테마(노랑)

리스트1

⊞

리스트2

⊞

리스트3

⊞

리스트4

⊞

---

용어 핵심 키워드

data-split-icon우측 보조 버튼 아이콘 종류 (grid, info, gear...)

data-split-theme우측 보조 버튼 색 테마 (a, b, e 등)

grid 아이콘격자 모양 — 일반적으로 상세보기·옵션 등 의미

e 테마노랑/주황 강조색 — 우측 버튼만 강조

---

1 data-split-icon — 보조 버튼 전용 아이콘

일반 data-icon은 li 좌측에 아이콘을 둔다. data-split-icon은 분할 리스트의 우측 보조 버튼에만 적용된다. 한 ul에 한 번만 적으면 모든 li의 우측 버튼에 동일하게 부여된다.

---

2 다른 split 옵션과 함께 일관성

• data-split-icon — 우측 버튼 아이콘 (이 코드: grid)
• data-split-theme — 우측 버튼 색 (이 코드: e = 노랑)
• data-icon (li에) — 좌측 아이콘 (별도 작동)
• data-theme (ul에) — 본문 영역 색 (별도 작동)

📌 주의 — split-icon/theme은 ul 단위로만 적용된다. li마다 다른 아이콘을 주려면 별도 클래스로 직접 CSS 작성해야 한다.

---

3 활용 — 시각적 강조

모든 li의 우측 버튼이 같은 색으로 통일되면 사용자가 "이 노란 버튼은 항상 같은 동작(예: 즐겨찾기)을 한다"고 빠르게 학습한다. 일관된 시각 신호는 학습 비용을 줄인다.

---

 

반응형

 

4 자주 하는 실수

• data-split-icon 키워드 오타 → 기본 ▶로 표시
• li에 a가 한 개만 있는데 split-icon 적용 → 보조 버튼 없으니 무시됨
• theme 값이 너무 튀어서 본문과 시각 충돌 → e보다 a/b가 일반적으로 무난

---

핵심 한 줄 요약

data-split-icon우측 보조 버튼 아이콘 종류

data-split-theme우측 보조 버튼 색 테마

ul 단위 적용한 번 적으면 모든 li의 보조 버튼 통일

활용동일 동작의 보조 버튼을 시각적으로 강조

Tags

#jQuery-Mobile #listview #data-split-icon #data-split-theme #분할리스트 #split-listview #보조버튼 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, data-split-icon, data-split-theme, 분할리스트, split-listview, 보조버튼, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리