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

Posted 2023-05-09

【中文标题】JQuery Mobile+Phone Gap：如何实现包含 2 个部分的（表）列表视图

【英文标题】：JQuery Mobile+Phone Gap: How to implement a (table) list view with 2 sections

【发布时间】：2012-06-03 12:20:48

【问题描述】：

我已经使用 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 部分

怎么可能

【参考方案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>

【讨论】：

非常感谢您的回复，您的帖子对我帮助很大，谢谢您

【参考方案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>

【参考方案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