kendoUI系列教程之colorpicker

搜索

您当前位置：首页 > 文章中心 > HTML5+CSS3 > kendo UI

【kendo UI】

下载

新闻

文章

kendoUI系列教程,kendoUI中文教程,kendoUI中文API说明文档之colorpicker颜色选择器。

html5中已经有type=color属性，是调用系统的调色板，但仍有多种浏览嚣不支持。colorpicker颜色选择器当然就是为了方便选取颜色，可以自定义颜色范围，可绑定输入框也可绑定到div里。

本图是颜色选择器效果图，上面的是预览效果，最下面隐藏了“应用”与“取消”按钮。

Configuration配置项

1、按钮 buttons

类型：Boolean
默认：true

说明：颜色选择器最下面是否显示“应用”与“取消”按钮。只适用于HSV色系的调色板，其它自定义颜色的不会显示。

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

2、列数 columns

类型：Number

说明：为了排版美观，当颜色为自定义时定义一行多少个颜色排一排。

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
  columns: 3  //共6个颜色，一排3个，刚才是两排排完
});
</script>

3、颜色格子大小 tileSize

类型：Number|Object
默认：14

说明：在自定义颜色里，指定每个格子的大小。还可单独设置tileSize.height或tileSize.width

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  palette: "basic",
  tileSize: 32 //或者 tileSize: { width: 32,height: 32 }
});
</script>

4、按钮文本 message

类型：String
默认："Apply" / "Cancel"

说明：定义按钮文本内容。

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

5、颜色 palette

类型：String|Array
默认：null

说明：默认是HSV色彩，也可自定义几种颜色组成的数组，还可定义为以下内容：

"basic"：显示20种基本颜色
"websafe"：显示网页安全色

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

<input id="colorpicker" type="color" />
<script>
$("#colorpicker").kendoColorPicker({
  palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
  columns: 6
});
</script>

6、透明度 opacity

类型：Boolean
默认：false

说明：透明度只应用于HSV色彩选择，会自动生成一个透明度滑动器。html5中的type=color是不支持透明度的。

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

7、预览 preview

类型：Boolean
默认：true

说明：预览只应用于HSV色彩选择，在面板最上面会显示一个色块及颜色代码。

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

8、图标 toolIcon

类型：String
默认：null

说明：如果指定将在颜色选择器按钮里分配一个css样式，生成一个小图标。

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

9、默认值 value

类型：String|Color
默认：null

说明：指定颜色默认选中的颜色，注意如果是input输入框，将受输入框的value值控制。

<div id="colorpicker" value="#ffffff"></div>
<script>
$("#colorpicker").kendoColorPicker({
  value: "#b72bba" //最效果是选择#ffffff，而不是#b72bba
});
</script>

Motheds 方法

<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() {
    //关闭颜色控制面板时触发
  }
});

Keyboard Navigation 快捷键

简单型颜色选择器

序号	快捷键	作用
1	alt + s	获取焦点。需要设置html5的accesskey属性
2	enter,down	假如面板已经关闭，弹出颜色面板
3	left arrow	选择前一个颜色
4	right arrow	选择后一个颜色
5	up/down	选择同一列上或下一个颜色
6	enter	选择当前颜色
7	escape	取消当前颜色

HSV色系颜色选择器

序号	快捷键	作用
1	alt + h	获取焦点。需要设置html5的accesskey属性
2	enter,down	假如面板已经关闭，弹出颜色面板
8	arrows	更新颜色饱和值
3	ctrl + left/right	滑动色相选择滑动器
4	ctrl + up/down	滑动透明度选择滑动器
5	shift	保持微调
6	enter	选择当前颜色
7	escape	取消当前颜色