Kendo UI之ColorPicker颜色选择器

本文主要是介绍Kendo UI之ColorPicker颜色选择器_转载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

前言
ColorPicker颜色选择器
ColorPicker配置项
- - 🐁按钮 buttons
  - 🐂列数 columns
  - 🐅颜色格子大小 tileSize
  - 🐇按钮文本 message
  - 🐉颜色 palette
  - 🐍透明度 opacity
  - 🐎预览 preview
  - 🐐图标 toolIcon
  - 🐒默认值 value
方法Methods
事件Events

前言

本文转载自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>

运行效果大概是这样：
color_picker_system
我们尝试使用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>

运行结果如下图所示：
color_picker

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>

运行效果如下图所示：
columns_picker

🐅颜色格子大小 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>

运行效果如下图所示：
titleSize

🐇按钮文本 message

<<返回目录🏡
定义按钮文本内容，默认是Apply Cancel。代码片断如下：

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

运行效果如下图所示：
apply_cancel

🐉颜色 palette

<<返回目录🏡
默认是HSV色彩，也可自定义几种颜色组成的数组，还可定义为以下内容：

“basic”：显示20种基本颜色；
“websafe”：显示网页安全色。

代码片断如下所示：

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

运行效果如下图所示：
websafe

🐍透明度 opacity

<<返回目录🏡
透明度只应用于HSV色彩选择，会自动生成一个透明度滑动器。html5中的type=color是不支持透明度的。opacity的默认值是false。代码片断如下：

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

运行效果如下图所示：
opacity

🐎预览 preview

<<返回目录🏡
预览只应用于HSV色彩选择，在面板最上面会显示一个色块及颜色代码，默认为true。代码片断如下：

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

运行效果如下图所示：
preview

🐐图标 toolIcon

<<返回目录🏡
如果指定将在颜色选择器按钮里分配一个css样式，生成一个小图标。代码片断如下：

<input id="colorpicker" type="color" />
<script>$("#colorpicker").kendoColorPicker({toolIcon: "k-foreColor"});  
</script>

运行效果如下图所示：
icon

🐒默认值 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>