총 게시물 62건, 최근 0 건 안내 RSS 글쓰기
이전글  다음글  목록 글쓰기
[강좌]

jQuery Mobile List View 속성별 설명 ( 이미지 + 소스 포함 )

글쓴이 : NullPointerException 날짜 : 2012-02-18 (토) 17:02 조회 : 22761
글주소 : http://www.androidside.com/B57/163
 
  데브렉 닷넷마스터
윈도폰7, 실버라이트, ASP.NET, C#, Ajax, jQuery 닷넷 강의.
www.devlec.com
  우수기관 (주) KIC캠퍼스
강남본원,18년국비교육,취업률우수기관, 프론트엔드, 자바웹개발자, 빅데이터분석기술
kiccampus.co.kr/
  SBS아카데미컴퓨터학원김용진
신촌컴퓨터학원 웹디자인학원 무료국비지원 무료취업컨설팅 8년연속교육브랜드대상
sbsartgraphic.net
신청하기




<!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 입니다 ^^



등푸른_망둥어

NullPointerException 님의 웹(WEB) 최신글 [더보기]


추천/비추천 클릭하면 추천받으신 분, 추천하신 분 모두에게 포인트가 지급됩니다.

질풍간지 2012-04-13 (금) 16:56
감사합니다
댓글주소
무르시엘라고 2012-05-31 (목) 01:27
감사합니다.
댓글주소
chrees 2012-07-04 (수) 11:04
감사합니다. ^^
댓글주소
chrees 2012-07-04 (수) 15:47
좋은 자료 감사합니다.. 가져갈게요^^
댓글주소
BEEF 2012-11-06 (화) 10:06
자료 감사합니다~ 
댓글주소
이전글  다음글  목록 글쓰기

총 게시물 62건, 최근 0 건 안내 RSS
번호 분류 제목 글쓴이 날짜 추천 비추천 조회
62 소스코드
 $scope.page = 0;   $scope.total = 1;   $scope.restaurants = [];   $scope.getRestaurants = function () {     $scop…
조각 08-10 2 0 987
61 소스코드
감사합니다.
우리큰형님 07-08 3 1 2005
60 강좌
Store에 저장된 Model 객체를 each()메소드로  Model객체당 패널를 하나씩 만드는 방법도 있지만 DataView(Ext.dataview.Dat…
이카루스031 06-02 5 0 3654
59 강좌
Store에 저장할 Model 객체 타입을 정의하고 프록시 Ext.data.proxy.Memory를 사용해서 인라인 데이터를 읽고 인라인 데이…
이카루스031 06-02 3 0 3412
58 강좌
스토어는(Ext.data.Store)는  클라이언트측 데이터 캐쉬 저장소 역할을 한다. Store는 처음 생성될 때만 서버나 HTML5…
이카루스031 06-02 1 0 3321
57 소스코드
페이지 링크 : https://github.com/Flipboard/react-canvas 사용언어 : javascript Introductory blog post Flipboard는 모바일 웹 앱…
카이로 03-18 2 0 3810
56 TIP&TECH
A self-hosted chat app for small teams built by Security Compass. Features and Stuff BYOS (bring your own server) Persistent messages M…
카이로 03-18 3 0 5756
55 TIP&TECH
IO.JS 링크 : https://github.com/iojs/io.js io.js 는 node.js의 커미터들이 대거 이동해서 만든 npm compatible platform 입니다.…
카이로 03-18 1 0 4153
54 TIP&TECH
아래 사이트에서 퍼온 자료입니다. http://blackfrost.blog.me/40210784439 필자가 최근 php에서 좀 깔끔한 그래프를 …
카이로 03-05 5 0 17106
53 TIP&TECH
$sudo apt-get install python-software-properties python g++ make  $sudo add-apt-repository ppa:chris-lea/node.js  $sudo apt-get update…
카이로 12-18 4 0 5357
52 소스코드
50+ FREE BEAUTIFUL JQUERY CSS3 MENU PLUGINS & TUTORIALS Free beautiful jQuery CSS3 menu navigation plugin and tutorials that it is an important…
카이로 11-28 3 0 5107
51 TIP&TECH
구굴 웹사이트 서핑 중  좋은 정보 인듯 해서 공유 차원에서 글을 적습니다. CSS 관련 해서 참고 하시고 많은…
등푸른망둥어 06-24 4 0 9065
50 TIP&TECH
젠 코딩 정말 나이스 하네요. 긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주…
등푸른망둥어 06-24 2 0 5781
49 강좌
출처 http://sir.co.kr/bbs/board.php?bo_table=wa_forum&wr_id=110 웹 접근성 이슈 정리 목차 들어가기 장차법과 웹 접…
카이로 01-05 2 0 6771
48 소스코드
크롬의 실험정신이 돋보이는 테스트 사이트입니다. 제가 보기엔 무조건 신기할 따름이네요!  근처에 갈 수…
집게사장 10-08 4 0 12447
47 강좌
1. 기본 Tabs의 Index를 로컬스토리지를 이용하여, 사용자가 마지막에 사용한 Index를 기억시키고, 화면에 보여줍…
집게사장 10-08 1 0 5757
46 TIP&TECH
http://dsiol.blog.me/120177646288 강력한 기능을 제공합니다.. 프리웨어이고 전 불법적인(?) 용도로 사용하고 있…
은빛파도 09-17 1 0 5268
45 자료
일단 소스 함 보세요
레오니아 08-23 6 0 7802
44 강좌
10년it트렌드 View more presentations from Kim jeehyun 온오프융합 View more presentations from Kim jeehyun
카이로 07-13 2 0 6872
43 강좌
Building HTML based mobile phone applications View more presentations from Mikko Ohtamaa
카이로 07-12 1 0 6487
 1  2  3  4  맨끝
 


Copyright ⓒ www.androidside.com. All rights reserved.
채팅 권한: 글쓰기 1개
2레벨 이상만 대화 가능
공개 채팅: 평일 !(9시 ~ 17시),토,일
안사2 변경사항 보러가기 챗방이 잘 안보이면 크롬에서 접속해주세요
챗방 숨기기 |  챗방 보이기