0

jQuery Mobile: Up and Running 中有一个示例，它显示了一个包含标题、描述和链接的交互式列表

http://my.safaribooksonline.com/book/-/9781449331085/4dot-lists/id2712982

我找不到此代码，到目前为止，我能够重现相同效果的唯一方法是将<hX>元素嵌套在 中<a>，我知道这是不好的做法。

任何人都可以提出正确的方法来实现这一目标吗？下面的示例有效，但只能通过将 .

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" />
    <title>List Example</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 

<body>
    <div data-role="page" id="example">

        <div data-role="header" data-theme="c">
            <h2>List Example</h2>
        </div>

        <div data-role="content">

            <ul data-role="listview" >
                <li>
                    <a href="#">
                    <h3>Title1</h3>
                    <p>Description1</p>
                    </a>
                </li>
                 <li>
                    <a href="#">
                    <h3>Title2</h3>
                    <p>Description2</p>
                    </a>
                </li>
              </ul>
        </div>

</body>

</html>
4

1 回答 1

0

来自JQM 文档（在“文本格式和计数”下）

要添加文本层次结构，请使用标题来增加字体强调并使用段落来减少强调。

所以这似乎是正确的方法。也就是说，您可以在其中嵌套任何您想要的内容，li并使用“CSS”对其进行样式设置。

于 2012-07-20T13:41:52.293 回答