Kendo UI API中文介绍四:ColorPalette

原创|使用教程|编辑:我只采一朵|2014-05-28 10:25:17.000|阅读 541 次

概述:本节为大家介绍一下Kendo UI的调色板组件(kendo.ui.ColorPalette)。

相关链接:

本节为大家介绍一下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"事件

参数
color String(optional)

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

参数
color kendo.Color(optional) 设置当前颜色的值

Returns

kendo.Color 当前颜色值

enable

启用或禁用组件

参数
enable Boolean(optional)为true时启用组件,为false时禁用组件;如果没有指定,这个方法会启用这个组件。

示例 - 禁用调色板

<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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:UI界面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