1. 리스트뷰
li 는 리스트 ul unordered 리스트 ol은 ordered 리스트
2. 스플릿 버튼 리스트
3. 리스트 디바이더
4. 카운트 버블
5. 썸네일 리스트
6. 아이콘 리스트
7. 컨텐트 형식 적용하기
8. 인셋 스타일
9. 검색 필터 적용 리스트
15-01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-01</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h3>리스트 뷰</h3>
</div>
<div data-role="content">
<ul data-role="listview"> <!--기본적으로 data-role을 listview로 해야됨 -->
<li><a href="15-02.html" data-transition="slide">연결된 리스트</a></li>
<li><a href="15-03.html" data-transition="slide">일련번호를 가진 리스트</a></li>
<li><a href="15-04.html" data-transition="slide">중첩 리스트</a></li>
<li><a href="15-05.html" data-transition="slide">스플릿 버튼 리스트</a></li>
<li><a href="15-06.html" data-transition="slide">리스트 디바이더</a></li>
<li><a href="15-07.html" data-transition="slide">카운트 버블</a></li>
<li><a href="15-08.html" data-transition="slide">썸네일 리스트</a></li>
<li><a href="15-09.html" data-transition="slide">아이콘 리스트</a></li>
<li><a href="15-10.html" data-transition="slide">리스트 형식 적용</a></li>
<li><a href="15-11.html" data-transition="slide">인셋 스타일</a></li>
<li><a href="15-12.html" data-transition="slide">검색 필터 적용</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-02</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="linkedlist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>연결된 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview">
<!-- li안에 anchor를 쓰면 화살표로 표시되는 리스트가 된다 -->
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-03</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="numberedlist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>일련번호를 가진 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ol data-role="listview">
<!-- ol을 쓰면 일련번호를 가진 리스트가 나온다 -->
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ol>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-04.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-04</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="nestedlist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>중첩 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview">
<li>item #1
<ul><!--ul 안에 ul을 또만들어서 리스트 안에 리스트가 있음 중첩리스트라 함 -->
<li><a href="#nestedlist">child item #1</a></li>
<li><a href="#nestedlist">child item #2</a></li>
<li><a href="#nestedlist">child item #3</a></li>
</ul>
</li>
<li>item #2
<ul>
<li><a href="#nestedlist">child item #1</a></li>
<li><a href="#nestedlist">child item #2</a></li>
<li><a href="#nestedlist">child item #3</a></li>
</ul>
</li>
<li>item #3
<ul>
<li><a href="#nestedlist">child item #1</a></li>
<li><a href="#nestedlist">child item #2</a></li>
<li><a href="#nestedlist">child item #3</a></li>
</ul>
</li>
<li>item #4
<ul>
<li><a href="#nestedlist">child item #1</a></li>
<li><a href="#nestedlist">child item #2</a></li>
<li><a href="#nestedlist">child item #3</a></li>
</ul>
</li>
<li>item #5
<ul>
<li><a href="#nestedlist">child item #1</a></li>
<li><a href="#nestedlist">child item #2</a></li>
<li><a href="#nestedlist">child item #3</a></li>
</ul>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-05.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-05</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="splitbuttonlist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>스플릿 버튼 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<!-- 영역을 지정해서 따로 아이콘을 변경해서 쓸수있다는 점이 스플릿 버튼 리스트-->
<ul data-role="listview" data-split-icon="gear" data-split-theme="a">
<li><a href="#">item #1</a><a href="#"></a></li>
<li><a href="#">item #2</a><a href="#"></a></li>
<li><a href="#">item #3</a><a href="#"></a></li>
<li><a href="#">item #4</a><a href="#"></a></li>
<li><a href="#">item #5</a><a href="#"></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-06</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="listdivider" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>리스트 디바이더</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-dividertheme="a">
<li data-role="list-divider">title</li>
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li data-role="list-divider">title</li><!--리스트를 나눠주게 됨 -->
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-07.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-07</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="countbubble" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>카운트 버블</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-count-theme="a">
<!-- span 영역을 만들고 class="ui-li-count" 로 카운트 버블을 만듬.-->
<li><a href="#">item #1<span class="ui-li-count">New</span></a></li>
<li><a href="#">item #2<span class="ui-li-count">0</span></a></li>
<li><a href="#">item #3<span class="ui-li-count">15</span></a></li>
<li><a href="#">item #4<span class="ui-li-count">7</span></a></li>
<li><a href="#">item #5<span class="ui-li-count">11</span></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-08.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-08</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="thumbnaillist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>썸네일 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview">
<!--img 태그를 쓰면 썸네일이 만들어짐 -->
<li><a href="#"><img src="alaskan_malamute.jpg" />item #1</a></li>
<li><a href="#"><img src="goldenretriever_puppies.jpg" />item #2</a></li>
<li><a href="#"><img src="goldenretriever_puppy.jpg" />item #3</a></li>
<li><a href="#"><img src="samoyed.jpg" />item #4</a></li>
<li><a href="#"><img src="samoyed_puppy.jpg" />item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-09.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-09</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="iconlist" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>아이콘 리스트</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview">
<!--썸네일이 아닌 아이콘은 사용법은 동일하나 class="ui-li-icon"을 지정하면 좀더 작은 아이콘이 됨 -->
<li><a href="#"><img src="alaskan_malamute_16X16.jpg" class="ui-li-icon"/>item #1</a></li>
<li><a href="#"><img src="goldenretriever_puppies_16X16.jpg" class="ui-li-icon" />item #2</a></li>
<li><a href="#"><img src="goldenretriever_puppy_16X16.jpg" class="ui-li-icon" />item #3</a></li>
<li><a href="#"><img src="samoyed_16X16.jpg" class="ui-li-icon" />item #4</a></li>
<li><a href="#"><img src="samoyed_puppy_16X16.jpg" class="ui-li-icon" />item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-10.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-10</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="listformatting" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>리스트 형식 적용</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<!--디바이더 테마를 a 카운트 테마를 b 적용한 상태-->
<ul data-role="listview" data-dividertheme="a" data-count-theme="b">
<li data-role="list-divider" >2014년 6월 19일<span class="ui-li-count" >3</span></li>
<li>
<a href="#">
<!--리스트 아이템 안에 p태그를 사용가능 ui-li-aside 우측상단에 놓으라는 뜻 -->
<p class="ui-li-aside"><strong>12:47 오후</strong></p><!--strong은 좀더 강조해라 -->
<h3>title #1</h3>
<p><strong>subject #1</strong></p>
<p>description #1</p>
</a>
</li>
<li>
<a href="#">
<p class="ui-li-aside"><strong>10:13 오전</strong></p>
<h3>title #2</h3>
<p><strong>subject #2</strong></p>
<p>description #2</p>
</a>
</li>
<li>
<a href="#">
<p class="ui-li-aside"><strong>07:45 오전</strong></p>
<h3>title #3</h3>
<p><strong>subject #3</strong></p>
<p>description #3</p>
</a>
</li>
<li data-role="list-divider">2014년 6월 18일<span class="ui-li-count">2</span></li>
<li>
<a href="#">
<p class="ui-li-aside"><strong>03:28 오후</strong></p>
<h3>title #4</h3>
<p><strong>subject #4</strong></p>
<p>description #4</p>
</a>
</li>
<li>
<a href="#">
<p class="ui-li-aside"><strong>10:45 오전</strong></p>
<h3>title #5</h3>
<p><strong>subject #5</strong></p>
<p>description #5</p>
</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-11</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="insetstyle" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>인셋 스타일</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<!--리스트뷰를 약간의 여백을 주고 싶다면 data-inset="true"로 하면됨 -->
<ul data-role="listview" data-inset="true">
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
15-12.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>15-12</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h3>검색 필터 적용</h3>
<a href="#index" data-role="button" data-icon="home"
data-transition="slide" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<!--data-filter와 data-filter-placeholder를 지정하면 검색을 할수있음 -->
<ul data-role="listview" data-filter="true" data-filter-placeholder="검색어를 입력하세요...">
<li><a href="#">item #1</a></li>
<li><a href="#">item #2</a></li>
<li><a href="#">item #3</a></li>
<li><a href="#">item #4</a></li>
<li><a href="#">item #5</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>© 2014 T academy</h4>
</div>
</div>
</body>
</html>
출력 화면
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| Javascript - jQuery Mobile 유틸리티 (0) | 2015.02.02 |
|---|---|
| Javascript - jQuery Mobile 이벤트 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 컨텐트 서식 적용, 테마롤러 사용법 (0) | 2015.02.02 |
| Javascript - jQuery Mobile 컴포넌트 - 폼 (0) | 2015.01.30 |
| Javascript - jQuery Mobile 컴포넌트 - 페이지, 버튼, 툴바 (0) | 2015.01.29 |
| Javascript - jQuery 기본 효과, 페이딩, 슬라이딩 (0) | 2015.01.29 |
| Javascript - 셀렉터 기본 개념 및 예제 (0) | 2015.01.28 |
| Javascript - jQuery와 jQuery Mobile 개요 및 aptana 개발환경 세팅 (0) | 2015.01.27 |