本篇接著上一篇的拾色器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);