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

原创|使用教程|编辑:龚雪|2014-06-04 10:55:48.000|阅读 856 次

概述:本节为大家介绍的是kendo.ui.ColorPicker,一个下拉式的颜色拾取器组件。

相关链接:

本节为大家介绍的是kendo.ui.ColorPicker,一个下拉式的颜色拾取器组件。这个组件可代替浏览器内置的颜色拾取器,用HTML5语言<input type="color">就可以嵌入。下面首先介绍一下它的Configuration:

Configuration


buttons | Boolean(default: true)

设定组件是否显示 Apply / Cancel 按钮。当pallete没有设定时,只适用于HSV选择器。

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
buttons: false
})
</script>

columns Number

当设定了调色板之后,列的序号会显示在颜色下拉框中。如果使用了自定义的调色板,你可以设置列序号为你的颜色赋予意义。

示例 - 两行三列的颜色列表

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
columns: 3
});
</script>

tileSize | Number|Object(default: 14)

色块的尺寸

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "basic",
tileSize: 32
});
</script>

tileSize.width | Number(default: 14)

色块的宽度

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "basic",
tileSize: { width: 40 }
});
</script>

tileSize.height | Number(default: 14)

色块的高度

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "basic",
tileSize: { height: 40 }
});
</script>

messages | Object

支持 "Apply" / "Cancel"标签的自定义

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
messages: {
apply: "Update",
cancel: "Discard"
}
})
</script>

palette String | Array(default: null)

当应用一个非空面板参数时,下拉框会是一个非常简单的颜色拾取器,支持下面两种值:

  • "basic" -- 显示20种最基本的颜色
  • "websafe" -- 显示"web-safe"颜色调色板

另外,如果用逗号分隔的十六进制表示颜色或者颜色数组,它会以调色板代替。如果传递一串数组,它可以包含parseColor or Color对象支持的字符串。

如果调色板丢失或为空,组件会显示HSV选择器。

示例 - 使用"websafe"调色板

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "websafe"
});
</script>

示例 - 使用颜色列表

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
columns: 6
});
</script>

opacity | Boolean(default: false)

只针对HSV选择器,如果为true,组件将显示不透明滑块。注意当前用HTML5代码&lt;input type="color">不支持透明。

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
opacity: true
});
</script>

preview | Boolean(default: true)

只适用于HSV选择器

显示颜色预览元素,并附有一个输入字段,让最终用户可以用CSS支持的符号粘贴颜色。

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
preview: false
});
</script>

toolIcon | String(default: null)

颜色拾取器按钮内的CSS类名称显示图标,如果设定了之后,元素的HTML会显示成这样:

<span class="k-tool-icon ${toolIcon}">
<span class="k-selected-color"></span>
</span>

示例

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
toolIcon: "k-foreColor"
});
</script>

value String|Color(default: null)

表示最初选中的颜色。注意如果从一个&lt;input>元素初始化组件时,初始颜色由字段决定。

示例

<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
value: "#b72bba"
});
</script>


标签:APIKendoUI

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

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
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