jQWidgets jqxTagCloud urlBase 属性

介绍

jQWidgets jqxTagCloud 是一个基于 jQuery 的 JavaScript 库，为开发者提供了一个简单易用的标签云组件。其中 urlBase 属性可以让开发者设置标签的链接基础路径。

使用

引入

首先，需要在 HTML 文件中引入 jQuery 和 jQWidgets jqxTagCloud 的脚本文件和样式文件。

<!-- 引入 jQuery 脚本文件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jQWidgets jqxTagCloud 脚本文件 -->
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxdata.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxbuttons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxscrollbar.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxlistbox.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxdropdownlist.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxtagcloud.js"></script>

<!-- 引入 jQWidgets jqxTagCloud 样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/styles/jqx.classic.css">

设置

构建一个 HTML 元素作为容器，然后使用 jQWidgets jqxTagCloud 脚本创建一个标签云组件。其中，在设置标签数据源的时候可以使用 urlBase 属性设置标签的链接基础路径。

<div id="tagCloudContainer"></div>

// 标签数据源
let tags = [
    { label: 'HTML', url: 'https://www.w3.org/html/' },
    { label: 'CSS', url: 'https://www.w3.org/Style/CSS/' },
    { label: 'JavaScript', url: 'https://www.javascript.com/' },
    { label: 'jQuery', url: 'https://jquery.com/' },
    { label: 'React', url: 'https://reactjs.org/' },
    { label: 'Vue', url: 'https://vuejs.org/' },
    { label: 'Angular', url: 'https://angular.io/' }
];

// 创建标签云组件
$('#tagCloudContainer').jqxTagCloud({
    source: tags,
    urlBase: 'https://www.baidu.com/s?ie=UTF-8&wd=' // 设置标签的链接基础路径
});

属性

urlBase

• 类型：字符串
• 默认值：''
• 描述：设置标签的链接基础路径。

总结

jQWidgets jqxTagCloud 的 urlBase 属性可以方便地设置标签的链接基础路径，帮助开发者快速构建一个简单易用的标签云组件。