HTML 代码：【复制】 
标题颜色：<input type="text" id="TitleColor" name="TitleColor" size="7" value="" readonly onclick="showColorPicker(this,'colorBox',event)" />

javascript 代码：【复制】 
//取标签的绝对位置
function offset(e) {
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight - 2;
    while (e = e.offsetParent) {
        t += e.offsetTop;
        l += e.offsetLeft;
    }

    return {
        top: t,
        left: l,
        width: w,
        height: h
    }
}

var arrayColor = new Array('#000000', '#330000', '#660000', '#990000', '#CC0000', '#FF0000', '#003300', '#333300', '#993300', '#CC3300', '#FF3300', '#006600', '#336600', '#996600', '#CC6600', '#FF6600', '#009900', '#339900', '#999900', '#CC9900', '#FF9900', '#00CC00', '#33CC00', '#99CC00', '#CCCC00', '#FFCC00', '#00FF00', '#33FF00', '#99FF00', '#CCFF00', '#FFFF00', '#0000FF', '#3300FF', '#9900FF', '#CC00FF', '#FF00FF', '#0033FF', '#3333FF', '#9933FF', '#CC33FF', '#FF33FF', '#0066FF', '#3366FF', '#9966FF', '#CC66FF', '#FF66FF', '#0099FF', '#3399FF', '#9999FF', '#CC99FF', '#FF99FF', '#00CCFF', '#33CCFF', '#99CCFF', '#CCCCFF', '#FFCCFF', '#00FFFF', '#33FFFF', '#99FFFF', '#CCFFFF');

function showColorPicker(targ, pickerName, event) {
    var targ = targ;
    var d = offset($(targ));
    document.body.onclick = function(event) {
        var e = event || window.event;
        if ((e.clientX >= d.left && e.clientX <= (d.left + d.width)) && (e.clientY >= d.top && e.clientY <= (d.top + d.height))) {
            //showPicker();
            var oDiv = document.createElement('div');
            var strColor = '<table width="100%" cellpadding="0" cellspacing="1" align="center" border="0" bgcolor="#ffffff">';
            strColor += '<tr bgcolor="#ffffff">';
            for (var i = 1; i < (arrayColor.length); i++) {
                strColor += '<td onclick="setColor(\'' + arrayColor[i] + '\');" width="20" height="20" bgcolor="' + arrayColor[i] + '"> </td>';
                if (i % 8 == 0) {
                    strColor += '</tr>';
                    strColor += '<tr bgcolor="#ffffff">';
                }
            }

            strColor += '	</tr>';
            strColor += '</table>';
            oDiv.id = pickerName;
            oDiv.name = pickerName;
            oDiv.style.position = 'absolute';
            oDiv.style.zIndex = 1;
            oDiv.style.left = (d.left + d.width) + 'px';
            oDiv.style.top = d.top + 'px';
            oDiv.style.width = '212px';
            oDiv.style.height = '170px';
            oDiv.style.background = '#ffffff';
            oDiv.style.border = '1px solid #004099';
            oDiv.style.padding = '1px';
            oDiv.innerHTML = strColor;
            document.body.appendChild(oDiv);
        }

        else {
            if ($(pickerName)) {
                document.body.removeChild($(pickerName));
            }
        }
    }

    this.setColor = function(sColor) {
        $(targ).value = sColor;
    }
}