jQuery Mobile Listview splitIcon 选项

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

在本文中，我们将使用jQuery Mobile ListView splitIcon选项。如果列表项有第二个链接，则splitIcon出现在 列表项的右侧。这表明列表项中有一些内容。 splitIcon的默认值 是carat-r类型。

注意：必须有一个 第二个链接以拆分图标出现，否则它不会显示，而是会显示正常图标。

句法：

使用指定的splitIcon选项初始化列表视图：

$(".items").listview({
    splitIcon: "star",
});

初始化后获取或设置splitIcon选项：

// Getter
var splitIcon = $(".selector").listview("option", "splitIcon");
 
// Setter
$( ".selector" ).listview( "option", "splitIcon", "star" );

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

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	carrot-u	gear	plus

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

示例：在此示例中，我们有一个列表视图，其中包含一个 的列表项有 两个链接。单击链接时，弹出窗口会打开一条消息和两个选项，以继续访问链接或关闭弹出窗口。弹出窗口也来自 jQuery 移动 UI 库。使用的splitIcon是星型的。

HTML

  

    
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    jQuery Mobile Listview splitIcon Option
          
    
        
            
                Data Structures
        
        
            
                Interview preparation
            
            
                Java Programming
            
        
        
            
                Java Programming
            
        
    
    
        GeeksforGeeks
        
            Open the Java Tutorial link by clicking 
            the Open button given below to learn 
            java from GeeksforGeeks.
        
  
        
            Open
        
  
        
            Cancel
        
    
  
    
        $(".items").listview({
            splitIcon: "star"
        });
    

  

输出：

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