jQuery Mobile Listview 图标选项

jQuery Mobile是一套基于 HTML5 的用户系统交互小部件工具箱，用于构建在 jQuery 之上的各种用途。它旨在构建可用于移动设备、选项卡和桌面的快速响应式网站。 jQuery Listview 是一个用于创建漂亮列表的小部件。它是一个简单且响应迅速的 Listview，用于查看无序列表。

在本文中，我们将使用 jQuery Mobile Listview图标选项。链接列表项可以具有与 jQuery Mobile 不同的图标。图标出现在列表项的末尾。我们有很多图标来展示不同的条件。这个选项也暴露给“数据属性：data-icon”

语法：改变链表项图标的语法如下。

$(".items").listview({
  icon:"arrow-r",
});

jQuery Mobile 有多个图标。整个名单如下：

ICONS LIST
action	audio	check	grid	power
alert	back	clock	heart	recycle
arrow-d	bars	cloud	home	refresh
arrow-d-l	bullets	comment	info	search
arrow-d-r	calendar	delete	location	shop
arrow-l	camera	edit	lockmail	star
arrow-r	carat-d	eye	minus	tag
arrow-u	carat-l	forbidden	navigation	user
arrow-u-l	carat-r	forward	phone	video
arrow-u-r	carat-u	gear	plus

CDN 链接：首先，添加项目所需的 jQuery Mobile 脚本。

示例 1 ：以下示例演示了使用星形图标的列表视图。

HTML

  

    
    
    
    GeeksforGeeks
    
    
    
    
   

  

    GeeksforGeeks Light Theme Listview
    
        
            
              Data Structures
            
        
        
            
              Interview preparation
            
        
        
            
              Java Prgramming
            
        
    
    
      $(".items").listview({
          icon: "star",
      });
    

  

输出：

示例 2 ：以下示例演示了使用右箭头图标作为“箭头-r”的列表视图。

HTML

  

    
    
    
    GeeksforGeeks
    
    
    
    
    

  

    GeeksforGeeks Light Theme Listview
    
        
            
              Data Structures
            
        
        
            
              Interview preparation
            
        
        
            
              Java Prgramming
            
        
    
    
          $(".items").listview({
              icon: "arrow-r",
          });
    

输出：

参考： https://api.jquerymobile.com/listview/#option-icon