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>

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...