jQuery Mobile List View 속성별 설명 ( 이미지 + 소스 포함 )
페이지 정보
작성자 서방님 댓글 0건 조회 143회 작성일 15-07-16 17:19본문
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="euc-kr" />
<!-- 뷰포트 ( 화면별의 넓이를 scale 하는 것 )-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no"/>
<!-- 즐겨찾기 했을 경우 ( 바탕화면 ) icon -->
<link rel="shortcut icon" href="../image/icon.png">
<link rel="apple-touch-icon" href="../image/icon.png">
<!-- Java script , CSS -->
<link href="../framework/jquery.mobile-1.0.css"
rel="stylesheet" type="text/css" />
<script src="../framework/jquery-1.6.4.js"></script>
<script src="../framework/jquery.mobile-1.0.js"></script>
</head>
<!-- 기본 디 폴트 유형 -->
<body>
<div data-role="page">
<div data-role="header">
<h1>List</h1>
</div>
<!-- List View ul ( 번호 안붙이는 tag ) -->
<div data-role="content">
<ul data-role="listview">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</div>
</div>
</body>
</html>
1. List View 앞에 숫자 붙이기
<div data-role="header">
<h1>Numbered List</h1>
</div>
<div data-role="content">
<ol data-role="listview">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
</div>
2. Linked List View
<div data-role="header">
<h1>Linked List</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-insert="true">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
<li><a href="#">Item C</a></li>
</ul>
</div>
3. List View 테두리 만들기
<div data-role="header">
<h1>Inset List</h1>
</div>
<div data-role="content" >
<ul data-role="listview" data-inset="true">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
<li><a href="#">Item C</a></li>
</ul>
</div>
4. List Divider 지정하기
<div data-role="header">
<h1>List Divider</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<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>
<li data-role="list-divider">ㅇ</li>
<li><a href="#">이민수</a></li>
</ul>
</div>
5. List View filter 지정 하기
<div data-role="header">
<h1>List Filter</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href=">jQuery</a></li>
<li><a href=">jQuery Mobile</a></li>
<li><a href=">Sencha Touch</a></li>
<li><a href=">Mobile WebApp Framework</a></li>
<li><a href=">아이폰</a></li>
<li><a href=">안드로이드</a></li>
<li><a href=">아이패드</a></li>
</ul>
</div>
6. List View Split_Button
<div data-role="header">
<h1>Split Button List</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-split-icon="delete">
<li>
<a href="#">Item A</a>
<a href="#">Split Icon Description</a>
</li>
<li>
<a href="#">Item B</a>
<a href="#">Split Icon Description</a>
</li>
<li>
<a href="#">Item C</a>
<a href="#">Split Icon Description</a>
</li>
</ul>
</div>
7. List View Thumbnail
<div data-role="header">
<h1>Thumbnail List</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#"><img src="../image/album-ws.jpg" />Item A</a></li>
<li><a href="#"><img src="../image/album-ok.jpg" />Item B</a></li>
<li><a href="#"><img src="../image/album-mg.jpg" />Item C</a></li>
<li><a href="#"><img src="../image/album-k.jpg" />Item D</a></li>
</ul>
</div>
8. List View icon
<div data-role="header">
<h1>Icon List</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#"><img src="../image/de.png" class="ui-li-icon"/>Item A</a></li>
<li><a href="#"><img src="../image/fi.png" class="ui-li-icon"/>Item B</a></li>
<li><a href="#"><img src="../image/gb.png" class="ui-li-icon"/>Item C</a></li>
<li><a href="#"><img src="../image/gf.png" class="ui-li-icon"/>Item D</a></li>
<li><a href="#"><img src="../image/sj.png" class="ui-li-icon"/>Item E</a></li>
<li><a href="#"><img src="../image/us.png" class="ui-li-icon"/>Item F</a></li>
</ul>
</div>
9. List View Count bubble
<div data-role="header">
<h1>List Divider</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">ㄱ<span class="ui-li-count">2</span></li>
<li><a href="#">곽수문<span class="ui-li-count">동료</span></a></li>
<li><a href="#">김동수<span class="ui-li-count">친구</span></a></li>
<li data-role="list-divider" >ㅂ<span class="ui-li-count">2</span></li>
<li><a href="#">배수정<span class="ui-li-count">거래처</span></a></li>
<li><a href="#">박현수<span class="ui-li-count">친구</span></a></li>
<li data-role="list-divider">ㅇ<span class="ui-li-count">1</span></li>
<li><a href="#">이민수</a></li>
</ul>
</div>
</div>
10. List View Text_formatting
<div data-role="header">
<h1>List Divider</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">
Friday, October 8, 2010
<span class="ui-li-count">2</span>
</li>
<li><a href="#">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament.</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="#">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
<li data-role="list-divider">
Thursday, October 7, 2010
<span class="ui-li-count">1</span>
</li>
<li><a href="#">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight.</p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a></li>
</ul>
</div>
11. List View item 의 동적 생성
<script type="text/javascript">
var num = 3;
function addItem() {
//jQuery 객체 $
var list1 = $("#list1");
//"<li><a href='#'>Item " + (++num) + "</a></li>" 더해라
list1.append("<li><a href='#'>Item " + (++num) + "</a></li>");
//List View 를 갱신 해라
list1.listview("refresh");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Dynamic AddItem</h1>
<a href="javascript:addItem();" data-icon="plus" class="ui-btn-right">Add</a>
</div>
<div data-role="content">
<ui id="list1" data-role="listview">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ui>
</div>
</div>
</body>
즐거운 하루 되세요 ㅎ_ㅎ 기본 List View form 입니다 ^^ 간단한 설정으로 여러가지를 가능 하게끔 만들어주는
HTML 5 입니다 ^^
댓글목록
등록된 댓글이 없습니다.
