하이브리드앱

본문 바로가기
사이트 내 전체검색
하이브리드앱
하이브리드앱

9. 리스트 (1)

페이지 정보

작성자 관리자 댓글 0건 조회 1,112회 작성일 22-01-11 14:23

본문

9. 리스트 (1)

실습 : jMobile15.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<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-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>리스트</h1>

</div>

<div role="main" class="ui-content">

   <ul id="list1" data-role="listview">

<li>김말똥</li>

<li>홍길동</li>

<li>유재석</li>

<li>강호동</li>

<li>이경규</li>

   </ul>

   

   

   <ul id="list1" data-role="listview" data-inset="true" data-filter-reveal="true"

     data-filter-placeholder="이름 입력" data-filter="true">

 

<li><a>김말똥</a></li>

<li><a>홍길동</a></li>

<li><a>유재석</a></li>

<li><a>강호동</a></li>

<li><a>이경규</a></li>

   </ul>

   

   <ul id="list1" data-role="listview" data-inset="true" data-divider-theme="a" data-filter="true">  

<li data-role="list-divider">Family</li>

<li><a>김말똥</a></li>

<li><a>홍길동</a></li>

<li data-role="list-divider">Friends</li>

<li><a>유재석</a></li>

<li><a>강호동</a></li>

<li><a>이경규</a></li>

   </ul>


</div>

   

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



1.PNG


2.PNG



실습 : jMobile15.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<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-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var output = function() {

$('#swSel').text($('#switch').find(":selected").text());

};

var init = function(){

$('#switch').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>리스트</h1>

</div>

<div role="main" class="ui-content">

   <ul id="list1" data-autodividers="true" data-role="listview" data-inset="true" data-filter="true">

<li><a>김말똥</a></li>

<li><a>김개똥</a></li>

<li><a>김개똥</a></li>

<li><a>홍길동</a></li>

<li><a>홍길북</a></li>

<li><a>홍길서</a></li>

<li><a>유재석</a></li>

<li><a>유길석</a></li>

<li><a>강호동</a></li>

<li><a>강말똥</a></li>

<li><a>강길동</a></li>

<li><a>이경규</a></li>

<li><a>이말똥</a></li>

   </ul>


</div>

   

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



3.PNG


4.PNG


실습 : jMobile16.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<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-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>리스트</h1>

</div>

<div role="main" class="ui-content">

   <ul id="list1" data-role="listview" data-inset="true">

<li><a href="#"><img src="http://demos.jquerymobile.com/1.4.0/_assets/img/gf.png" class="ui-li-icon"/>프랑스</a></i>

<li><a href="#"><img src="http://demos.jquerymobile.com/1.4.0/_assets/img/de.png" class="ui-li-icon"/>독일</a></i>

<li><a href="#"><img src="http://demos.jquerymobile.com/1.4.0/_assets/img/gb.png" class="ui-li-icon"/>영국</a></i>

<li><a href="#"><img src="http://demos.jquerymobile.com/1.4.0/_assets/img/fi.png" class="ui-li-icon"/>핀란드</a></i>

<li><a href="#"><img src="http://demos.jquerymobile.com/1.4.0/_assets/img/us.png" class="ui-li-icon"/>미국</a></i>

   </ul>


</div>

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



5.PNG



실습 : jMobile16.html 


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<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-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var output = function() {

$('#swSel').text($('#switch').find(":selected").text());

};

var init = function(){

$('#switch').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>리스트</h1>

</div>

<div role="main" class="ui-content">

  <ul data-role="listview" data-inset="true">

<li data-icon="shop"><a href="#">

<img src="http://shopping.phinf.naver.net/20161021_27/55b7abe8-4217-49a6-ac38-5eaa7e567b21.jpg" height="80px"/>

<h3>상품명</h3>

<p>상품 1</p>

  </a>

</li>

<li data-icon="shop"><a href="#">

<img src="http://shopping.phinf.naver.net/20160923_18/4b1f9760-f61a-41b9-8168-87ce998b21d3.jpg" height="80px"/>

<h3>상품명</h3>

<p>상품 2</p>

  </a>

</li>

<li data-icon="shop"><a href="#">

<img src="http://shopping.phinf.naver.net/20161021_16/9aba5b20-2965-4c28-8677-6d2d6991c859.jpg" height="80px"/>

<h3>상품명</h3>

<p>상품 3</p>

  </a>

</li>

  </ul> 

</div>

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



6.PNG



실습 : jMobile17.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<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-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

var output = function() {

$('#swSel').text($('#switch').find(":selected").text());

};

var init = function(){

$('#switch').change(function(){

output();

});

}

$(document).bind("pageinit", init);

</script>

</head>

<body>

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>리스트</h1>

</div>

<div role="main" class="ui-content">

<ul data-role="listview" data-inset="true">

<li data-role="list-divider">월요일, 16-10-17<span class="ui-li-count">2</span></li>

<li><a href="#">

<h3>뉴스1</h3>

<p><strong>'음악중심' 몬스타엑스 '파이터', 가요계 상남자돌 </strong></p>

<p>몬스타엑스는 29일 방송된 MBC ‘쇼!음악중심’에서 ‘파이터(Fighter)’ 무대를 선보였다.</p>

<p class="ui-li-aside"><strong>7:50</strong>pm</p>

</a>

</li>

<li><a href="#">

<h3>뉴스2</h3>

<p><strong>'음악중심' 몬스타엑스 '파이터', 가요계 상남자돌 </strong></p>

<p>몬스타엑스는 29일 방송된 MBC ‘쇼!음악중심’에서 ‘파이터(Fighter)’ 무대를 선보였다.</p>

<p class="ui-li-aside"><strong>9:10</strong>pm</p>

   </a>

</li>

<li data-role="list-divider">화요일, 16-10-18<span class="ui-li-count">1</span></li>

<li><a href="#">

<h3>뉴스1</h3>

<p><strong>'음악중심' 몬스타엑스 '파이터', 가요계 상남자돌 </strong></p>

<p>몬스타엑스는 29일 방송된 MBC ‘쇼!음악중심’에서 ‘파이터(Fighter)’ 무대를 선보였다.</p>

<p class="ui-li-aside"><strong>9:10</strong>am</p>

   </a>

</li>

</ul>

</div>

   

<div data-role="footer" data-position="fixed"> 

<h1>powered by jQueryMobile.com</h1>

</div>

</div>

</body>

</html>



7.PNG


댓글목록

등록된 댓글이 없습니다.

개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.