Question

我使用 JQuery Mobile+Phone Gap

实现了表格视图

<ul data-role="listview">
  <li data-role="list-divider">A</li>
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li data-role="list-divider">B</li>
  <li><a href="index.html">Bob Cabot</a></li>

 </ul>

它仅显示包含一个部分的表格视图

我需要实施 (table) list view with multiple sections

并设置 the headers for the table view 部分

如何可能

Answer 1

您需要使用 List-Divider 元素：http://jquerymobile.com/demos/1.1.0/docs/lists/lists-divider.html。

喜欢这里：

<ul data-role="listview">
  <li data-role="list-divider">A</li>
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li data-role="list-divider">B</li>
  <li><a href="index.html">Bob Cabot</a></li>
<u1>

Answer 2

http://jsfiddle.net/eFEjL/

<ul data-role="listview">
                <ul data-role="listview">
  <li data-role="list-divider">A</li>
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li data-role="list-divider">B</li>
  <li><a href="index.html">Bob Cabot</a></li>
<u1>
 </ul>

Answer 3

尝试这个

<ul data-role="listview">
  <li data-role="list-divider">A</li>
  <li><a href="index.html">Adam Kinkaid</a></li>
  <li><a href="index.html">Alex Wickerham</a></li>
  <li><a href="index.html">Avery Johnson</a></li>
  <li data-role="list-divider">B</li>
  <li><a href="index.html">Bob Cabot</a></li>
<u1>

检查此链接， http://jquerymobile.com/demos/1.1.0/index.html#/demos/1.1.0/docs/lists/index.html

JQuery Mobile + Phone Gap：如何实现包含2个部分的（表）列表视图

3 个答案: