jQWidgets jqxTagCloud removeAt()方法

当我们需要从一个标签云组件中移除一个标签时，我们可以使用jQWidgets库中提供的 removeAt() 方法。下面是该方法的详细攻略。

方法介绍

removeAt(index: number): void

该方法用于从标签云组件中移除给定索引值的标签。

参数说明：

• index：必需，标签在标签数组中的索引值。

返回值：无。

方法示例

示例1：

下面的示例演示如何使用 removeAt() 方法从标签云组件中移除指定索引值的标签。

<div id="myTagCloud"></div>

//初始化标签数组
var myData = [
    { label: "Java", url: "http://www.java.com" },
    { label: "Python", url: "http://www.python.org" },
    { label: "JavaScript", url: "http://www.javascript.com" },
    { label: "C++", url: "http://www.cplusplus.com" }
];
//初始化标签云组件
var tagCloud = $("#myTagCloud").jqxTagCloud({ 
    width: 500, 
    height: 200, 
    source: myData 
});
//移除第二个标签
tagCloud.jqxTagCloud('removeAt', 1);

在上面的示例中，我们首先初始化了一个包含4个标签的标签数组 myData。接着，我们使用 jqxTagCloud() 方法初始化了一个标签云组件，然后调用 removeAt() 方法移除了第二个标签（即“Python”）。最后，我们可以在页面上看到只剩下3个标签。

示例2：

下面的示例演示如何在单击标签后移除该标签。

<div id="myTagCloud"></div>

//初始化标签数组
var myData = [
    { label: "Java", url: "http://www.java.com" },
    { label: "Python", url: "http://www.python.org" },
    { label: "JavaScript", url: "http://www.javascript.com" },
    { label: "C++", url: "http://www.cplusplus.com" }
];
//初始化标签云组件
var tagCloud = $("#myTagCloud").jqxTagCloud({
    width: 500,
    height: 200,
    source: myData,
    //绑定单击事件
    select: function (event) {
        //获取被选中的标签的索引值
        var index = event.args.index;
        //从标签云组件中移除该标签
        tagCloud.jqxTagCloud('removeAt', index);
    }
});

在上面的示例中，我们首先初始化了一个包含4个标签的标签数组 myData。然后，我们使用 jqxTagCloud() 方法初始化了一个标签云组件，并绑定了单击事件。当用户单击一个标签时，select 事件被触发，我们可以通过 event.args.index 获取到被选中标签的索引值，然后使用 removeAt() 方法从标签云组件中移除该标签。