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

kendoUI系列教程之colorpicker

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-10-27   阅读次数: 106   查看权限: 游客查看

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色彩,也可自定义几种颜色组成的数组,还可定义为以下内容:
  1. "basic":显示20种基本颜色
  2. "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 取消当前颜色

在线测试:http://docs.kendoui.com/api/web/colorpicker

关键词: kendoui,html5,colorpicker   编辑时间: 2013-10-28 11:12:11

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    1

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程