本節為大家介紹的是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>