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

jQuery Mobile - List dividers(리스트 구분자)

by 대소니 2011. 6. 28.
List 항목은 구분선으로 나누거나 리스트 항목 그룹으로 만들 수 있습니다. 어떤 리스트 항목이더라도 data-role=”list-divider” 속성을 추가만 하면 됩니다. 이러한 항목은 b 테마로 스타일 되어지지만, data-dividertheme 속성을 리스트 요소(ul 혹은 ol)에 사용하여 구분자 테마를 지정할 수 있습니다.


<div class="content-primary">
<ul data-role="listview">
    <li data-role="list-divider">A</li>
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li data-role="list-divider">B</li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li data-role="list-divider">C</li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
    <li data-role="list-divider">D</li>
    <li><a href="index.html">David Walsh</a></li>
    <li><a href="index.html">Drake Alfred</a></li>
    <li data-role="list-divider">E</li>
    <li><a href="index.html">Elizabeth Bacon</a></li>
    <li><a href="index.html">Emery Parker</a></li>
    <li><a href="index.html">Enid Voldon</a></li>
    <li data-role="list-divider">F</li>
    <li><a href="index.html">Francis Wall</a></li>
    <li data-role="list-divider">G</li>
    <li><a href="index.html">Graham Smith</a></li>
    <li><a href="index.html">Greta Peete</a></li>
    <li data-role="list-divider">H</li>
    <li><a href="index.html">Harvey Walls</a></li>
    <li data-role="list-divider">M</li>
    <li><a href="index.html">Mike Farnsworth</a></li>
    <li><a href="index.html">Murray Vanderbuilt</a></li>
    <li data-role="list-divider">N</li>
    <li><a href="index.html">Nathan Williams</a></li>
    <li data-role="list-divider">P</li>
    <li><a href="index.html">Paul Baker</a></li>
    <li><a href="index.html">Pete Mason</a></li>
    <li data-role="list-divider">R</li>
    <li><a href="index.html">Rod Tarker</a></li>
    <li data-role="list-divider">S</li>
    <li><a href="index.html">Sawyer Wakefield</a></li>
</ul>
</div><!--/content-primary -->   



댓글3

  • 이정 2011.06.28 15:48

    안녕하세요
    분할버튼 리스트에서요 이글이 제가 만드는 노래앨범과 꼭맞더군요

    근데 저는 앨범들을 개개로 선택하기 위해 리스트 오른쪽에 체크박스를 놓아야 겠는데 어떻게 하는지 모르겠어요.

    그리고 ol을써서 리스트들의 순번을 매겼는데 앞에 썸네일 이미지가 있어그런지 수자가 우에올라가 표시되요

    썸네일 이미지 1. 노래제목
    아티스트
    앨범
    이렇게 되야겠는데

    1.
    썸네일 이미지 노래제목
    아티스트
    앨범
    이렇게 되요

    두가지 좀 도와주세요

    대손님의 애독자 푸른꿈소녀 : 책하나 쓰시면 좋겠네

    ㅜㅜㅜㅜ 댓글편집기 이미지도 못올리고 쓰기 넘힘들어요 엉엉엉...
    답글

    • Favicon of https://daeson.tistory.com 대소니 2011.06.28 18:24 신고

      ol태그를 사용하면 JQM에서 자동으로 변환해주기 때문에,
      직접 변경하기 어려우시다면, 다른 방법으로 해보는건 어떨까요?
      노래 데이터를 어떻게 가지고 오시는지 모르지만, 제목앞에 순위를 붙여서 제목과 함께 보여주면 원하는 위치에 보여줄 수 있을 것 같아요.

  • 이정 2011.06.28 18:49

    <img src="images/album-hc.jpg" />
    <h3>Warning</h3>
    <p>Hot Chip</p>

    여기서 <h3>Warning</h3> 이거 대신에 <strong>Warning</strong> 쓰면 되네요.

    근데 저는 앨범들을 개개로 선택하기 위해 리스트 오른쪽에 체크박스를 놓아야 겠는데 어떻게 하는지 모르겠어요.

    http://webdevmobile.com/xe/37629 여기에 구체적인 질문을 올려놓았는데 조언좀 주세요

    왕초보래서 욕많이하셔요.

    대손님 조언 기다릴게요
    답글