1. 带缩略图的列表项
<ul data-role="listview" data-inset="true">
<li>
<img src="image1.jpg" alt="Thumbnail">
<h2>Item 1</h2>
<p>Description 1</p>
</li>
<li>
<img src="image2.jpg" alt="Thumbnail">
<h2>Item 2</h2>
<p>Description 2</p>
</li>
</ul>
在这个例子中,每个列表项包含了一个缩略图、一个标题(<h2> 元素)和一个描述(<p> 元素)。
2. 带计数器的列表项
<ul data-role="listview" data-inset="true">
<li>
<h2>Item 1</h2>
<span class="ui-li-count">3</span>
</li>
<li>
<h2>Item 2</h2>
<span class="ui-li-count">7</span>
</li>
</ul>
在这个例子中,每个列表项包含了一个标题和一个计数器,计数器使用 ui-li-count 类进行样式设置。
3. 带副标题的列表项
<ul data-role="listview" data-inset="true">
<li>
<h2>Item 1</h2>
<p class="ui-li-aside">Subtitle 1</p>
</li>
<li>
<h2>Item 2</h2>
<p class="ui-li-aside">Subtitle 2</p>
</li>
</ul>
在这个例子中,每个列表项包含了一个标题和一个副标题,副标题使用 ui-li-aside 类进行样式设置。
这只是 jQuery Mobile 列表内容的基本用法示例。你可以根据实际需求选择不同的内容元素和样式,以及添加更多的交互功能。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/listview/)中找到。
转载请注明出处:http://www.zyzy.cn/article/detail/9427/jQuery Mobile