HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用

原创|行业资讯|编辑:郝浩|2013-10-21 13:36:58.000|阅读 1109 次

概述:颜色拾取器ColorPicker是Kendo UI Web中的用于颜色选择的下拉组件,这个设计采用了一个友好的操作界面来替换一个HTML5 <input type="color">域,这个域在对于大多数的浏览器并不是都支持。如何用这个颜色拾取器呢,在下面的文章中将会具体的用示例进行说明。

相关链接:

    颜色拾取器ColorPicker是Kendo UI Web中的用于颜色选择的下拉组件,这个设计采用了一个友好的操作界面来替换一个HTML5 <input type="color">域,这个域在对于大多数的浏览器并不是都支持。  如何用这个颜色拾取器呢,在下面的文章中将会具体的用示例进行说明:

启用颜色拾取器

<input type="color" id="myColorField" />
可以调用kendoColorPicker来对它进行初始化:
$(document).ready(function(){
    $("#myColorField").kendoColorPicker();
});

    原来的&lt;input>元素将会被保存在DOM中,它的值也将会根据用户选择的颜色进行更新,因此定期的&lt;form>-s会工作。

配置颜色拾取器

当你调用了kendoColorPicker时,你可以用配置选项传递一个参数。默认的下拉是一个HSV颜色选择器,界面效果如下:

HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用  (图1)

获得一个简单的颜色拾取器

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

    通过上面的代码,将会得到如下图的一个包含20中个颜色的拾取器:

HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用  (图2)

获得“web-safe”颜色板

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

    通过上面的代码将会得到如下图所示的一个有着216中颜色的“web-safe”面板。
HTML5 Web app开发工具Kendo UI Web教程:颜色拾取器的使用  (图3)

对简单的拾取器自定义颜色

    你也可以让这个简单的拾取器来显示一个自定义多颜色的列表,只是需要将它们放入palette参数中就可以了,如下:

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

    通过上面的代码,将只是会显示白色、黑色、红色。要加入其它的颜色,可以用短整型(3位数)或是长整形(6位数)表示法输入你想要加入的颜色,并用逗号隔开就可以了,不过这个#符号可能会缺失。

>>>Kendo UI Web下载



标签:KendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat