本帖最后由 qiaoshun 于 2009-07-09 16:59:20 编辑

解决方案 »

  1.   

    FontDialog , ColorDialog不能满足你的要求么?
      

  2.   

    <TITLE>仿WINDOW的纯JS超酷颜色选择器 </TITLE>
    <STYLE TYPE="text/css">
     td {font-size: 9pt}
     body {font-size: 10.8pt}
     BUTTON {width:5em;font-size:12px;}
     a{color:blue;}
    </STYLE><SCRIPT LANGUAGE=JavaScript>function getMyColor(t) {
      var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
      var color = showModalDialog("/script/select_color.html"+old_color+"", "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
      if (color != null) {
      t.value = color;
      t.style.color = color;
      }  else {
      t.focus();
      }
      return true;
    }
    var SelRGB = '';
    var DrRGB = '';
    var SelGRAY = '120';
    var hexch = new Array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F');function initColor() {
    if ( location.search != '' && location.search != '?' ) {
    var old_color = location.search.substr(1);
    if ( /^[0-9A-Fa-f]{6}$/.test(old_color) ) {
    SelRGB = '#'+old_color;
    RGB.innerText = SelRGB;
    EndColor();
    } else {
    SelColor.value = old_color;
    ShowColor.bgColor = SelColor.value;
    }
    }
    }
    function ToHex(n)
    { var h, l; n = Math.round(n);
    l = n % 16;
    h = Math.floor((n / 16)) % 16;
    return (hexch[h] + hexch[l]);
    }function DoColor(c, l)
    { var r, g, b;  r = '0x' + c.substring(1, 3);
      g = '0x' + c.substring(3, 5);
      b = '0x' + c.substring(5, 7);
      
      if(l > 120)
      {
        l = l - 120;    r = (r * (120 - l) + 255 * l) / 120;
        g = (g * (120 - l) + 255 * l) / 120;
        b = (b * (120 - l) + 255 * l) / 120;
      }else
      {
        r = (r * l) / 120;
        g = (g * l) / 120;
        b = (b * l) / 120;
      }  return '#' + ToHex(r) + ToHex(g) + ToHex(b);
    }function EndColor()
    { var i;  if(DrRGB != SelRGB)
      {
        DrRGB = SelRGB;
        for(i = 0; i <= 30; i ++)
          GrayTable.rows(i).bgColor = DoColor(SelRGB, 240 - i * 8);
      } if ( RGB.innerText == '') {
    initColor();
    } else {
      SelColor.value = DoColor(RGB.innerText, GRAY.innerText);
      ShowColor.bgColor = SelColor.value;
    }
    }
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onclick>
      SelRGB = event.srcElement.bgColor;
      EndColor();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=ondblclick>
      // 不用再按确定了
      // 2006-7-26 added by http://www.hbcms.com
      window.returnValue = SelColor.value;
      window.close();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseover>
      RGB.innerText = event.srcElement.bgColor;
      EndColor();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=ColorTable EVENT=onmouseout>
      RGB.innerText = SelRGB;
      EndColor();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onclick>
      SelGRAY = event.srcElement.title;
      EndColor();
      // 不用再按确定了
      // 2006-7-26 added by http://www.hbcms.com
      window.returnValue = SelColor.value;
      window.close();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseover>
      GRAY.innerText = event.srcElement.title;
      EndColor();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=GrayTable EVENT=onmouseout>
      GRAY.innerText = SelGRAY;
      EndColor();
    </SCRIPT><SCRIPT LANGUAGE=JavaScript FOR=Ok EVENT=onclick>
      window.returnValue = SelColor.value;
      window.close();
    </SCRIPT></HEAD><BODY bgcolor=menu style ='overflow:hidden;'>
    <span id=hbcms_select_color>
    <div align="center"><center><table border="0" cellspacing="10" cellpadding="0"><tr><td>
    <TABLE ID=ColorTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
    <SCRIPT LANGUAGE=JavaScript>
    function wc(r, g, b, n)
    {
    r = ((r * 16 + r) * 3 * (15 - n) + 0x80 * n) / 15;
    g = ((g * 16 + g) * 3 * (15 - n) + 0x80 * n) / 15;
    b = ((b * 16 + b) * 3 * (15 - n) + 0x80 * n) / 15; document.write('<TD BGCOLOR=#' + ToHex(r) + ToHex(g) + ToHex(b) + ' height=8 width=8></TD>');
    }var cnum = new Array(1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0);  for(i = 0; i < 16; i ++)
      {
         document.write('<TR>');
         for(j = 0; j < 30; j ++)
         {
          n1 = j % 5;
          n2 = Math.floor(j / 5) * 3;
          n3 = n2 + 3;      wc((cnum[n3] * n1 + cnum[n2] * (5 - n1)),
          (cnum[n3 + 1] * n1 + cnum[n2 + 1] * (5 - n1)),
          (cnum[n3 + 2] * n1 + cnum[n2 + 2] * (5 - n1)), i);
         }     document.writeln('</TR>');
      }
    </SCRIPT>
    </TABLE></td><td>
    <TABLE ID=GrayTable BORDER=0 CELLSPACING=0 CELLPADDING=0 style='cursor:hand'>
    <SCRIPT LANGUAGE=JavaScript>
      for(i = 255; i >= 0; i -= 8.5)
         document.write('<TR BGCOLOR=#' + ToHex(i) + ToHex(i) + ToHex(i) + '><TD TITLE=' + Math.floor(i * 16 / 17) + ' height=4 width=20></TD></TR>');
    </SCRIPT>
    </TABLE></td></tr></table></center></div><div align="center"><center><table border="0" cellspacing="10" cellpadding="0">
    <tr><td rowspan="2" align="center">
    选中色彩
    <table ID=ShowColor border="1" width="50" height="30" cellspacing="0" cellpadding="0">
    <tr><td></td></tr></table>
    <!-- // 2006-7-26 added by http://www.hbcms.com -->
    <BUTTON ONCLICK="initColor();" style="height:20px;width:50px;font-size:9pt;" onfocus="blur();">恢复</BUTTON>
    </td>
    <td rowspan="2">
    <!-- // 2006-7-26 added by http://www.hbcms.com -->
    <font style="cursor:hand;" onclick='alert("选色使用技巧:\n\n1.双击颜色 或 单击颜色,微调亮度,点确定\n\n2.色彩亮度微调:在右边竖立的颜色条中进行\n");' title="点击查看详细帮助">帮助: 选色技巧</font>
    <BR>
    基色: <SPAN ID=RGB></SPAN><BR>
    亮度: <SPAN ID=GRAY>120</SPAN><BR>
    代码: <INPUT TYPE=TEXT SIZE=7 ID=SelColor style="height:20px;font-size:9pt;"></td>
    <td><BUTTON ID=Ok TYPE=SUBMIT>确定</BUTTON></td></tr><tr><td><BUTTON ONCLICK="window.close();">取消</BUTTON></td></tr>
    </table></center></div>
    </span>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    // 初始化传递过来的颜色
    // 2006-7-26 added by http://www.hbcms.com/
    initColor();
    //-->
    </SCRIPT>
    <span id=select_color_desc>
    <TABLE align=center>
    <TR>
    <TD>
    <FONT SIZE="3"><B>仿WINDOW的纯JS超酷颜色选择器HBcms改良版本</B></FONT>
    <br>超酷效果:同window、office、各种网页编辑器的颜色选择器类似
    <br>精巧实用:整个程序只有一个文件,9K,很方便整合到表单中
    <br>改良内容:
    <BLOCKQUOTE>
    1、增加传递颜色的功能。可以很方便的获取原来的颜色。
    <br>2、增加了双击颜色返回颜色代码并关闭窗口
    <br>3、色彩亮度颜色单击,返回颜色代码并关闭窗口
    <br>4、增加了使用帮助
    <br>5、增加了原颜色恢复按钮
    <br>6、增加了网页使用说明及getMyColor函数</BLOCKQUOTE>最新改良版本可以在这里下载:<A HREF="http://www.hbcms.com/">http://www.hbcms.com/</A>
    <br>为让他人使用本程序避免产生疑惑,使用时请包含本说明文字,谢谢
    <P>
    </TD>
    </TR>
    </TABLE></span><SCRIPT LANGUAGE="JavaScript">
    <!--if ( location.href.indexOf('?') == -1 && location.href.indexOf('#')==-1) {
    function getMyColorTest(t) {
    if ( location.href.indexOf('http') == 0 ) {
    var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value;
    } else {
    var old_color = ( t.value.indexOf('#') == 0 ) ? '%3F'+t.value.substr(1) : '%3F' + t.value;
    }   select_color_url = location.href+old_color;
      //alert(select_color_url);
      var color = showModalDialog(select_color_url, "", "dialogWidth:18.5em; dialogHeight:17.5em; status:0");
      if (color != null) {
      t.value = color;
      t.style.color = color;
      }  else {
      t.focus();
      }
      return true;
    } document.getElementById("hbcms_select_color").innerHTML = '';
    document.write('<table align=center><tr><td><form><P><H4>效果演示:</H4><P>请选择颜色:<input size="10" onclick="getMyColorTest(this)" name="my_color" type="text" value="red" onmouseover="this.style.color=this.value;" /> <P>本程序完全免费:使用方法请看本网页源代码<P> 下载本程序方法:在IE菜单中,点 文件 按钮,点保存即可。或直接用键盘 Ctrl+s 保存<P> <A HREF="http://www.hbcms.com/">进入官方网站</A></form></td></tr></table>');
    } else {
    document.getElementById("select_color_desc").innerHTML = '';
    }
    //-->
    </SCRIPT>
    </BODY>   
    </HTML>这个支持FF IE
      

  3.   

    <HTML>
    <HEAD>
    <TITLE> Office 风格颜色选择器</TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <script language=javascript>
    <!--// 夜狼制作 OFFICE风格的色彩选择器//注意:只有把<script></script>标签放在<body>标签内才可以正常使用“其它颜色”功能document.write("<OBJECT id=\"dlgHelper\" CLASSID=\"clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b\" 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 colordialogmousedown(color){
        ecolorPopup.value=color;
        //document.body.bgColor=color;
        ocolorPopup.document.body.blur();
    }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 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=\""+e.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>
    选择颜色:<input name="sel1" type="text" onfocus="colordialog()"></BODY>
    </HTML>这个与你第一个图片类似,试试看
      

  4.   

    晕呼呼,我要winfrom的,这点忘记告诉你们了,不好意思,网上有实现的,但是缺少代码,没有达到我的要求!
      

  5.   

    大家帮帮忙啊,下面是有人实现的,我照他们写的调试,错误一车一车啊!
    http://blog.csdn.net/csharp_start/archive/2008/07/24/2706930.aspx
    http://blog.csdn.net/ymqpxy/archive/2007/11/29/1907933.aspx