文章目錄
前言
本文轉載自http://www.scscms.com/html/article/20131027-colorpicker.html
ColorPicker顏色選擇器
HTML5中已經有type="color"屬性，是調用系統的調色板，但仍有多種瀏覽囂不支持。colorpicker顏色選擇器當然就是爲了方便選取顏色，可以自定義顏色範圍，可綁定輸入框也可綁定到div裏。
我們嘗試一下調用系統調色板，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Color Picker</title>
</head>
<body>
<input id="colorpicker" type="color" />
</body>
</html>
運行效果大概是這樣：
我們嘗試使用Kendo UI的Color Picker，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Color Picker</title>
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.common.min.css" />
<link rel="stylesheet" type="text/css" href="./css/styles/kendo.default.min.css" />
<script src="./js/kendojs/jquery.min.js"></script>
<script src="./js/kendojs/kendo.web.min.js"></script>
</head>
<body>
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
buttons: true
})
</script>
</body>
</html>
運行結果如下圖所示：
ColorPicker配置項
ColorPicker的配置項有：
- 🐁按鈕 buttons
- 🐂列數 columns
- 🐅顏色格子大小 tileSize
- 🐇按鈕文本 message
- 🐉顏色 palette
- 🐍透明度 opacity
- 🐎預覽 preview
- 🐐圖標 toolIcon
- 🐒默認值 value
🐁按鈕 buttons
<<返回目錄🏡
顏色選擇器最下面是否顯示Apply與Cancel按鈕。只適用於HSV色系的調色板，其它自定義顏色的不會顯示。buttons默認是true，代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
buttons: false
})
</script>
🐂列數 columns
<<返回目錄🏡
爲了排版美觀，當顏色爲自定義時，定義一行多少個顏色排一排。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: ["#000", "#333", "#666", "#999", "#ccc", "#fff"],
columns: 3 //共6個顏色，一排3個，剛好是兩排排完
});
</script>
運行效果如下圖所示：
🐅顏色格子大小 tileSize
<<返回目錄🏡
在自定義顏色裏，指定每個格子的大小。還可單獨設置tileSize.height或tileSize.width。默認的格子大小是寬14，高14。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "basic",
tileSize: 32 //或者 tileSize: { width: 32,height: 32 }
});
</script>
運行效果如下圖所示：
🐇按鈕文本 message
<<返回目錄🏡
定義按鈕文本內容，默認是Apply Cancel。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
messages: {
apply: "確定",
cancel: "取消"
}
})
</script>
運行效果如下圖所示：
🐉顏色 palette
<<返回目錄🏡
默認是HSV色彩，也可自定義幾種顏色組成的數組，還可定義爲以下內容：
- “basic”：顯示20種基本顏色；
- “websafe”：顯示網頁安全色。
代碼片斷如下所示：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
palette: "websafe"
});
</script>
運行效果如下圖所示：
🐍透明度 opacity
<<返回目錄🏡
透明度只應用於HSV色彩選擇，會自動生成一個透明度滑動器。html5中的type=color是不支持透明度的。opacity的默認值是false。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
opacity: true
});
</script>
運行效果如下圖所示：
🐎預覽 preview
<<返回目錄🏡
預覽只應用於HSV色彩選擇，在面板最上面會顯示一個色塊及顏色代碼，默認爲true。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
preview: false
});
</script>
運行效果如下圖所示：
🐐圖標 toolIcon
<<返回目錄🏡
如果指定將在顏色選擇器按鈕裏分配一個css樣式，生成一個小圖標。代碼片斷如下：
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
toolIcon: "k-foreColor"
});
</script>
運行效果如下圖所示：
🐒默認值 value
<<返回目錄🏡
指定顏色默認選中的顏色，注意如果是input輸入框，將受輸入框的value值控制。代碼片斷如下：
<div id="colorpicker" value="#ffffff"></div>
<script>
$("#colorpicker").kendoColorPicker({
value: "#b72bba" //最效果是選擇#ffffff，而不是#b72bba
});
</script>
方法Methods
<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.open();//彈出面板
colorpicker.close();//關閉面板
colorpicker.toggle();//切換開關面板
var value = colorpicker.value();//獲取被選的顏色值
colorpicker.value("#ccc");//設置顏色值，類似的還有color
colorpicker.enable(false);//設置是否可用
</script>
事件Events
<div id="colorpicker"></div>
<script>
$("#colorpicker").kendoColorPicker({
select: function (e) {
var v = e.value; //選擇了值時觸發
},
change: function (e) {
var v = e.value; //改變值時觸發
},
open: function () {
//彈出顏色控制面板時觸發
},
close: function () {
//關閉顏色控制面板時觸發
}
});
</script>