jQWidgets jqxTagCloud fontSizeUnit 属性 - BBSMAP

jQWidgets jqxTagCloud fontSizeUnit 属性

Post published:2023年5月12日
Post category:jquery

以下是详细讲解“jQWidgets jqxTagCloud fontSizeUnit 属性”的完整攻略。

jQWidgets jqxTagCloud fontSizeUnit 属性

jQWidgets jqxTagCloud 组件是一个用于显示标签云的常用组件。该组件提供了许多可配置的属性，其中 fontSizeUnit 属性用于设置标签字体大小的单位。默认值为 px。

语法

$('#jqxTagCloud').jqxTagCloud({ fontSizeUnit: 'px' });

属性值

fontSizeUnit 属性有如下可选值：

px：字体大小以像素为单位。
%：字体大小以百分比为单位。
em：字体大小以em为单位。
rem：字体大小以rem为单位。
pt：字体大小以点为单位。
pc：字体大小以派卡为单位。
mm：字体大小以毫米为单位。
cm：字体大小以厘米为单位。
in：字体大小以英寸为单位。

示例说明

以下是两个示例，分别展示了设置不同的 fontSizeUnit 属性后标签字体大小的变化。代码示例中依赖于 jQWidgets 样式和脚本，需要先引入相应文件。

示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQWidgets jqxTagCloud fontSizeUnit属性示例1</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtagcloud.js"></script>
</head>
<body>
<div id="jqxTagCloud"></div>
<script type="text/javascript">
    $(document).ready(function() {
        var data = [
            { tag: 'HTML', count: 10 },
            { tag: 'CSS', count: 8 },
            { tag: 'JavaScript', count: 15 },
            { tag: 'Vue.js', count: 5 },
            { tag: 'React', count: 7 },
        ];
        $('#jqxTagCloud').jqxTagCloud({
            width: 500,
            height: 400,
            source: data,
            fontSizeUnit: 'px'
        });
    });
</script>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQWidgets jqxTagCloud fontSizeUnit属性示例2</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-framework/jqwidgets/jqxtagcloud.js"></script>
</head>
<body>
<div id="jqxTagCloud"></div>
<script type="text/javascript">
    $(document).ready(function() {
        var data = [
            { tag: 'HTML', count: 10 },
            { tag: 'CSS', count: 8 },
            { tag: 'JavaScript', count: 15 },
            { tag: 'Vue.js', count: 5 },
            { tag: 'React', count: 7 },
        ];
        $('#jqxTagCloud').jqxTagCloud({
            width: 500,
            height: 400,
            source: data,
            fontSizeUnit: '%'
        });
    });
</script>
</body>
</html>

以上两个示例中，第一个示例设置了 fontSizeUnit: 'px'，即字体大小以像素为单位，标签字体大小会按照像素大小进行展示；第二个示例设置了 fontSizeUnit: '%'，即字体大小以百分比为单位，标签字体大小会按照相对比例进行展示。

Tags: jquery