본문 바로가기
----- IT -----/jQuery Moblie

jQuery Mobile - Split Button Lists(분할 버튼 리스트)

by 대소니 2011. 6. 27.
리스트 항목에서 하나 이상의 가능한 액션이 있을 경우, split 버튼은 두가지의 독립적은 클릭 가능한 항목(리스트 항목과 오른쪽의 작은 화살표 아이콘)으로 사용할 수 있습니다. Split list를 만들기 위해, 간단하게 li 태그안에 두번째 링크를 추가하고 프레임웍크는 화살표모양의 아이콘에 링크와 같은 스타일과 세로 구분선을 추가할 것입니다. 그리고 접근성을 위한 텍스트 링크에서 링크의 제목 속성을 셋팅합니다.


<div class="content-primary">   
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
    <li><a href="index.html">
        <img src="images/album-bb.jpg" />
        <h3>Broken Bells</h3>
        <p>Broken Bells</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
       
        <img src="images/album-hc.jpg" />
        <h3>Warning</h3>
        <p>Hot Chip</p>
       
    </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-p.jpg" />
        <h3>Wolfgang Amadeus Phoenix</h3>
        <p>Phoenix</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-ok.jpg" />
        <h3>Of The Blue Colour Of The Sky</h3>
        <p>Ok Go</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-ws.jpg" />
        <h3>Elephant</h3>
        <p>The White Stripes</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-rh.jpg" />
        <h3>Kid A</h3>
        <p>Radiohead</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-xx.jpg" />
        <h3>XX</h3>
        <p>XX</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-mg.jpg" />
        <h3>Congratulations</h3>
        <p>MGMT</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">
        <img src="images/album-ag.jpg" />
        <h3>Ashes Grammar</h3>
        <p>A Sunny Day in Glasgow</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>    
    <li><a href="index.html">
        <img src="images/album-k.jpg" />
        <h3>Hot Fuss</h3>
        <p>Killers</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
    <li><a href="index.html">   
        <img src="images/album-af.jpg" />
        <h3>The Suburbs</h3>
        <p>Arcade Fire</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
    </a></li>
</ul>
</div><!--/content-primary -->   


댓글4