本節(jié)為大家介紹的是kendo.ui.ColorPicker，一個(gè)下拉式的顏色拾取器組件。這個(gè)組件可代替瀏覽器內(nèi)置的顏色拾取器，用HTML5語言<input type="color">就可以嵌入。下面首先介紹一下它的Configuration：

Configuration

buttons | Boolean(default: true)

設(shè)定組件是否顯示 Apply / Cancel 按鈕。當(dāng)pallete沒有設(shè)定時(shí)，只適用于HSV選擇器。

示例

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

columns Number

當(dāng)設(shè)定了調(diào)色板之后，列的序號(hào)會(huì)顯示在顏色下拉框中。如果使用了自定義的調(diào)色板，你可以設(shè)置列序號(hào)為你的顏色賦予意義。

示例 - 兩行三列的顏色列表

<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"標(biāo)簽的自定義

示例

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

palette String | Array(default: null)

當(dāng)應(yīng)用一個(gè)非空面板參數(shù)時(shí)，下拉框會(huì)是一個(gè)非常簡單的顏色拾取器，支持下面兩種值：

• "basic" -- 顯示20種最基本的顏色
• "websafe" -- 顯示"web-safe"顏色調(diào)色板

另外，如果用逗號(hào)分隔的十六進(jìn)制表示顏色或者顏色數(shù)組，它會(huì)以調(diào)色板代替。如果傳遞一串?dāng)?shù)組，它可以包含parseColor or Color對象支持的字符串。

如果調(diào)色板丟失或?yàn)榭眨M件會(huì)顯示HSV選擇器。

示例 - 使用"websafe"調(diào)色板

<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，組件將顯示不透明滑塊。注意當(dāng)前用HTML5代碼<input type="color">不支持透明。

示例

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

preview | Boolean(default: true)

只適用于HSV選擇器

顯示顏色預(yù)覽元素，并附有一個(gè)輸入字段，讓最終用戶可以用CSS支持的符號(hào)粘貼顏色。

示例

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

toolIcon | String(default: null)

顏色拾取器按鈕內(nèi)的CSS類名稱顯示圖標(biāo)，如果設(shè)定了之后，元素的HTML會(huì)顯示成這樣：

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

表示最初選中的顏色。注意如果從一個(gè)<input>元素初始化組件時(shí)，初始顏色由字段決定。

示例

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