jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1)
2016. 3. 15. 10:11ㆍlanguage/jquery mobile
listview 는 가장 많이 사용되는 기능입니다.
리스트 뷰 강좌는 여러 강좌로 나눌 계획입니다.
가장 많이 사용되는 많큼 조금더 디테일하게 속성들을 하나하나 살펴볼 예정입니다.
jquery mobile 은 순서 업는 목록 (ul 태그) 또는 순서 있는 목록 (ol 태그)을 모두 표현할 수 있습니다.
data-role="listview" 속성을 사용하면 가능합니다.
목록 버튼 만들기
목록 태그의 item (li 태그)에 a 태그를 넣으면 버튼 목록으로 사용할 수 있습니다.
평범한 목록을 원한다면 a 태그를 사용하지 않으면 됩니다.
목록 섹션 해더 ( 그룹 구분 ) 만들기
data-role="list-divider" 속성을 사용하면 해더를 목록 중간중간에 삽입할 수 있습니다.
위의 속성을 모두 사용한 기본적인 목록을 출력하는 소스입니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>CSS3 Animations</h1></header>
<div class="content" data-role="content">
<h3>가나다 List</h3>
<ul data-role="listview">
<li data-role="list-divider">자음</li>
<li><a href="#">가나다</a></li>
<li><a href="#">라마바</a></li>
<li data-role="list-divider">모음</li>
<li><a href="#">아야어여</a>
</li>
<li><a href="#">오요우유</a></li>
</ul>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
결과입니다.
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 12 [ 내비게이션 만들기 / navbar / 접기 / 펼치기 / data-position ] (1) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |