当前位置: 代码迷 >> Web前端 >> 一个简略的颜色选择器控件
  详细解决方案

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

热度:139   发布时间:2012-08-22 09:50:35.0
一个简单的颜色选择器控件

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

?

最近的工作重点是做前端的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吧

  相关解决方案