항목에 헤딩 요소와 <p> 등을 추가해서 다양한 텍스트 형식을 표시할 수 있다. 다음의 예에서는 <h5>와 <p>를 사용해서 두 줄로 표현해 보았다.
항목에 숫자를 표시하려면 표시할 숫자를 감싼 요소에 class="ui-li-count"를 추가한다. 예에서는 리스트 디바이더에 <span>을 사용해서 표시할 숫자를 삽입해 보았다.
항목의 오른쪽에 표시할 보조 정보는 해당 텍스트를 감싼 요소에 class="ui-li-aside"를 추가한다. 예에서는 <span>을 사용해서 시간을 표시했다.
항목의 왼쪽에 썸네일 이미지를 추가하려면 <img> 요소를 사용한다. 이 이미지는 80픽셀의 정사각형으로 크기가 조정된다. 또한, 이미지에 class="ui-li-icon"을 추가하면 16픽셀의 표준 아이콘 크기로 표시된다.
<ul
data-role="listview" data-split-icon="star"
data-split-theme="d" data-filter="true">
<li
data-role="list-divider">2011년
11월<span
class="ui-li-count">108</span></li>
<li>
<a
href="#page1"><img
src="photo.jpg"/>
<h5>자아
찾아 삼만리</h5>
<p>나는
누구?
여긴
어디?</p>
<span
class="ui-li-aside">PM
4:44</span>
</a>
<a
href="#delete">삭제</a>
</li>
</ul>
만일 리스트 뷰의 항목을 자바스크립트를 사용해서 동적으로 생성했다면 다음과 같은 방식으로 새로고침을 해야 스타일이 제대로 표시된다.
$(document).bind('pageinit',
function() {
$('ul').html('<li><a href="#page1">항목
1</a></li>');
$('ul').listview('refresh');
});
