颜色选择器

代码如下：

/** 
* jQuery插件：颜色选取器
* 
*@author    doubleicon
*@url   http://blog.csdn.net/u011872945
*@name jquery.colorpicker.js
*@since 2014/6/13 16:09:00
*/

(function ($) {
    var ColorHex = new Array("00", "33", "66", "99", "CC", "FF");
    var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
    $.fn.colorpicker = function (opts) {
        var options = $.extend({}, $.fn.colorpicker.defaults, opts);
        initColor();
        return this.each(function () {//return 可以去掉
            var obj = $(this);
            obj.bind(options.event, function () {
                //设置颜色选择器显示的位置
                var top = $(this).offset().top;//控件距离左边以及顶部的距离
                var left = $(this).offset().left;
                var obj_height = $(this).height();//控件本身的宽与高
                var factor = 5;
                var bodywidth = $(document).width() - factor;
                var bodyheight = $(document).height() - factor;
                var cp_width = $("#_colorpanel").width();
                var cp_height = $("#_colorpanel").height();

                var v_top = 0;
                var v_left = 0;
                var width_mark = false;
                var height_mark = false;
                //计算控件显示的位置
                if (bodyheight - (top + obj_height + factor) > cp_height) {
                    height_mark = true;
                }
                if (bodywidth - left > cp_width) {
                    width_mark = true;
                }
                if (height_mark) {
                    v_top = top + obj_height + factor;
                   
                    if (width_mark) {
                        v_left = left + factor;
                    } else {
                        v_left = bodywidth - cp_width;
                    }
                } else {
                    v_top = bodyheight - cp_height;
                    if (width_mark) {
                        v_left = left + factor;
                    } else {
                        v_left = bodywidth - cp_width;
                    }
                   
                }

                $("#_colorpanel").css({
                    top: v_top,
                    left: v_left,
                    zIndex: 100
                }).show();

                var target = options.target ? $(options.target) : obj;
                if (target.data("color") == null) {
                    target.data("color", target.css("color"));
                }
                if (target.data("value") == null) {
                    target.data("value", target.val());
                }
                $("#_colorpicker_close").click(function () {
                    $("#_colorpanel").hide();
                    options.reset(obj);
                });

                $("#_color_content td").unbind("click").mouseover(function () {
                    var color = $(this).css("background-color");
                    $("#bg_color").css("background-color", color);
                    $("#text_color").val($(this).attr("rel"));
                }).click(function () {
                    var rgb_color = $(this).css("background-color");
                    var color = $(this).attr("rel");
                    //color = opts.ishex ? color : getRGBColor(color);或者使用下面的也可以
                    color = options.ishex ? color : rgb_color;
                    if (opts.fillcolor) {
                        target.val(color);
                    }
                    target.css("color", color);
                    $("#_colorpanel").hide();
                    options.success(obj, color);//回调函数
                });

            });
        });

        function initColor() {
            var colorpanel = $("<div id=\"_colorpanel\" style=\"position:absolute;display:none;left:0px;top:0px;\"></div>");
            var color_value = "";
            var color_cell = new Array();
            color_cell = color_cell.concat("<table id='_color_content' cellpadding='0px' cellspacing='0' style='border:1px solid black;border-collapse:collapse' border='1px'>");
            for (var i = 0; i < 2; i++) {
                for (var j = 0; j < ColorHex.length; j++) {
                    color_cell = color_cell.concat("<tr>");
                    color_cell = color_cell.concat('<td rel="#000000" style="background-color:#000000;width:10px;height:10px;box-sizing: content-box;">');
                    colorValue = i == 0 ? ColorHex[j] + ColorHex[j] + ColorHex[j] : SpColorHex[j];
                    color_cell = color_cell.concat('<td rel="#' + colorValue + '" style="background-color:#' + colorValue + ';width:10px;height:10px;box-sizing: content-box;">');
                    color_cell = color_cell.concat('<td rel="#000000" style="background-color:#000000;width:10px;height:10px;box-sizing: content-box;">');
                    for (var k = 0; k < 3; k++) {
                        for (var l = 0; l < ColorHex.length; l++) {
                            color_value = ColorHex[k + i * 3] + ColorHex[j] + ColorHex[l];
                            color_cell = color_cell.concat("<td rel='#" + color_value + "' style='background-color:#" + color_value + ";width:10px;height:10px;'></td>");
                        }
                    }
                    color_cell = color_cell.concat("</tr>");
                }
            }
            var headBuilder = new Array();
            headBuilder = headBuilder.concat("<table width='232px' height='30px' style='border:1px solid #000000;background-color:#cccccc;'><tr><td style='width:64px;'><span id='bg_color' style='width:60px;height:15px;background-color:#000;display:block;border:1px solid black'></span></td>");
            headBuilder = headBuilder.concat("<td style='width:85px'><input id='text_color' type='text' value='#000000' style='width:80px;height:15px;' /></td>");
            headBuilder = headBuilder.concat("<td><a href='javascript:void(0)' id='_colorpicker_close' style='display:block;float:right;margin-right:10px;text-decoration:none;color:black;font-size:14px;'>关闭</a></td></table>");
            var header = headBuilder.join("");
            color_cell = color_cell.concat("</table>");
            var content = color_cell.join("");

            $(colorpanel).append(header + content);
            $("body").append(colorpanel);

            //$("#_colorpicker_close").bind("click", function () {
            //    $("#colorpanel").hide();
            //});

        };

        function getRGBColor(color) {
            var result;
            if (color && color.constructor == Array && color.length == 3)
                color = color;
            if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                color = [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
            if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                color = [parseFloat(result[1]) * 2.55, parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55];
            if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                color = [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
            if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                color = [parseInt(result[1] + result[1], 16), parseInt(result[2] + result[2], 16), parseInt(result[3] + result[3], 16)];
            return "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
        }
    };
    $.fn.colorpicker.defaults = {
        ishex: true,//是否使用16进制颜色值
        fillcolor: false,//是否将颜色填充到对象中
        target: null,//目标对象
        event: 'click',//触发时间
        success: function () { },//颜色框显示的事件
        reset: function () { }
    };

})($);

调用方法如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="script/jquery-2.1.0.js"></script>
    <script src="script/jquery.colorpicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#t").colorpicker({
                fillcolor: true,
                success: function (obj, color) {
                    $(obj).css("background-color", color);
                }
            });
        });
    </script>
    
</head>
<body>
    <input type="text" style="position:absolute;left:300px;top:300px;" id="t" />
</body>
</html>

示例下载：http://download.csdn.net/detail/u011872945/7503967