世俱杯 2025

本节为大家介绍一下Kendo UI的调色板组件(kendo.ui.ColorPalette)。ColorPalette是用于颜色拾取器中的组件，也可以单独应用于网页当中。

Configuration

palette | String|Array(default: "basic")

用于指定调色板的颜色，既可以是以逗号分隔的十六进制字符串，也可以是 kendo.Color object 的数组，或者是 parseColor 能够识别的字符串。简而言之，你可以传递"basic"获取简单的默认调色板，也可以传递 "websafe"获取适用于网页的调色板。

示例-使用 "websafe"调色板

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: "websafe"
});
</script>

示例-颜色列表

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
columns: 6
});
</script>

columns | Number(default: 10)

表示列的数量，使用"websafe"调色板时，会自动默认为18列。

示例-颜色列表以两行三列进行显示

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
columns: 3
});
</script>

tileSize | Number | Object(default: 14)

颜色单元的尺寸

示例

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: "basic",
tileSize: 32
});
</script>

tileSize.width | Number(default: 14)

颜色单元的宽度

示例

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: "basic",
tileSize: { width: 40 }
});
</script>

tileSize.height | Number(default: 14)

颜色单元的高度

示例

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: "basic",
tileSize: { height: 40 }
});
</script>

value | String | Color(default: null)

指定最初选中的颜色。

示例

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
palette: "basic",
value: "#fff"
});
</script>

Methods

value | String | Color(default: null)

获取或设置选中的颜色，如果没有给出参数，它会将选中的颜色以字符串(#FFFFFF)的形式返回。
如果给出了一个参数，值会选中当前颜色并更新UI。算法可以是hex、rgb、rgba格式的字符串，也可以是kendo.Color object。

重要提示：这个方法不会触发"change"事件

Returns

String 表示当前颜色的字符串

示例

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette();
var palette = $("#palette").data("kendoColorPalette");

// set palette value
palette.value("#ccc");

// get palette value
var value = palette.value();
</script>

color

获取或设置选中的颜色，如果没有参数，它会返回当前选中的颜色作为kendo.Color object

Returns

kendo.Color 当前颜色值

enable

启用或禁用组件

示例 - 禁用调色板

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette();
var palette = $("#palette").data("kendoColorPalette");
palette.enable(false);
</script>

Events

change

当颜色发生变化时会触发这个事件

示例 - 在初始化阶段触发"change"

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
change: function(e) {
console.log("The newly selected color is ", e.value);
}
});
</script>

示例 - 初始化之后触发 "change" 事件

<div id="palette"></div>
<script>
function palette_change(e) {
console.log("The newly selected color is ", e.value);
}
$("#palette").kendoColorPalette();
var palette = $("#palette").data("kendoColorPalette");
palette.bind("change", palette_change);
</script>

慧都特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>