JQueryMobile入门4-List列表

基本列表类型

• 普通链接列表
  通过定义data-role属性为listview，jqm会自动将需要的列表样式加入到列表上。
  

  
  

  
  

  列表测试页面

  
  

  
  

  
  

  
  
  • List 1
  
  
  • List 2
  
  
  • List 3
  
  
  • List 4
  
  

  
  

  
  

  
  

  页面底部

  
  

  
  
  
  
  

  Paste_Image.png

• 多层次嵌套列表

• 有序编号列表
  ul元素替换为ol元素即可

• 可分割按钮列表
  

  
  
  • 
    List 1
    
    
  
  
  • 
    List 2
    
    
  
  
  • 
    List 3
    
    
  
  
  • 
    List 4
    
    
  
  

Paste_Image.png

• 列表分隔符
  
  
  
  • A
  
  
  • Apple
  
  
  • B
  
  
  • Banana
  
  
  • Ball
  
  
  • C
  
  
  • Cups
  
  
  • D
  
  
  • Desk
  
  
  • Dession 1
  
  
  • Dertarl
  
  

Paste_Image.png

• 列表搜索过滤器
  ul元素设置data-filter属性为true，列表上方会动态增加一个搜索文本框，只能搜索当前列表数据项，如果需要搜索后端数据并显示到页面，需要自行编写实现逻辑

Paste_Image.png

• 气泡式计数列表
  每个li元素中定义要给span元素，并指定class属性值为ui-li-count，就可以在列表项的右侧增加一个含数字的气泡。
  
• 
  Apple
  20
  
  

Paste_Image.png

• 显示列表项右侧文本列表
  
• 
  Apple
  

  vice good

  
  
  

Paste_Image.png

• 列表项含有图标的列表
  
• 
  Apple
  

Paste_Image.png

• 列表项含有图片的列表
  
• 
  
  

  Broken Bells

  
  

  Broken Bells

  
  

Paste_Image.png

• 内嵌列表
  
  
  

  
  
  • List 133
  
  
  • List 215
  
  
  • List 360
  
  

  
  

  
  
  1. List 133
  
  
  2. List 215
  
  
  3. List 360
  
  

  
  

Paste_Image.png

• 可折叠列表
  
  
  

  
  

  
  

  Filtered list

  
  

  
  
  • Adam Kinkaid
  
  
  • Alex Wickerham
  
  

  
  

  
  

  
  

  Formatted text

  
  

  
  
  • Friday, October 8, 2010 2
  
  
  • 
    

    Stephen Weber

    
    

    You've been invited to a meeting at Filament Group in Boston, MA

    
    

    Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.

    
    

    6:24PM

    
    
  
  

  
  

  
  

  
  

  Thumbnails and split button

  
  

  
  

  
  

  
  

  
  

Paste_Image.png