首页 > 代码库 > 4列表

4列表

    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”
 总结:
    
    
   

4列表