提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
原创|使用教程|编辑:龚雪|2014-06-04 10:55:48.000|阅读 1315 次
概述:本节为大家介绍的是kendo.ui.ColorPicker,一个下拉式的颜色拾取器组件。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
本节为大家介绍的是kendo.ui.ColorPicker,一个下拉式的颜色拾取器组件。这个组件可代替浏览器内置的颜色拾取器,用HTML5语言<input type="color">就可以嵌入。下面首先介绍一下它的Configuration:
buttons | Boolean(default: true)
设定组件是否显示 Apply / Cancel 按钮。当pallete没有设定时,只适用于HSV选择器。
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ buttons: false }) </script>
columns Number
当设定了调色板之后,列的序号会显示在颜色下拉框中。如果使用了自定义的调色板,你可以设置列序号为你的颜色赋予意义。
示例 - 两行三列的颜色列表
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ], columns: 3 }); </script>
tileSize | Number|Object(default: 14)
色块的尺寸
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ palette: "basic", tileSize: 32 }); </script>
tileSize.width | Number(default: 14)
色块的宽度
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ palette: "basic", tileSize: { width: 40 } }); </script>
tileSize.height | Number(default: 14)
色块的高度
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ palette: "basic", tileSize: { height: 40 } }); </script>
messages | Object
支持 "Apply" / "Cancel"标签的自定义
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ messages: { apply: "Update", cancel: "Discard" } }) </script>
palette String | Array(default: null)
当应用一个非空面板参数时,下拉框会是一个非常简单的颜色拾取器,支持下面两种值:
另外,如果用逗号分隔的十六进制表示颜色或者颜色数组,它会以调色板代替。如果传递一串数组,它可以包含parseColor or Color对象支持的字符串。
如果调色板丢失或为空,组件会显示HSV选择器。
示例 - 使用"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>
opacity | Boolean(default: false)
只针对HSV选择器,如果为true,组件将显示不透明滑块。注意当前用HTML5代码&lt;input type="color">不支持透明。
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ opacity: true }); </script>
preview | Boolean(default: true)
只适用于HSV选择器
显示颜色预览元素,并附有一个输入字段,让最终用户可以用CSS支持的符号粘贴颜色。
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ preview: false }); </script>
toolIcon | String(default: null)
颜色拾取器按钮内的CSS类名称显示图标,如果设定了之后,元素的HTML会显示成这样:
<span class="k-tool-icon ${toolIcon}"> <span class="k-selected-color"></span> </span>
示例
<input id="colorpicker" type="color" /> <script> $("#colorpicker").kendoColorPicker({ toolIcon: "k-foreColor" }); </script>
value String|Color(default: null)
表示最初选中的颜色。注意如果从一个<input>元素初始化组件时,初始颜色由字段决定。
示例
<div id="colorpicker"></div> <script> $("#colorpicker").kendoColorPicker({ value: "#b72bba" }); </script>
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
运用JavaScript和HTML5就能快速创建性能最优的Web应用程序
Kendo UI Mobile使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架
Kendo UI DataViz跨平台跨设备的数据可视化组件
Kendo UI Server Wrappers帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。
Kendo UI CoreKendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢