在 jQuery Mobile 中,你可以使用列表内容(Listview Content)来增强列表的显示效果,例如添加缩略图、副标题、计数器等。以下是一些演示如何使用列表内容的示例:

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