博客

jQWidgets jqxTreeMap theme属性

  • Post category:jquery

jQWidgets jqxTreeMap theme属性详解

概述

jQWidgets jqxTreeMap组件提供了theme属性，用于设置组件的主题（风格），主题可以是内置的预设主题，也可以是自定义主题。

内置预设主题

jQWidgets jqxTreeMap组件内置了多个主题样式，可以直接使用。内置主题样式包括：classic、material、office、light、dark、energyblue、fresh等。

使用内置主题的方式非常简单，只需要将theme属性设置为预设主题名称即可。例如：

$('#myTreeMap').jqxTreeMap({
    theme: 'office'
});

自定义主题

如果需要使用自定义主题，可以通过定义一个CSS类来实现。自定义主题需要设置的样式可参照内置主题的样式进行设置。

首先，创建一个CSS类用于定义自定义主题的样式：

.myCustomTheme .jqx-treemap-leaf,
.myCustomTheme .jqx-treemap-header,
.myCustomTheme .jqx-treemap-titles {
    font-family: "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.myCustomTheme .jqx-treemap-header,
.myCustomTheme .jqx-treemap-titles,
.myCustomTheme .jqx-fill-state-pressed,
.myCustomTheme .jqx-fill-state-hover,
.myCustomTheme .jqx-treemap-leaf:hover {
    background-color: #ecf0f1;
    color: #000;
    stroke: #000;
}

.myCustomTheme .jqx-treemap-leaf,
.myCustomTheme .jqx-treemap-header {
    border: 1px solid #ccc;
}

然后，在初始化组件时将theme属性设置为自定义类名即可。

$('#myTreeMap').jqxTreeMap({
    theme: 'myCustomTheme'
});

示例说明

示例一

在本示例中，我们需要将jQWidgets jqxTreeMap的主题设置为内置预设主题中的一种，例如：classic、material等。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTreeMap Theme Demo</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxtreemap.js"></script>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
</head>
<body>
    <div id="myTreeMap" style="width:500px; height:300px;"></div>
    <script>
    $(document).ready(function () {
        $('#myTreeMap').jqxTreeMap({
            source: [
                { label: 'Asia', value: 400 },
                { label: 'Africa', value: 100 },
                { label: 'Europe', value: 100 },
                { label: 'North America', value: 50 },
                { label: 'South America', value: 50 },
                { label: 'Australia', value: 20 }
            ],
            theme: 'classic'
        });
    });
    </script>
</body>
</html>

示例二

在本示例中，我们需要创建自定义主题，将jQWidgets jqxTreeMap的主题设置为自定义主题。

<!DOCTYPE html>
<html>
<head>
    <title>jQWidgets jqxTreeMap Theme Demo</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="jqwidgets/jqxcore.js"></script>
    <script src="jqwidgets/jqxtreemap.js"></script>
    <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <style>
        .myCustomTheme .jqx-treemap-leaf, 
        .myCustomTheme .jqx-treemap-header,
        .myCustomTheme .jqx-treemap-titles {
            font-family: "Segoe UI", sans-serif;
            font-size: 14px;
            font-weight: normal;
        }

        .myCustomTheme .jqx-treemap-header,
        .myCustomTheme .jqx-treemap-titles,
        .myCustomTheme .jqx-fill-state-pressed,
        .myCustomTheme .jqx-fill-state-hover,
        .myCustomTheme .jqx-treemap-leaf:hover {
            background-color: #ecf0f1;
            color: #000;
            stroke: #000;
        }

        .myCustomTheme .jqx-treemap-leaf,
        .myCustomTheme .jqx-treemap-header {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="myTreeMap" style="width:500px; height:300px;"></div>
    <script>
    $(document).ready(function () {
        $('#myTreeMap').jqxTreeMap({
            source: [
                { label: 'Asia', value: 400 },
                { label: 'Africa', value: 100 },
                { label: 'Europe', value: 100 },
                { label: 'North America', value: 50 },
                { label: 'South America', value: 50 },
                { label: 'Australia', value: 20 }
            ],
            theme: 'myCustomTheme'
        });
    });
    </script>
</body>
</html>
Tags: