原創|使用教程|編輯:我只采一朵|2014-06-11 11:14:01.000|閱讀 900 次
概述:本篇接著上一篇的拾色器kendo.ui.ColorPicker,今天要介紹的API是Methods和Events。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
本篇接著上一篇的拾色器kendo.ui.ColorPicker,今天要介紹的API是Methods和Events。
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"事件。
| 參數 |
| color String(optional) |
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對象。
| 參數 |
| color kendo.Color(optional) 設置為當前值的顏色 |
Returns
kendo.Color 當前值
enable
啟用或禁用組件
| 參數 |
| enable Boolean(optional) 確定組件是否是禁用還是啟用狀態,如果沒有設定,這個方法會啟用組件 |
示例 - 禁用拾色器
<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.enable(false);
</script>
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);
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自:慧都控件