jQuery Mobile 목록 내용

jQuery Mobile 목록 축소판

16x16px보다 큰 이미지가 있을 경우, 링크에 <img> 요소를 추가하세요.

jQuery Mobile은 이미지를 자동으로 80x80px로 조정합니다:

예시

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

직접 시도해 보세요

정보가 포함된 목록을 채우기 위해 표준 HTML을 사용하세요:

예시

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome은 무료로 제공되는 오픈 소스 웹 브라우저입니다. 2008년에 출시되었습니다.</p>
    </a>
  </li>
</ul>

직접 시도해 보세요

jQuery Mobile 목록 아이콘

목록에 16x16px의 아이콘을 추가하려면, <img> 요소에 class="ui-li-icon" 속성을 추가하세요:

예시

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

직접 시도해 보세요

분할 버튼

수직 분리 레이아웃을 가진 분할 목록을 생성하려면, <li> 요소 내에 두 개의 링크를 배치하세요.

jQuery Mobile은 두 번째 링크에 자동으로 파란 화살표 아이콘 스타일을 추가하며, 아이콘을 드래그하면 링크의 텍스트(있을 경우)가 표시됩니다:

예시

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

직접 시도해 보세요

페이지와 다이얼로그를 추가하여 링크 기능을 강화할 수 있습니다:

예시

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">브라우저 다운로드</a>
  </li>
</ul>

직접 시도해 보세요

계수 부분

계수 부분은 목록 항목과 관련된 수를 표시하는 데 사용됩니다. 예를 들어, 이메일의 메시지:

계수 부분을 추가하려면, <span>와 같은 인라인 요소를 사용하고, class "ui-li-count" 속성을 설정하여 숫자를 추가하세요:

예시

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

직접 시도해 보세요

주의사항:카운트 팝업에 올바른 숫자를 표시하려면 프로그래밍 업데이트가 필요합니다. 다음 장에서 설명하겠습니다.

더 많은 예제

목록 항목의 기본 링크 아이콘 변경
목록 항목에 다른 링크 아이콘을 설정하는 방법 (기본적으로 오른쪽 화살표가 사용됩니다).
접고 펼치는 목록
내용을 숨기고 보이는 목록을 만드는 방법.
더 많은 내용 형식
달력을 만드는 방법.