列表

    jQuery Mobile的世界里，列表就是页面中的一个有序（ol元素）或（ul元素）列表，其中至少包含一个列表项（li元素），并且使用html5语法data-role="listview"将对应的role的值定义为listview。  

     4.1整页列表与插入列表

      默认情况下列表使用整页模式，有时会用到与其他html内容混合的列表，这会就用到jQuery Mobile提供了内联列表，要定义这种列表，只需在对应的ul或ol元素上添加data-inset="true"。

     4.2 视觉分隔符

    data-role=“list-divider”。分组，例如 GroupA、GroupB等

    代码：

    <ul data-rol="listview">

        <li data-role="list-divider">Group A</li>

        <li>argentina</li>

        <li data-role="list-divider">Group A</li>

        <li>argentina</li>

    </ul>

    4.3 交互行

    如果一个列表元素包含a元素，则该行会被转换为一个可影响触摸及、或鼠标导航的交互行。整行都为链接。同一列表中可以使用交互行和只读行。

    修改列表右侧的图标，可用data-icon属性。

     4.3.1 内嵌列表

    li中可以嵌套ul或ol，可以设置自定义主题。嵌套层级没有限制。

     4.3.2分割按钮列表

     jQuery Mobile 使用了"分割行"控件。如果一个列表项li包含两个超链接（a元素），则它将被自动当做分割行处理。

    常见的是一个详情操作和一个编辑操作。自己想象下吧。

    data-split-theme为右边的图标定义不同的主题。

    data-split-icon来修改第二个操作的图标，应用在列表自身（ul或ol元素）。

     控制行的重要程度：

    重要：可将标题包含在hx标签中。

    不重要：包含在p标签中。

      4.4  使用图片

     4.4.1 行图标

    行图标是显示在行标题左侧的图片，与交互行右边的箭头或分隔符的图标不是一个。

     4.4.2 缩略图

    缩略图是一个80*80像素的图片，位于文本左侧。例如，新闻标题。缩略图由列表项中的图片定义，不需要任何特殊的类。

     4.5 附加内容

    为每一行加一个次级列，用于补充信息。可以使用ui-li-aside类的html元素来实现。常用的如span或div元素。样子像是显示在右上角的小文字。

     4.6  标题与描述

   同一行上显示标题与描述，可将标题放在hx标题里，文本放在p元素里。他们会被渲染成两行。

     4.7  使用计数气泡

   在列表行中使用任意带ul-li-count属性的元素。 在右侧显示一个包含数字的圆圈。也可以显示文本，不过不建议使用，因为数字值是优化过的。

    4.8 使用搜索过滤数据

     属性：在ul或ol元素上加data-filter=“true”

 总结：