/** * jQuery颜色面板插件 *  * 使用方法：input框的id默认为inputObj,button框的id默认为btnObj，也可以自定义aaa,bbb *          1、初始化颜色面板:$.color.initColor(); *          2、绑定颜色面板：$.color.showColor();或者$.color.showColor({inputObj:‘aaa‘,btnObj:‘bbb‘}) * @author Ivan 2862099249@qq.com * @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="http://www.mamicode.com/#000000"><a href=http://www.mamicode.com/### 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);