Jquery 모바일: 리스트뷰(listview)
1. 리스트뷰 기본
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 -->
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<h2>기본 리스트(Basic Lists)</h2>
<ul data-role="listview">
<li>학생</li>
<li>컴퓨터/인터넷</li>
<li>언론</li>
</ul>
<h2>순위 리스트(Numbered Lists)</h2>
<ol data-role="listview">
<li><a href="#">공무원</a></li>
<li><a href="#">서비스업</a></li>
<li><a href="#">교육</a></li>
</ol>
<h2>삽입된 리스트(Inset Lists)</h2>
<ul data-role="listview" data-inset="inset">
<li>금융</li>
<li>유통업</li>
<li>예술</li>
</ul>
</div>
<footer data-role="footer" data-position="fixed">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
첫 번째는 기본 리스트뷰.
두 번째는 a 태그가 붙은 리스트뷰로, listview 속성의 data-role은 a 태그 사용시 자동으로 화살표 아이콘이 붙는다.
세 번째는 data-role이 listview일 때 data-inset="inset"을 넣으면 사각형 안에 포함된 모양처럼 UI가 구성된다.
2. 리스트 구분자 (Lists Dividers)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 첫 번째 페이지 -->
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<h2>리스트 구분자(Lists Dividers)</h2>
<ol data-role="listview">
<li data-role="list-divider">반려동물 인기순위</li>
<li>강아지</li>
<li>고양이</li>
<li>햄스터</li>
<li data-role="list-divider">야생동물 인기순위</li>
<li>호랑이</li>
<li>코끼리</li>
<li>기린</li>
</ol>
</div>
<footer data-role="footer" data-position="fixed">
<h2>ⓒcopyright 2016</h2>
</footer>
</section>
</body>
</html>
3. Listview 내에서 a 태그 다중 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header" data-position="fixed">
<h1>jQuery Mobile</h1>
</header>
<div class="content" data-role="content">
<ol data-role="listview">
<li>
<a href="#subpage1">애완 동물 인기 순위</a>
<a href="#subpage1-1">강아지</a>
</li>
<li>
<a href="#subpage2">야생 동물 인기 순위</a>
<a href="#subpage2-1">사자</a>
</li>
</ol>
</div>
<footer data-role="footer" data-position="fixed">
<h1>@copyright 2016</h1>
</footer>
</section>
<section id="subpage1" data-role="page">
<header data-role="header">
<h1>반려동물 인기 순위</h1>
</header>
<div class="content" data-role="content">
<ol data-role="listview">
<li><a href="#">강아지</a></li>
<li><a href="#">고양이</a></li>
<li><a href="#">햄스터</a></li>
</ol>
</div>
<footer data-role="footer">
<h1>@copyright 2016</h1>
</footer>
</section>
<section id="subpage1-1" data-role="page">
<header data-role="header">
<h1>반려동물 인기 1순위</h1>
</header>
<div class="content" data-role="content">
강아지
</div>
<footer data-role="footer">
<h1>@copyright 2016</h1>
</footer>
</section>
</body>
</html>
'jQuery Mobile' 카테고리의 다른 글
| Jquery 모바일: fieldcontain (0) | 2016.06.03 |
|---|---|
| Jquery 모바일: 썸네일(Thumbnail) (0) | 2016.06.02 |
| Jquery 모바일: 메뉴 구성 (0) | 2016.06.01 |
| Jquery 모바일: 헤더와 푸터 고정 data-position="fixed" (0) | 2016.06.01 |
| Jquery 모바일: 테마 (0) | 2016.06.01 |
