jQuery Mobile 리스트 구분자 — listdivider 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 리스트 구분자
data-role="listdivider" 완전 정리

전화번호부 ㄱ·ㄴ·ㄷ 같은 카테고리 헤더를 만드는 한 줄

시작 오늘 분석할 코드

긴 리스트를 그룹별로 묶고 싶을 때 사용한다. 각 그룹의 시작에 data-role="listdivider"를 가진 li를 끼워 넣으면 그 li가 다른 색의 헤더 줄로 변환된다.

<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> <li data-role="listdivider">ㅎ</li> <li><a href="#">하늘</a></li> </ul>

실제 출력

• ㄱ
• 강
• ㅅ
• 산
• 산마루
• ㅎ
• 하늘

---

용어 핵심 키워드

data-role="listdivider"li를 카테고리 헤더로 변환 — 색·굵기 자동 강조

data-divider-theme개별 divider의 색 테마 (a/b 등)

listview의 data-divider-themeul에 주면 모든 divider에 일괄 적용

a 태그 없는 lidivider는 클릭 동작이 필요 없으므로 a를 안 둠

---

1 divider의 시각적 차이

일반 li는 흰 배경의 메뉴 항목으로 보인다. data-role="listdivider"가 붙은 li는 자동으로 어두운 배경 + 굵은 글씨로 바뀌어 카테고리 머리말처럼 두드러진다.

요소	모양	클릭
일반 li	흰 배경, 일반 글씨	가능 (a 태그)
listdivider li	어두운 배경, 굵은 글씨	없음 (구분용)

---

2 data-divider-theme — 색 분기

코드의 두 번째 divider("ㅅ")에는 data-divider-theme="a"가 붙어 있다. 이 한 줄로 그 divider만 다른 테마(밝은 배경)로 표시된다. 일부만 강조하고 싶을 때 유용하다.

⚙ 전체 divider 테마를 한꺼번에 바꾸려면 ul 자체에 data-divider-theme="a"를 준다. 개별 li에 또 적으면 그 li의 값이 우선이다.

---

3 활용 — 카테고리 그룹

전화번호부의 ㄱ·ㄴ·ㄷ, 이메일의 "오늘/어제/지난주", 메뉴의 "음식/음료/디저트" 등 "같은 종류의 항목을 묶어 보여주고 싶을 때" 항상 쓰는 패턴이다.

---

 

반응형

 

4 자주 하는 실수

실수	증상	해결
divider li 안에 a 태그	jQM이 클릭 가능한 항목으로 변환할 수 있음	divider는 일반 텍스트로
data-role 오타 ("divider")	일반 li로 표시	정확히 "listdivider"
divider만 있고 항목 없음	빈 그룹	각 divider 뒤에 최소 1개 이상의 li 둘 것

---

핵심 한 줄 요약

data-role="listdivider"li를 카테고리 헤더로 변환

개별 data-divider-theme그 divider만 다른 테마

ul에 data-divider-theme모든 divider 일괄 테마

활용전화번호부, 이메일 시간 분류, 메뉴 카테고리

Tags

#jQuery-Mobile #listview #listdivider #data-role #data-divider-theme #카테고리 #구분자 #그룹헤더 #모바일리스트 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, listview, listdivider, data-role, data-divider-theme, 카테고리, 구분자, 그룹헤더, 모바일리스트, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리