在 jQuery Mobile 中，列表内容（Listview Content）不仅限于简单的文本链接。你可以在列表项中添加图标、计数器、缩略图等元素，以创建更丰富的列表。以下是一些例子，演示了如何添加不同类型的内容到 jQuery Mobile 列表项中：

图标和计数器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Listview Content</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Listview with Icons and Counters -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Listview Content Example</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview">
            <li>
                <a href="#">
                    <img src="icon1.png" alt="Icon 1" class="ui-li-thumb">
                    <h2>Item 1</h2>
                    <p>Item description goes here.</p>
                    <span class="ui-li-count">5</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="icon2.png" alt="Icon 2" class="ui-li-thumb">
                    <h2>Item 2</h2>
                    <p>Another item description.</p>
                    <span class="ui-li-count">10</span>
                </a>
            </li>
        </ul>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>
</div>

</body>
</html>

在这个例子中，每个列表项都包含一个图标、标题、描述文本和计数器。图标使用 class="ui-li-thumb" 来设置。计数器通过 <span class="ui-li-count">5</span> 添加。

缩略图：
<!-- Listview with Thumbnails -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Listview Thumbnail Example</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="#">
                    <img src="thumbnail1.jpg" alt="Thumbnail 1" class="ui-li-thumb">
                    <h2>Item 1</h2>
                    <p>Item description goes here.</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="thumbnail2.jpg" alt="Thumbnail 2" class="ui-li-thumb">
                    <h2>Item 2</h2>
                    <p>Another item description.</p>
                </a>
            </li>
        </ul>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>
</div>

在这个例子中，每个列表项包含一个缩略图、标题和描述文本。缩略图使用 class="ui-li-thumb" 来设置。

这只是 jQuery Mobile 列表内容的一些基本例子。你可以根据需要组合和定制这些元素，以创建符合你应用需求的列表。


转载请注明出处：http://www.zyzy.cn/article/detail/14457/jQuery Mobile