jQuery Mobile 列表视图

jQuery Mobile 列表视图

jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(

) 和 无序(
).

列表视图算得上是 jQuery Mobile 里非常实用的一项能力。借助它，原本普通的无序列表或有序列表就不只是“展示内容”这么简单了，用途会一下子丰富很多。使用方式也不复杂，只需要在 ul 或 ol 标签上加上 data-role="listview" 属性即可。接着，在每一个项目(

• )里放入链接，用户就可以直接点击访问：

  实例

  	
  
    
  列表项m
  
  
   
  	
  列表项
  

  列表样式的圆角和边缘，使用 data-inset="true" 属性设置:

  实例

  
  

  	默认情况下，列表项的链接会自动变成一个按钮 (不需要 data-role="button")。

  
  

  列表分隔

  列表项也可以转化为列表分割项，用来组织列表，使列表项成组。

  指定列表分割，给列表项

• 元素添加 data-role="list-divider" 属性即可：

  实例

  	
  
   
  欧洲
    
  	
  法国
    
  德国
  

  如果手里有一份按字母顺序排好的列表，比如电话簿这类内容，那么给

  或
  元素加上 data-autodividers="true" 属性后，系统就会自动为列表项生成对应的分隔标识：

  实例

  	
  
    
  Adele
    
  	
  Agnes
    
  Billy
    
  	
  Calvin
    ...
  

  
  

  	data-autodividers="true" 可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。

  

  更多实例

  只读列表
  如何创建一个不带链接的列表 (不会是个按钮且不可点击)。

  面板
  如何在列表中插入面板