本節(jié)為大家介紹一下Kendo UI的調(diào)色板組件(kendo.ui.ColorPalette)。ColorPalette是用于顏色拾取器中的組件，也可以單獨(dú)應(yīng)用于網(wǎng)頁(yè)當(dāng)中。

Configuration

palette | String|Array(default: "basic")

用于指定調(diào)色板的顏色，既可以是以逗號(hào)分隔的十六進(jìn)制字符串，也可以是 kendo.Color object 的數(shù)組，或者是 parseColor 能夠識(shí)別的字符串。簡(jiǎn)而言之，你可以傳遞"basic"獲取簡(jiǎn)單的默認(rèn)調(diào)色板，也可以傳遞 "websafe"獲取適用于網(wǎng)頁(yè)的調(diào)色板。

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

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

表示列的數(shù)量，使用"websafe"調(diào)色板時(shí)，會(huì)自動(dòng)默認(rèn)為18列。

示例-顏色列表以兩行三列進(jìn)行顯示

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

獲取或設(shè)置選中的顏色，如果沒有給出參數(shù)，它會(huì)將選中的顏色以字符串(#FFFFFF)的形式返回。
如果給出了一個(gè)參數(shù)，值會(huì)選中當(dāng)前顏色并更新UI。算法可以是hex、rgb、rgba格式的字符串，也可以是kendo.Color object。

重要提示：這個(gè)方法不會(huì)觸發(fā)"change"事件

Returns

String 表示當(dāng)前顏色的字符串

示例

<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

獲取或設(shè)置選中的顏色，如果沒有參數(shù)，它會(huì)返回當(dāng)前選中的顏色作為kendo.Color object

Returns

kendo.Color 當(dāng)前顏色值

enable

啟用或禁用組件

示例 - 禁用調(diào)色板

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette();
var palette = $("#palette").data("kendoColorPalette");
palette.enable(false);
</script>

Events

change

當(dāng)顏色發(fā)生變化時(shí)會(huì)觸發(fā)這個(gè)事件

示例 - 在初始化階段觸發(fā)"change"

<div id="palette"></div>
<script>
$("#palette").kendoColorPalette({
change: function(e) {
console.log("The newly selected color is ", e.value);
}
});
</script>

示例 - 初始化之后觸發(fā) "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原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯(cuò)過哦>>