世俱杯 2025

本节为大家介绍的是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代码<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)

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

示例

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