하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

10. 리스트 (2)

페이지 정보

작성자 관리자 댓글 0건 조회 528회 작성일 22-01-11 14:49

본문

10. 리스트 (2)

실습 : jMobile18.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 i = 0;

var init=function(){

$('#addBtn').click(function(){

$('#list1').append("<li> 리스트"+(++i)+"</li>");

$('#list1').listview('refresh');

} );

$('#delBtn').click(function(){

i=0;

$('#list1').empty();

});

$('#list1').on('click', 'li', function(){

$(this).remove();

} );

}

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

</script>

</head>

<body>

<div data-role="page">

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

<h1>리스트</h1>

</div>

<input type="button" id="addBtn" value="리스트추가" data-inline="true"/>

<input type="button" id="delBtn" value="리스트삭제" data-inline="true"/>

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

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

</ul>

</div>

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

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

</div>

</div>

</body>

</html>



8.PNG



실습 : jMobile19.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">

</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" id="list1" data-split-icon="star" data-inset="true">

<li><a href="#">리스트1</a><a href="#">즐겨찾기</a></li>

<li><a href="#">리스트2</a><a href="#" data-icon="delete">삭제</a></li>

<li><a href="#">리스트3</a><a href="#">즐겨찾기</a></li>

<li><a href="#">리스트2</a><a href="#" data-icon="plus">삭제</a></li>

</ul>

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

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

</div>

</div>

</body>

</html>




9.PNG



실습 : jMobile20.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">

</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-filter="true" data-inset="true">

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

프로야구<span class="ui-li-count">1</span>

</li>

<li data-filtertext="창원">

<a href="#">

<img width="80" height="80" src="http://imgsports.naver.net/images/emblem/new/kbo/default/NC.png">

<h3>NC 다이노스</h3>

<p>김경문 감독</p>

<span class="ui-li-count">2위</span>

<p class="ui-li-aside">창원</p>

</a>

</li>

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

K리그<span class="ui-li-count">2</span>

</li>

<li data-filtertext="현대">

<a href="#">

<img width="80" height="80" src="http://sports.phinf.naver.net/20160418_91/14609482987635sdH1_PNG/100x75_%C0%FC%BA%CF.png">

<h3>전북 현대</h3>

<p>최강희 감독</p>

<span class="ui-li-count">1위</span>

<p class="ui-li-aside">전북</p>

</a>

</li>

<li data-filtertext="서울">

<a href="#">

<img width="80" height="80" src="http://sports.phinf.naver.net/20160418_193/1460948239701v6oRQ_PNG/100x75_%BC%AD%BF%EF%C0%AF%B3%AA%C0%CC%C6%BC%B5%E5.png">

<h3>서울 유나이티드</h3>

<p>황선홍 감독</p>

<span class="ui-li-count">2위</span>

<p class="ui-li-aside">서울</p>

</a>

</li>

</ul>

</div>

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

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

</div>

</div>

</body>

</html>



10.PNG


댓글목록

등록된 댓글이 없습니다.


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

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

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