jQWidgets jqxTagCloud textColor属性 - BBSMAP

jQWidgets jqxTagCloud textColor属性

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

jQWidgets jqxTagCloud textColor属性

jqxTagCloud 是 jQWidgets 的一个标签云控件，其中 textColor 属性用于设置标签文字的颜色。

属性值

文本颜色：可以传入颜色值或关键字，例如 "red", "#00ff00", "rgb(255,0,0)" 等。

使用方法

要设置标签云控件的 textColor 属性，需要按照以下步骤进行：

构建 jqxTagCloud 控件

$("#jqxTagCloud").jqxTagCloud({
    width: 250,
    height: 150,
    fontSizeUnit: 'px',
    minFontSize: 12,
    maxFontSize: 28,
    tags: [
        { label: 'HTML', url: 'http://www.w3.org/html/', target: '_blank', size: 20 },
        { label: 'CSS', url: 'http://www.w3.org/Style/CSS/', target: '_blank', size: 16 },
        { label: 'JavaScript', url: 'http://www.ecma-international.org/publications/standards/Ecma-262.htm', target: '_blank', size: 14 },
        { label: 'jQuery', url: 'http://jquery.com/', target: '_blank', size: 12 },
        { label: 'jQWidgets', url: 'http://www.jqwidgets.com/', target: '_blank', size: 10 },
        { label: 'AJAX', url: 'http://api.jquery.com/category/ajax/', target: '_blank', size: 8 }
    ],
});

设置 textColor 属性

$("#jqxTagCloud").jqxTagCloud({
    textColor: 'green'
});

示例说明

示例一

在此示例中，我们创建了一个标签云控件，并将文字颜色设置为红色。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTagCloud 示例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtagcloud.js"></script>
    <style>
        #jqxTagCloud {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="jqxTagCloud"></div>
    <script>
        $(document).ready(function () {
            $("#jqxTagCloud").jqxTagCloud({
                width: 250,
                height: 150,
                fontSizeUnit: 'px',
                minFontSize: 12,
                maxFontSize: 28,
                tags: [
                    { label: 'HTML', url: 'http://www.w3.org/html/', target: '_blank', size: 20 },
                    { label: 'CSS', url: 'http://www.w3.org/Style/CSS/', target: '_blank', size: 16 },
                    { label: 'JavaScript', url: 'http://www.ecma-international.org/publications/standards/Ecma-262.htm', target: '_blank', size: 14 },
                    { label: 'jQuery', url: 'http://jquery.com/', target: '_blank', size: 12 },
                    { label: 'jQWidgets', url: 'http://www.jqwidgets.com/', target: '_blank', size: 10 },
                    { label: 'AJAX', url: 'http://api.jquery.com/category/ajax/', target: '_blank', size: 8 }
                ],
                textColor: 'red',
            });
        });
    </script>
</body>
</html>

示例二

在此示例中，我们创建了一个标签云控件，并将文字颜色设置为深蓝色。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTagCloud 示例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxslider.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="http://cdn.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtagcloud.js"></script>
    <style>
        #jqxTagCloud {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="jqxTagCloud"></div>
    <script>
        $(document).ready(function () {
            $("#jqxTagCloud").jqxTagCloud({
                width: 250,
                height: 150,
                fontSizeUnit: 'px',
                minFontSize: 12,
                maxFontSize: 28,
                tags: [
                    { label: 'HTML', url: 'http://www.w3.org/html/', target: '_blank', size: 20 },
                    { label: 'CSS', url: 'http://www.w3.org/Style/CSS/', target: '_blank', size: 16 },
                    { label: 'JavaScript', url: 'http://www.ecma-international.org/publications/standards/Ecma-262.htm', target: '_blank', size: 14 },
                    { label: 'jQuery', url: 'http://jquery.com/', target: '_blank', size: 12 },
                    { label: 'jQWidgets', url: 'http://www.jqwidgets.com/', target: '_blank', size: 10 },
                    { label: 'AJAX', url: 'http://api.jquery.com/category/ajax/', target: '_blank', size: 8 }
                ],
                textColor: 'darkblue',
            });
        });
    </script>
</body>
</html>

以上是其中两条示例，可以根据不同需求自行设置属性值。

Tags: jquery