listview - 使用 jQuery Mobile 的多行列表视图项目

Question

我无法弄清楚如何在 jQuery Mobile 中执行多行列表视图项目，如下图所示（一些附加信息......）

图片： https ://lh3.googleusercontent.com/-GSNEPObTo2c/T4m9GbfAcgI/AAAAAAAABec/fot1TgehC6w/s279/Bildschirmfoto%25202012-04-14%2520um%252020.01.37.png

有任何想法吗？

非常感谢，雅各布

Answer 1

如果您的li商品使用以下格式：

<li>
    <a href="first.html">
      <h3>First line</h3>
      <p>Whatever goes on the second line</p>
    </a> </li>

然后将以下内容添加到您的 CSS 中：

.ui-li-desc {white-space:normal;}​

例如，请参阅此jsFiddle。

Answer 2

试试这个：

<ul data-role="listview" data-theme="g">
  <li>
    <a href="first.html">
      <h3>First line</h3>
      <p>Whatever goes on the second line</p>
    </a>
  </li>
  <li>
    <a href="second.html">
      <h3>Second line</h3>
      <p>Whatever goes on the second line</p>
    </a>
  </li>
</ul>

这是大多数 jQuery Mobile 示例中使用的标准方式。它甚至会处理第二行的省略号截断。

Answer 3

.ui-listview > li p {
    white-space: normal;
}

将此代码添加到您自己的 CSS 文件中。有用！