안녕하세요!!
간만에 오늘 휴가라 이렇게 블로그 포스팅을 편한 시간대에 하게 되었습니다. ㅎㅎ;
오늘 포스팅할 내용은 이전 포스팅에 이어서 jQuery Mobile 리스트에 대해서 조금더 알아보도록 하겠습니다.
이전 포스팅에선 단순히 텍스트만 나오는 리스트에 대해서 알아보았는데 오늘 포스팅에서는 이미지도 넣어서 함께 리스트에 뿌려 보도록 하겠습니다. 모바일 페이지 구축할때 유용하게 사용하시기 바랍니다.
기본적인 소스의 구조는 아래와 같습니다.
<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 은 단순한 코딩으로 여러가지 사용방법이 있습니다. 정말 쉽게 모바일 페이지 하나를 뚝딱 만들수 있습니다. 여러분들도 직접 소스를 변경해가며 테스트 해보시기 바랍니다.
그럼 오늘 포스팅은 이것으로 마치겠습니다. 이제 퇴근 및 저녁시간이 다 되어 가네요. 즐거운 퇴근, 저녁시간 되시기 바랍니다.
날도 점점 추춰지는데 감기도 모쪼록 조심하세요~
'jQuery Mobile > JM Lists' 카테고리의 다른 글
| jQuery Mobile 리스트(List Views) (0) | 2013.11.26 |
|---|
