世俱杯 2025

本篇接着上一篇的拾色器kendo.ui.ColorPicker，今天要介绍的API是Methods和Events。

Methods

close

关闭弹出菜单。

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.open();

setTimeout(function() {
colorpicker.close();
}, 1000);
</script>

open

打开拾色器的弹出元素。

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.open();
</script>

toggle

切换弹出菜单

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.toggle();
</script>

value String|Color(default: null)

获取或设置选中的颜色。如果没有给出参数，并且透明度是关闭状态时，这个值会以#FFFFFF的格式返回当前选中的颜色

如果给出了一个参数，它会选择一个新颜色并更新UI。参数可以是十六进制或RGB或RGBA格式的字符串，或者是一个Color对象。它不会触发"change"事件。

Returns

String 当前颜色的字符串表示方式

示例

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

// set picker value
colorpicker.value("#ccc");

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

color

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

Returns

kendo.Color 当前值

enable

启用或禁用组件

示例 - 禁用拾色器

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

Events

change

当颜色被选中时会触发这个事件，不管是直接点击的，或者是点击ENTER键或者在HSV拾取器中按下"Apply"。

Event Data

e.value String 拾色器的值

示例 - 初始化期间触发 "change" 事件

<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
change: function(e) {
console.log("The picked color is ", e.value);
}
});
</script>

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

<div id="colorpicker"></div>
<script>
function picker_change(e) {
console.log("The picked color is ", e.value);
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("change", picker_change);
</script>

select

下拉拾色器中显示了一个新颜色时会触发该事件。这未必是"final";值，比如拖动HSV拾色器中的滑块时会触发事件，但按下ESC键就会取消选中，并且颜色会返回到初始值。

e.value String 拾色器的值

示例 - 初始化期间触发 "select" 事件

<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
select: function(e) {
console.log("The selected color is ", e.value);
}
});
</script>

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

<div id="colorpicker"></div>
<script>
function picker_select(e) {
console.log("The selected color is ", e.value);
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("select", picker_select);
</script>

open

打开拾色器弹出菜单是会触发该事件。

示例 - 初始化期间触发 "open" 事件

<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
open: function() {
console.log("Picker popup opened");
}
});
</script>

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

<div id="colorpicker"></div>
<script>
function picker_open() {
console.log("Picker popup opened");
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("open", picker_open);
</script>

close

当拾色器菜单关闭时触发该事件。

示例 - 初始化期间触发 "close" 事件

<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
close: function() {
console.log("Picker popup closed");
}
});
</script>

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

<div id="colorpicker"></div>
<script>
function picker_close() {
console.log("Picker popup closed");
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("close", picker_close);