本節為大家介紹一下Kendo UI的調色板組件(kendo.ui.ColorPalette)。ColorPalette是用于顏色拾取器中的組件，也可以單獨應用于網頁當中。

Configuration

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

用于指定調色板的顏色，既可以是以逗號分隔的十六進制字符串，也可以是 kendo.Color object 的數組，或者是 parseColor 能夠識別的字符串。簡而言之，你可以傳遞"basic"獲取簡單的默認調色板，也可以傳遞 "websafe"獲取適用于網頁的調色板。

示例-使用 "websafe"調色板

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

表示列的數量，使用"websafe"調色板時，會自動默認為18列。

示例-顏色列表以兩行三列進行顯示

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

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

重要提示：這個方法不會觸發"change"事件

Returns

String 表示當前顏色的字符串

示例

<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

獲取或設置選中的顏色，如果沒有參數，它會返回當前選中的顏色作為kendo.Color object

Returns

kendo.Color 當前顏色值

enable

啟用或禁用組件

示例 - 禁用調色板

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

Events

change

當顏色發生變化時會觸發這個事件

示例 - 在初始化階段觸發"change"

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

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