jQWidgets jqxTagCloud urlMember属性

简介

jQWidgets是一个高性能、跨平台的Web交互组件库，包含丰富的UI组件和数据可视化工具。jqxTagCloud是其中一个标签云控件，可以方便地将文本数据以标签云的形式展示出来。

urlMember是jqxTagCloud控件的一个重要属性，用于指定标签点击后要跳转的URL地址。

语法

$('#tagCloud').jqxTagCloud({
    source: tags,
    urlMember: 'url'
});

参数

参数名	类型	描述
urlMember	String	指定标签点击后要跳转的URL地址对应的字段名。

示例1

在以下示例中我们定义了一个文本数据数组tags，其中每个元素包含标签名和对应的URL。控件初始化时指定urlMember属性为"url"，表示标签点击后要跳转到对应元素的"url"属性指定的地址。

<!DOCTYPE html>
<html>

<head>
    <title>jqxTagCloud urlMember示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxdata.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxtagcloud.js"></script>
</head>

<body>
    <div id="tagCloud"></div>
    <script>
        var tags = [
            { tag: 'Google', url: 'https://www.google.com' },
            { tag: 'Bing', url: 'https://www.bing.com' },
            { tag: 'Yahoo', url: 'https://www.yahoo.com' },
            { tag: 'Baidu', url: 'https://www.baidu.com' },
            { tag: 'Sogou', url: 'https://www.sogou.com' }
        ];
        $(document).ready(function () {
            $('#tagCloud').jqxTagCloud({
                width: '400px',
                height: '300px',
                source: tags,
                urlMember: 'url'
            });
        });
    </script>
</body>

</html>

示例2

在以下示例中我们重新定义了文本数据数组tags，去掉了每个元素的"url"属性，控件初始化时不指定urlMember属性，表示标签点击后不跳转。

<!DOCTYPE html>
<html>

<head>
    <title>jqxTagCloud urlMember示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxcore.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxdata.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets-scripts/12.0.1/jqxtagcloud.js"></script>
</head>

<body>
    <div id="tagCloud"></div>
    <script>
        var tags = [
            { tag: 'Google' },
            { tag: 'Bing' },
            { tag: 'Yahoo' },
            { tag: 'Baidu' },
            { tag: 'Sogou' }
        ];
        $(document).ready(function () {
            $('#tagCloud').jqxTagCloud({
                width: '400px',
                height: '300px',
                source: tags
            });
        });
    </script>
</body>

</html>

以上两个示例演示了jqxTagCloud控件的urlMember属性的使用方法。在实际项目中，我们可以根据业务需求自定义数据和属性，并且结合其他事件和属性实现丰富的交互效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQWidgets jqxTagCloud urlMember属性 - Python技术站

jQWidgets jqxTagCloud urlMember属性

jQWidgets jqxTagCloud urlMember属性

简介

语法

参数

示例1

示例2

相关文章