본문 바로가기

ListView14

jQuery Mobile 리스트 필터 — data-filter · placeholder 완전 정리 Web Development · jQuery MobilejQuery Mobile 리스트 필터data-filter · data-filter-placeholder 완전 정리검색창 자동 생성 + 입력 즉시 항목 필터링시작 오늘 분석할 코드data-filter="true" 한 줄로 리스트 위에 검색창이 자동 생성된다. 사용자가 글자를 입력하면 리스트가 즉시 필터링되어 일치하는 항목만 남는다. data-role="listview" data-filter="true" data-filter-placeholder="검색키워드를 입력하세요"> data-role="listdivider">ㄱ class="ui-li-count">1 href="#">강 data-role="listdivider">ㅂ class="ui-li-.. 2026. 6. 23.

jQuery Mobile 중첩 리스트 — ul 안의 ul 자동 페이지화 완전 정리 Web Development · jQuery MobilejQuery Mobile 중첩 리스트ul 안의 ul → 자동 페이지화 완전 정리계층 구조의 메뉴를 한 번 클릭으로 깊은 페이지에 진입시작 오늘 분석할 코드li 안에 또 ul이 들어 있다. 이걸 만난 jQuery Mobile은 "이 li를 클릭하면 하위 ul이 별도 화면으로 등장"하도록 자동 변환한다. 즉 코드는 한 ul처럼 보이지만 실제 화면은 여러 페이지로 분리된다. data-role="listview"> 상위리스트 1 상위리스트 2 data-icon="info"> href="#">하위리스트 2.1 data-icon="info"> href="#">하위리스트 2.2 data-icon="info"> href="#">하위리스트 2.3 상위리스.. 2026. 6. 23.

jQuery Mobile 분할 리스트 아이콘 — data-split-icon · split-theme 완전 정리 Web Development · jQuery MobilejQuery Mobile 분할 리스트 아이콘data-split-icon · data-split-theme 완전 정리분할 리스트의 우측 보조 버튼만 따로 아이콘·색 지정시작 오늘 분석할 코드일반 분할 리스트는 우측 보조 버튼이 ▶ 화살표로 표시된다. 이 코드는 data-split-icon으로 아이콘 종류를, data-split-theme으로 색을 따로 지정한다. data-role="listview" data-split-icon="grid" data-split-theme="e"> href="#">리스트1 href="#">상세내용 href="#">리스트2 href="#">상세내용 ... 실제 출력 — 우측 grid 아이콘 + e 테마(노랑)리스트1⊞리.. 2026. 6. 23.

jQuery Mobile 분할 리스트 — 한 li에 a 두 개 완전 정리 Web Development · jQuery MobilejQuery Mobile 분할 리스트한 li에 a 두 개 완전 정리한 항목에 두 가지 동작 — 본문 클릭과 우측 보조 동작 분리시작 오늘 분석할 코드각 li 안에 a 태그가 두 개씩 있다. jQuery Mobile은 이걸 보면 자동으로 좌측은 본문 영역(전체 항목 클릭), 우측은 별도의 작은 버튼으로 분할한다. iPhone 메일 앱의 "메일 본문 / 답장 버튼" 같은 패턴이다. data-role="listview"> href="#">리스트1 href="#">상세내용 href="#">리스트2 href="#">상세내용 href="#">리스트3 href="#">상세내용 href="#">리스트4 href="#">상세내용 실제 출력리스트1▶리스트2▶리.. 2026. 6. 23.

이전 1 2 3 4 다음

티스토리툴바