一个简单的颜色选择器控件

好久没有更新博客，因为...应该是...懒...这次算是记录下自己的学习成果。

 

最近的工作重点是做前端的UI开发，花了几天做了个还算过的去的小控件。

 

主要是测试下js压缩加密混淆的效果，结果压缩加密没问题，混淆后某些事件就响应不了了，不知道是自己代码写的有问题还是压缩工具的问题。。。

 

不支持IE6,7,8  仅测试了chrome与FireFox，同志们拿去随便玩玩就好了，源码暂时不提供，见谅，理解万岁。

 

 

 

ColorPicker

 

目前提供三种选择方式

 

 

 

 

 

 

使用手册

 

初始化模式

 

$(selector).colorpicker({
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~属性~~~~~~~*/
    discs : ['disc'],               // 必填项 色板填入控件提供的色板名称(详情见前面)，声明顺序会影响显示顺序
    alphaBlend : false,             // 选填项 Alpha通道，提供透明度设置
    showPos : 9,                    // 选填项 显示位置（详情见后面），默认位置为9
    cpId : null,                    // 选填项 当前控件的Class
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~事件~~~~~~~*/
    /**
     * 选中颜色时触发
     *
     * rgb
     *      色彩rgb值（格式举例：255,0,255）
     * hex
     *      色彩hex值（格式举例：AA80CC）
     * rgba
     *      色彩rgba值（格式举例：255,0,255,0.5）
     * hexa
     *      色彩hexa值（格式举例：AA80CCFF）
     * this
     *     colorpicker选区
     */
    onSubmit : function(rgb, hex, rgba, hexa) {
        // 一般操作如下
        // 1.为某控件填充颜色 2.隐藏colorpicker
    },
    /**
     * 改变颜色时触发
     *
     * rgb
     *      色彩rgb值（格式举例：255,0,255）
     * hex
     *      色彩hex值（格式举例：AA80CC）
     * rgba
     *      色彩rgba值（格式举例：255,0,255,0.5）
     * hexa
     *      色彩hexa值（格式举例：AA80CCFF）
     * this
     *     opt配置项
     */
    onChange : function(rgb, hex, rgba, hexa) {
         // 一般操作如下
        // 1.为某控件填充颜色
    },
    /**
     * colorpicker显示时触发
     *
     * opt
     *      配置项
     * this
     *     当前选区
     */
    onShow : function(opt) {

    },
    /**
     * colorpicker隐藏时触发
     *
     * opt
     *      配置项
     * this
     *     当前选区
     */
    onHide : function(opt) {

    }
});

 

命令模式

 

// 显示colorpicker
$(selector).colorpicker("show");

// 隐藏colorpicker
$(selector).colorpicker("hide");

// 设置显示位置, num为数字1-12
$(selector).colorpicker("setShowPos", num);

// 获取当前颜色, mode有四种格式（字符串类型），分别是rgb，hex，rgba，hexa(后面两个只有在alphaBlend为true时才有返回值)
$(selector).colorpicker("getColor", mode);

// 设置当前颜色, mode有两种格式（字符串类型），分别是rgb，hex, value为对应的值的字符串
$(selector).colorpicker("setColor", mode, value);

// 设置alpha值，aval为0-1.0之间的数值，该方法只有在alphaBlend为true时起作用
$(selector).colorpicker("setAlphaValue", aval);

 

 

其他的没什么，具体的大家看附件中的demo吧