Kendo UI之ColorPicker颜色选择器_转载

最新推荐文章于 2024-05-22 15:49:49 发布

小匠石钧知

最新推荐文章于 2024-05-22 15:49:49 发布

阅读量577

点赞数 1

分类专栏： KendoUI学习文章标签：前端

原文链接：http://www.scscms.com/html/article/20131027-colorpicker.html

版权

KendoUI学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
ColorPicker颜色选择器
ColorPicker配置项
方法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>

小匠石钧知

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Kendo UI之ColorPicker颜色选择器_转载

文章目录前言ColorPicker颜色选择器ColorPicker配置项????按钮 buttons????列数 columns????颜色格子大小 tileSize????按钮文本 message????颜色 palette????透明度 opacity????预览 preview????图标 toolIcon????默认值 value方法Methods事件Events前言本文转载自http://www.scscms.com/html/ar...
复制链接

扫一扫