Kendo UI API中文介绍六:ColorPicker (2)

原创|使用教程|编辑:我只采一朵|2014-06-11 11:14:01.000|阅读 397 次

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

相关链接:

本篇接着上一篇的拾色器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"事件。

参数
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>

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);


标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat