jQWidgets jqxTagCloud displayValue属性

当用jQWidgets构建一个标签云控件时，你可以使用jqxTagCloud插件。jqxTagCloud控件显示一个列表，每个项代表一个标签或话题。

jqxTagCloud控件具有一系列可用属性，其中之一就是displayValue属性。这个属性可以用来显示标签和话题的不同值。默认情况下，标签和话题将会显示在同一个位置，但是当你把displayValue属性设置为true时，标签和话题将会以不同的方式显示。

以下是jqxTagCloud插件中displayValue属性的详细说明：

1. displayValue属性基本用法

你可以为每个标签或话题指定一个可显示的值，以便标签云控件显示。当displayValue属性为true时，列表中的每个标签都将根据该项的displayValue属性值进行显示。

$('#jqxTagCloud').jqxTagCloud({
  width: 400,
  height: 300,
  displayValue: true,
  showBorder: true,
  source: [
    { tag: 'JavaScript', url: 'javascript.html', displayValue: 'JavaScript' },
    { tag: 'Node.js', url: 'nodejs.html', displayValue: 'Node.js' },
    { tag: 'React', url: 'react.html', displayValue: 'React' },
    { tag: 'Vue.js', url: 'vuejs.html', displayValue: 'Vue.js' },
  ]
});

在上述代码中，我们将displayValue属性设置为true，并为每个标签提供了一个displayValue属性值。控件现在显示的是标签的displayValue属性值而不是默认的tag属性值。

2. 进一步自定义displayValue属性显示方式

如果你想自定义标签/话题的显示方式，可以使用itemRenderer属性。你可以指定itemRenderer属性为一个函数，该函数将返回一个DOM元素，用于自定义每个标签的显示方式。

$('#jqxTagCloud').jqxTagCloud({
  width: 400,
  height: 300,
  displayValue: true,
  showBorder: true,
  itemRenderer: function(itemValue, minValue, maxValue, item) {
    // 自定义函数绘制DOM标签
    var div = document.createElement('div');
    div.style.padding = '5px';
    div.style.margin = '5px';
    div.style.fontSize = '16px';
    if (itemValue === 'JavaScript') {
        div.style.color = 'blue';
    } else if (itemValue === 'Node.js') {
        div.style.color = 'green';
    } else if (itemValue === 'React') {
        div.style.color = 'red';
    } else {
        div.style.color = 'black';
    }
    div.innerHTML = itemValue;
    return div;
  },
  source: [
    { tag: 'JavaScript', url: 'javascript.html', displayValue: 'JavaScript' },
    { tag: 'Node.js', url: 'nodejs.html', displayValue: 'Node.js' },
    { tag: 'React', url: 'react.html', displayValue: 'React' },
    { tag: 'Vue.js', url: 'vuejs.html', displayValue: 'Vue.js' },
  ]
});

在上述代码中，我们定义了一个自定义函数itemRenderer，该函数用于绘制DOM标签。标签的颜色是根据标签/话题的内容来确定的，这些内容分别是‘JavaScript’, 'Node.js’, 'React’和 'Vue.js'。

注意，当displayValue属性为true时，控件将会使用标签对象的displayValue属性来调用itemRenderer方法。因此，在上面的示例中，itemRenderer方法中的第一个参数就是由标签的displayValue属性提供的。

希望以上说明对你有所帮助！