jQuery Mobile - Basic Linked Lists(링크 리스트)

List view는 data-role=”listview”속성을 갖는 linked list 아이템을 포함하는 비정렬된 리스트입니다. JQM은 오른쪽 화살표 지시자를 추가하고, 모바일 환경에 적합한 스타일을 적용하여, 브라우저창의 가로 길이를 최대로 사용합니다. 리스트의 아이템을 탭(터치)하면 해당 아이템의 링크를 클릭한 것 처럼 동작하고 AJAX방식으로 페이지를 요청합니다. 새로운 페이지는 DOM으로 페이지에 추가되고, 페이지 전환 애니메이션이 보여집니다.


<div class="content-primary">
<ul data-role="listview">
    <li><a href="index.html">Acura</a></li>
    <li><a href="index.html">Audi</a></li>
    <li><a href="index.html">BMW</a></li>
    <li><a href="index.html">Cadillac</a></li>
    <li><a href="index.html">Chrysler</a></li>
    <li><a href="index.html">Dodge</a></li>
    <li><a href="index.html">Ferrari</a></li>
    <li><a href="index.html">Ford</a></li>
    <li><a href="index.html">GMC</a></li>
    <li><a href="index.html">Honda</a></li>
    <li><a href="index.html">Hyundai</a></li>
    <li><a href="index.html">Infiniti</a></li>
    <li><a href="index.html">Jeep</a></li>
    <li><a href="index.html">Kia</a></li>
    <li><a href="index.html">Lexus</a></li>
    <li><a href="index.html">Mini</a></li>
    <li><a href="index.html">Nissan</a></li>
    <li><a href="index.html">Porsche</a></li>
    <li><a href="index.html">Subaru</a></li>
    <li><a href="index.html">Toyota</a></li>
    <li><a href="index.html">Volkswagon</a></li>
    <li><a href="index.html">Volvo</a></li>
</ul>
</div><!--/content-primary -->