jQuery Mobile 리스트 두 번째
페이지 정보
작성자 서방님 댓글 0건 조회 100회 작성일 15-07-16 17:27본문
이전 포스팅에선 단순히 텍스트만 나오는 리스트에 대해서 알아보았는데 오늘 포스팅에서는 이미지도 넣어서 함께 리스트에 뿌려 보도록 하겠습니다. 모바일 페이지 구축할때 유용하게 사용하시기 바랍니다.
기본적인 소스의 구조는 아래와 같습니다.
<ul data-role="listview">
<li><a href="#"><img src="image.png"></a></li>
</ul>
// <ul> 안에 <li>내용</li> 을 삽입하여 만들면 됩니다. 정말 매우 간단합니다.
그럼 소스를 직접 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<h2>List With Thumbnails:</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#"><img src="1.png"></a>
</li>
<li>
<a href="#"><img src="2.jpg"></a>
</li>
<li>
<a href="#"><img src="3.jpg"></a>
</li>
</ul>
</div>
</div>
</body>
</html>
// 위와 같이 소스코딩을 한 후 파일의 제목은 편하신대로 만들고(저는 test.html 로 만들어보았습니다!) 이미지는 용량이 적은 아무 이미지나 사용하여 이미지 및 소스를 바탕화면에 저장하고 파일을 열어보세요. 그럼 화면에 이미지가 들어간 리스트가 나오는 것을 확인할 수 있습니다. 아래 이미지처럼 말이죠!
그리고 리스트 안에 텍스트를 넣고 싶은 경우 아래와 같이 하면 됩니다.
<ul data-role="listview">
<li>
<a href="#">
<img src="1.png">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
<img> 아래 <h2>, <p> 태그가 들어가 있는데 그냥 <p> 태그를 사용하던지 아님 다른것을 사용하던지 그건 개발자 마음이겠죠.
위의 소스는 갤러리 같은 리스트 화면을 만드는데 아마도 유용하지 싶습니다.
그리고 혹시 작은 아이콘 형식으로 표현하고 싶을 경우
<ul data-role="listview">
<li>
<a href="#">
<img src="1.png" class="ui-li-icon">
<h2>Google Chrome</h2>
<p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
</ul>
마지막으로 카운트 관련 리스트를 만들고자 할 경우 유용하게 사용할수 있는 팁이 있습니다.
<ul data-role="listview">
<li><a href="#">Inbox<span class="ui-li-count">25</span></a></li>
<li><a href="#">Sent<span class="ui-li-count">432</span></a></li>
<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>
소스에 적용 해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<h2>이메일함</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#">받은메일함<span class="ui-li-count">25</span></a></li>
<li><a href="#">보낸메일함<span class="ui-li-count">432</span></a></li>
<li><a href="#">보관함<span class="ui-li-count">107</span></a></li>
</ul>
</div>
</div>
</body>
</html>
// span 태그에 class 는 ui-li-count 를 적용합니다. 그렇게 하면 아래 이미지와 같이 표현됩니다.
이처럼 jQuery Mobile 은 단순한 코딩으로 여러가지 사용방법이 있습니다. 정말 쉽게 모바일 페이지 하나를 뚝딱 만들수 있습니다. 여러분들도 직접 소스를 변경해가며 테스트 해보시기 바랍니다.
댓글목록
등록된 댓글이 없습니다.
