jQuery颜色面板插件

/**
 * jQuery颜色面板插件
 *
 * 使用方法：input框的id默认为inputObj,button框的id默认为btnObj，也可以自定义aaa,bbb
 *          1、初始化颜色面板:$.color.initColor();
 *          2、绑定颜色面板：$.color.showColor();或者$.color.showColor({inputObj:‘aaa‘,btnObj:‘bbb‘})
 * @author Ivan [email protected]
 * @date 2014年12月13日 下午3:06:55
 * @version V1.0
 * @param $
 */
(function($) {

    $.color = {};

    var colorHex = [ ‘00‘, ‘33‘, ‘66‘, ‘99‘, ‘CC‘, ‘FF‘ ];
    var spColorHex = [ ‘FF0000‘, ‘00FF00‘, ‘0000FF‘, ‘FFFF00‘, ‘00FFFF‘,‘FF00FF‘ ];

    var colorPanel = ‘<div id="colorPanel" style="position: absolute; display: none;"></div>‘;

    function initColor() {
        $("body").append(colorPanel);
        var colorTable = ‘‘;
        for (var i = 0; i < 2; i++) {
            for (var j = 0; j < 6; j++) {
                colorTable += ‘<tr height=12>‘;
                colorTable += ‘<td width=11 style="background-color:#000000">‘;

                if (i == 0) {
                    colorTable += ‘<td width=11 style="background-color:#‘+ colorHex[j] + colorHex[j] + colorHex[j] + ‘">‘;
                } else {
                    colorTable += ‘<td width=11 style="background-color:#‘+ spColorHex[j] + ‘">‘;
                }

                colorTable += ‘<td width=11 style="background-color:#000000">‘;
                for (var k = 0; k < 3; k++) {
                    for (var l = 0; l < 6; l++) {
                        colorTable += ‘<td width=11 style="background-color:#‘+ colorHex[k + i * 3] + colorHex[l]+ colorHex[j] + ‘">‘;
                    }
                }
            }
        }

        colorTable = ‘<table width=232 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">‘
                + ‘<tr height=30><td colspan=21 bgcolor=#ffffff>‘
                + ‘<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">‘
                + ‘<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>‘
                + ‘<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"><a href=### id="_cclose">关闭</a></td></tr></table></td></table>‘
                + ‘<table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000"  style="cursor:pointer;">‘
                + colorTable + ‘</table>‘;
        $("#colorPanel").html(colorTable);
    }

    // 插件的defaults
    $.color.defaults = {
        inputObj : ‘inputObj‘,
        btnObj : ‘btnObj‘
    };

    // 十六进制颜色值的正则表达式
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    /* RGB颜色转换为16进制 */
    String.prototype.colorHex = function() {
        var that = this;
        if (/^(rgb|RGB)/.test(that)) {
            var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
            var strHex = "#";
            for (var i = 0; i < aColor.length; i++) {
                var hex = Number(aColor[i]).toString(16);
                if (hex === "0") {
                    hex += hex;
                }
                strHex += hex;
            }
            if (strHex.length !== 7) {
                strHex = that;
            }
            return strHex;
        } else if (reg.test(that)) {
            var aNum = that.replace(/#/, "").split("");
            if (aNum.length === 6) {
                return that;
            } else if (aNum.length === 3) {
                var numHex = "#";
                for (var i = 0; i < aNum.length; i += 1) {
                    numHex += (aNum[i] + aNum[i]);
                }
                return numHex;
            }
        } else {
            return that;
        }
    };

    /* 16进制颜色转为RGB格式 */
    String.prototype.colorRgb = function() {
        var sColor = this.toLowerCase();
        if (sColor && reg.test(sColor)) {
            if (sColor.length === 4) {
                var sColorNew = "#";
                for (var i = 1; i < 4; i += 1) {
                    sColorNew += sColor.slice(i, i + 1).concat(
                            sColor.slice(i, i + 1));
                }
                sColor = sColorNew;
            }
            // 处理六位的颜色值
            var sColorChange = [];
            for (var i = 1; i < 7; i += 2) {
                sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
            }
            return "RGB(" + sColorChange.join(",") + ")";
        } else {
            return sColor;
        }
    };

    $.color.showColor = function(options){

        var opts = $.extend({}, $.color.defaults, options);
        $(‘#‘ + opts.btnObj).click(function() {
            // 定位
            var ttop = $(this).offset().top; // 控件的定位点高
            var thei = $(this).height(); // 控件本身的高
            var tleft = $(this).offset().left; // 控件的定位点宽

            $("#colorPanel").css({
                top : ttop + thei + 5,
                left : tleft
            });

            $("#colorPanel").show();

            $("#CT tr td").unbind("click").mouseover(function() {
                var rgbColor = $(this).css("background-color");
                var hexColor = rgbColor.colorHex();

                $("#DisColor").css("background-color", hexColor);
                $("#HexColor").val(hexColor);
            }).click(function() {
                var rgbColor = $(this).css("background-color");
                var hexColor = rgbColor.colorHex();

                $(‘#‘ + opts.inputObj).val(hexColor).css("color", hexColor);
                $("#colorPanel").hide();
            });

            $("#_cclose").click(function() {
                $("#colorPanel").hide();
            }).css({
                "font-size" : "12px",
                "padding-left" : "20px"
            });
        });
    };

    $.color.initColor = function(){
        initColor();
        $("#colorPanel").hide();
    };

})(jQuery);