顏色拾取器ColorPicker是Kendo UI Web中的用于顏色選擇的下拉組件，這個設計采用了一個友好的操作界面來替換一個HTML5 <input type="color">域，這個域在對于大多數的瀏覽器并不是都支持。  如何用這個顏色拾取器呢，在下面的文章中將會具體的用示例進行說明：

啟用顏色拾取器

<input type="color" id="myColorField" />
可以調用kendoColorPicker來對它進行初始化：
$(document).ready(function(){
    $("#myColorField").kendoColorPicker();
});

    原來的<input>元素將會被保存在DOM中，它的值也將會根據用戶選擇的顏色進行更新，因此定期的<form>-s會工作。

配置顏色拾取器

當你調用了kendoColorPicker時，你可以用配置選項傳遞一個參數。默認的下拉是一個HSV顏色選擇器，界面效果如下：

  （圖1）

獲得一個簡單的顏色拾取器

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({ palette: "basic" });
});

    通過上面的代碼，將會得到如下圖的一個包含20中個顏色的拾取器：

  （圖2）

獲得“web-safe”顏色板

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({ palette: "websafe" });
});

    通過上面的代碼將會得到如下圖所示的一個有著216中顏色的“web-safe”面板。
  （圖3）

對簡單的拾取器自定義顏色

    你也可以讓這個簡單的拾取器來顯示一個自定義多顏色的列表，只是需要將它們放入palette參數中就可以了，如下：

$(document).ready(function(){
    $("#myColorField").kendoColorPicker({
        palette: "#fff,#000,#f00"
    });
});

    通過上面的代碼，將只是會顯示白色、黑色、紅色。要加入其它的顏色，可以用短整型（3位數）或是長整形（6位數）表示法輸入你想要加入的顏色，并用逗號隔開就可以了，不過這個＃符號可能會缺失。

>>>Kendo UI Web下載