10. 리스트 (2)
페이지 정보
작성자 관리자 댓글 0건 조회 1,079회 작성일 22-01-11 14:49본문
실습 : 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>
실습 : 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>
실습 : 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>
댓글목록
등록된 댓글이 없습니다.