颜色选择控件

 

   <script language="javascript"> 
    document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB\" width=\"0px\" height=\"0px\"></OBJECT>"); 
    var ocolorPopup = window.createPopup(); 
    var ecolorPopup=null; 
   
    function colordialogmouseout(obj)
    { 
        obj.style.borderColor=""; 
        obj.bgColor=""; 
    } 

    function colordialogmouseover(obj)
    { 
        obj.style.borderColor="#0A66EE"; 
        obj.bgColor="#EEEEEE"; 
    } 
    

     //其他颜色
    function colordialogmore()
    { 
        var sColor=dlgHelper.ChooseColorDlg(ecolorPopup.value); 
        sColor = sColor.toString(16); 
        if (sColor.length < 6) 
        { 
            var sTempString = "000000".substring(0,6-sColor.length); 
            sColor = sTempString.concat(sColor); 
        } 
        ecolorPopup.value="#"+sColor.toUpperCase(); 
        document.body.bgColor="#"+sColor.toUpperCase(); 
        ocolorPopup.document.body.blur(); 
    }


     //鼠标选中后关闭函数
    function colordialogmousedown(color)
    { 
        document.getElementById("hddColor").value=color;//吧颜色值给隐藏控件
        ecolorPopup.value=color;//16进制颜色值
        ecolorPopup.style.backgroundColor=color;
        //document.body.bgColor=color; //设置页面背景色
        ocolorPopup.document.body.blur(); //鼠标选中后关闭颜色选择
    } 
    
    //鼠标进入函数
    function colordialog()
    { 
        var e=event.srcElement; 
        e.onkeyup=colordialog; 
        ecolorPopup=e; 
        var ocbody; 
        var oPopBody = ocolorPopup.document.body; 
        var colorlist=new Array(40); 
        oPopBody.style.backgroundColor = "#f9f8f7"; 
        oPopBody.style.border = "solid #999999 1px"; 
        oPopBody.style.fontSize = "12px"; 

        colorlist[0]="#000000"; colorlist[1]="#993300"; colorlist[2]="#333300"; colorlist[3]="#003300"; 
        colorlist[4]="#003366"; colorlist[5]="#000080"; colorlist[6]="#333399"; colorlist[7]="#333333"; 

        colorlist[8]="#800000"; colorlist[9]="#FF6600"; colorlist[10]="#808000";colorlist[11]="#008000"; 
        colorlist[12]="#008080";colorlist[13]="#0000FF";colorlist[14]="#666699";colorlist[15]="#808080"; 

        colorlist[16]="#FF0000";colorlist[17]="#FF9900";colorlist[18]="#99CC00";colorlist[19]="#339966"; 
        colorlist[20]="#33CCCC";colorlist[21]="#3366FF";colorlist[22]="#800080";colorlist[23]="#999999"; 

        colorlist[24]="#FF00FF";colorlist[25]="#FFCC00";colorlist[26]="#FFFF00";colorlist[27]="#00FF00"; 
        colorlist[28]="#00FFFF";colorlist[29]="#00CCFF";colorlist[30]="#993366";colorlist[31]="#CCCCCC"; 

        colorlist[32]="#FF99CC";colorlist[33]="#FFCC99";colorlist[34]="#FFFF99";colorlist[35]="#CCFFCC"; 
        colorlist[36]="#CCFFFF";colorlist[37]="#99CCFF";colorlist[38]="#CC99FF";colorlist[39]="#FFFFFF"; 

        ocbody = ""; 
        ocbody += "<table CELLPADDING=0 CELLSPACING=3>"; 
        ocbody += "<tr height=\"20\" width=\"20\"><td align=\"center\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+document.getElementById("hddColor").value+"\"><tr><td></td></tr></table></td><td bgcolor=\"eeeeee\" colspan=\"7\" style=\"font-size:12px;\" align=\"center\">当前颜色</td></tr>"; 
        for(var i=0;i<colorlist.length;i++)
        { 
            if(i%8==0) 
                ocbody += "<tr>"; 
            ocbody += "<td width=\"14\" height=\"16\" style=\"border:1px solid;\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" onMouseDown=\"parent.colordialogmousedown('"+colorlist[i]+"')\" align=\"center\" valign=\"middle\"><table style=\"border:1px solid #808080;\" width=\"12\" height=\"12\" bgcolor=\""+colorlist[i]+"\"><tr><td></td></tr></table></td>"; 
            if(i%8==7) 
            ocbody += "</tr>"; 
        } 
        //ocbody += "<tr><td align=\"center\" height=\"22\" colspan=\"8\" onMouseOut=\"parent.colordialogmouseout(this);\" onMouseOver=\"parent.colordialogmouseover(this);\" style=\"border:1px solid;font-size:12px;cursor:default;\" onMouseDown=\"parent.colordialogmore()\">其它颜色</td></tr>"; //其他颜色选择
        ocbody += "</table>"; 

        oPopBody.innerHTML=ocbody; 
        ocolorPopup.show(e.offsetLeft, e.offsetTop+e.offsetHeight, 158, 147, document.body); 
    } 
    </script>
        <select id="table_danyuan" onfocus="colordialog()">
        <option></option>
        </select>   
        <input id="hddColor" type="hidden"  value="#FFFFFF"/>