2011년 8월 12일 금요일

jQuery Mobile - List Views


Basic List View Buttons
<h3>Unordered List</h3>
<ul data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>

Item 요소에 <a href=#> 링크가 있다면 List 우측에 Button이 생긴다.
<h3>Unordered List</h3>
<ul data-role="listview">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ol>

Basic List View Dividers
divider 대상  <li> 태그에 data-role=”divider”를 추가한다.

<h3>Unordered List</h3>
<ul data-role="listview">
<li data-role="divider">Things</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li data-role="divider">Stuff</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li data-role="divider">Miscellaneous</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
</ul>
<h3>Ordered List</h3>
<ol data-role="listview">
<li data-role="divider">Group</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li data-role="divider">Group</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li data-role="divider">Group</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
<li><a href="#">Item</a>
</li>
</ol>

Nested Lists
Nested List는 각 item 별로 사용자가 Drill down 방식으로 접근 할수 있게 해주는 List이다. page에서 page로 전환되며 back 버튼은 자동으로 추가된다.

<h3>Nested List Example</h3>
<ul data-role="listview">
<li>Restaurants
<ul>
<li>French
<ul>
<li>Le Central</li>
<li>Bistro Vandome</li>
<li>Antoine's</li>
</ul>
</li>
<li>Cajun and Creole
<ul>
<li>Bayou Bob's</li>
<li>Pappadeaux</li>
<li>Lucile's</li>
</ul>
</li>
<li>American
<ul>
<li>Dixon's</li>
<li>Vesta Dipping Grill</li>
<li>Steuben's</li>
</ul>
</li>
</ul>
</li>
</ul>


List View Split Buttons
두개의 Tap이 가능한 영역을 가진다. List와 별도의 다른 Link을 가지는 버튼을 만든다.
<li>French
<ul>
<li><a href="lecentral.html">Le Central</a> <a
href="reservations.php?restaurant=903">Make Reservations</a>
</li>
<li><a href="bistrovandome.html">Bistro Vandome</a> <a
href="reservations.php?restaurant=904">Make Reservations</a>
</li>
<li><a href="antoines.html">Antoine's</a> <a
href="reservations.php?restaurant=905">Make Reservations</a>
</li>
</ul>
</li>


Thumbnails and Icons
각각의 List Item에 thumbnail image 또는 icon을 추가 할 수 있다.

<li>Restaurants
<ul>
<li>
<a href="#">
<img src="../images/icons/icon-french.png"
alt="French flag icon"
class="ui-li-icon">
French
</a>
<ul>
<li>
<a href="lecentral.html">
<img src="../images/logo-generic.png" alt="Le Central logo">
Le Central
</a>
<a href="reservations.php?restaurant=403">Make Reservations</a>
</li>
<li>
<a href="bistrovandome.html">
<img src="../images/logo-generic.png" alt="Bistro Vandome logo">
Bistro Vandome
</a>
<a href="reservations.php?restaurant=404">Make Reservations
</a>
</li>
<li>
<a href="antoines.html">
<img src="../images/logo-generic.png" alt="Antoine's logo">
Antoine's
</a>
<a href="reservations.php?restaurant=405">Make Reservations</a>
</li>
</ul>
</li>
<li>
<a href="#">
<img src="../images/icons/icon-cajun.png"
alt="Cajun flag icon"
class="ui-li-icon">
Cajun
</a>
<ul>
<li>Bayou Bob's</li>
<li>Pappadeaux</li>
<li>Lucile's</li>
</ul>
</li>
<li>
<a href="#">
<img src="../images/icons/icon-american.png"
alt="American flag icon"
class="ui-li-icon">
American
</a>
<ul>
<li>Dixon's</li>
<li>Vesta Dipping Grill</li>
<li>Steuben's</li>
</ul>
</li>
</ul>
</li>
</ul>

Count Bubbles
List Item에 Bubble Count를 붙을수 있다. <span class="ui-li-count"> 태그를 사용하면 된다.

<li data-role="divider">Items<span class="ui-li-count">10</span></li>
<li><a href="#">Restaurants</a><span class="ui-li-count">9</span>

Updating a list view with new items
List View에 새로운 Items을 붙이고 싶다면? 아래 코드를 참조하라.

<script>
// Initialize the list view
$("ul.twitter-feed").listview();
var updateTweets = function() {
// Go get more tweets and prepend them to the list and then
// refresh the list view.
var strNewTweetsHtml = getNewTweets();
$("ul.twitter-feed").prepend(strNewTweetsHtml).listview("refresh");
}
</script>

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...