1
2
3
4using System;
5using System.Collections.Generic;
6using System.ComponentModel;
7using System.Text;
8using System.Web;
9using System.Web.UI;
10using System.Web.UI.WebControls;
11using System.Collections.Specialized;
12using System.Resources;
13
14namespace ColorPickerTest
15
{
16
17
18 [ToolboxData("<{0}:ColorPicker runat=server></{0}:ColorPicker>")]
19 public class ColorPicker : Control, IPostBackDataHandler
20
{
21
22
23 /// <summary>
24 /// 当前所选择的颜色的颜色值
25
/// </summary>
26 [Bindable(true)]
27 [Category("Appearance")]
28 [DefaultValue("")]
29 [Localizable(true)]
30 public string SelectedHexValue
31 {
32 get
33 {
34 if (ViewState["SelectedValue"] == null)
35 return "";
36 else
37 return (String)ViewState["SelectedValue"];
38 }
39 set { ViewState["SelectedValue"] = value; }
40 }
41 private int _width = 12;
42 /// <summary>
43 /// 颜色选择框的宽度
44 /// </summary>
45 [Bindable(true)]
46 [Category("Appearance")]
47 [DefaultValue("12")]
48 [Localizable(true)]
49 public int Width
50 {
51 set
52 {
53 if (_width == 0)
54 _width = 12;
55 else
56 _width = value;
57 }
58 get { return _width; }
59 }
60 private int _height=12;
61 /// <summary>
62 /// 颜色选择框的高度
63 /// </summary>
64 [Bindable(true)]
65 [Category("Appearance")]
66 [DefaultValue("12")]
67 [Localizable(true)]
68 public int Height
69 {
70 set
71 {
72 if (_height == 0)
73 _height = 12;
74 else
75 _height = value;
76 }
77 get { return _height; }
78 }
79 protected override void OnPreRender(EventArgs e)
80 {
81 base.OnPreRender(e);
82 string opendialogscript = "\n";
83 opendialogscript += "<script type=\"text/javascript\">\n";
84 opendialogscript += " var ActiveColorPicker;\n";
85 opendialogscript += " function OpenColorPicker(id)\n";
86 opendialogscript += " {\n";
87 opendialogscript += " ActiveColorPicker=id; \n";
88 opendialogscript += " var colorpickerdiv=document.getElementById('colorpicker');\n";
89 opendialogscript += " colorpickerdiv.style.visibility='visible';\n";
90 opendialogscript += " colorpickerdiv.style.left=ActiveColorPicker.style.left+ActiveColorPicker.style.width;\n";
91 opendialogscript += " colorpickerdiv.style.top=window.event.y;\n";
92 opendialogscript += " colorpickerdiv.style.left=window.event.x;\n";
93 opendialogscript += " }\n";
94 opendialogscript += " function ColorPickerOnColorClick(e)\n";
95 opendialogscript += " {\n";
96 opendialogscript += " var td = (e.target) ? e.target : e.srcElement; \n";
97 opendialogscript += " var color=td.style.backgroundColor; \n";
98 opendialogscript += " ActiveColorPicker.style.backgroundColor=color;\n";
99 opendialogscript += " ActiveColorPicker.style.color=color;\n";
100 opendialogscript += " ActiveColorPicker.value=color;\n";
101 opendialogscript += " var colorpickerdiv=document.getElementById('colorpicker');\n";
102 opendialogscript += " colorpickerdiv.style.visibility='hidden';\n";
103 opendialogscript += " }\n";
104 opendialogscript += "</script>\n";
105
106 if (!Page.ClientScript.IsClientScriptBlockRegistered("opendialogscript"))
107 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "opendialogscript", opendialogscript);
108
109 string colorpickerdiv = "";
110
111 colorpickerdiv += "<style>\n";
112 colorpickerdiv += " #colorpicker { visibility:hidden;border:1px solid #999;background-color:#eee;position:absolute; }\n";
113 colorpickerdiv += " #colorpicker td { border-right:1px solid #eee; border-bottom:1px solid #eee; 10px;height:10px;cursor:hand; }\n";
114 colorpickerdiv += " .colorpickerbutton{25px;border:1px solid #999;cursor:hand;}\n";
115 colorpickerdiv += "</style>\n";
116
117 colorpickerdiv += "<div id=\"colorpicker\">";
118 colorpickerdiv += " <table cellpadding=\"0\" cellspacing=\"0\" onclick=\"javascript:ColorPickerOnColorClick(event);\">";
119 string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333","000000","FFCC00","FF9900","FF6600","FF3300","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
120 "99CC00","FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC9900","FFCC33","FFCC66","FF9966","FF6633","CC3300","FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC0033",
121 "CCFF00","CCFF33","333300","666600","999900","CCCC00","FFFF00","CC9933","CC6633","330000","660000","990000","CC0000","FF0000","FF3366","FF0033",
122 "99FF00","CCFF66","99CC33","666633","999933","CCCC33","FFFF33","996600","996600","663333","993333","CC3333","FF3333","CC3366","FF6699","FF0066",
123 "66FF00","99FF66","66CC33","669900","999966","CCCC66","FFFF66","996633","663300","996666","CC6666","FF6666","990033","CC3399","FF66CC","FF0099",
124 "33FF00","66FF33","339900","66CC00","99FF33","CCCC99","FFFF99","CC9966","CC6600","CC9999","FF9999","FF3399","CC0066","990066","FF33CC","FF00CC",
125 "00CC00","33CC00","336600","669933","99CC66","CCFF99","FFFFCC","FFCC99","FF9933","FFCCCC","FF99CC","CC6699","993366","660033","CC0099","330033",
126 "33CC33","66CC66","00FF00","33FF33","66FF66","99FF99","CCFFCC","FFFFFF","FFFFFF","FFFFFF","CC99CC","996699","993399","990099","663366","660066",
127 "006600","336633","009900","339933","669966","99CC99","FFFFFF","FFFFFF","FFFFFF","FFCCFF","FF99FF","FF66FF","FF33FF","FF00FF","CC66CC","CC33CC",
128 "003300","00CC33","006633","339966","66CC99","99FFCC","CCFFFF","3399FF","99CCFF","CCCCFF","CC99FF","9966CC","663399","330066","9900CC","CC00CC",
129 "00FF33","33FF66","009933","00CC66","33FF99","99FFFF","99CCCC","0066CC","6699CC","9999FF","9999CC","9933FF","6600CC","660099","CC33FF","CC00FF",
130 "00FF66","66FF99","33CC66","009966","66FFFF","66CCCC","669999","003366","336699","6666FF","6666CC","666699","330099","9933CC","CC66FF","9900FF",
131 "00FF99","66FFCC","33CC99","33FFFF","33CCCC","339999","336666","006699","003399","3333FF","3333CC","333399","333366","6633CC","9966FF","6600FF",
132 "00FFCC","33FFCC","00FFFF","00CCCC","009999","006666","003333","3399CC","3366CC","0000FF","0000CC","000099","000066","000033","6633FF","3300FF",
133 "00CC99","FFFFFF","FFFFFF","FFFFFF","FFFFFF","0099CC","33CCFF","66CCFF","6699FF","3366FF","0033CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF","3300CC",
134 "FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","00CCFF","0099FF","0066FF","0033FF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF"};
135 int rowcounter = 0;
136 bool needrowstart = true;
137 for (int i = 0; i < websafecolorlist.Length; i ++)
138 {
139 if (needrowstart)
140 {
141 needrowstart = false;
142 colorpickerdiv += " <tr> ";
143 }
144 string color = "#" + websafecolorlist[i];
145 colorpickerdiv += " <td style=\"background-color:" + color + "\"></td>";
146 if (rowcounter++ == 16)
147 {
148 colorpickerdiv += " </tr>";
149 needrowstart = true;
150 rowcounter = 0;
151 }
152 }
153 colorpickerdiv += " </table>";
154 colorpickerdiv += "</div>";
155
156 if (!Page.ClientScript.IsClientScriptBlockRegistered("colorpickerdiv"))
157 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "colorpickerdiv", colorpickerdiv);
158
159 }
160
161 protected override void Render(HtmlTextWriter output)
162 {
163 string html = "";
164 string onclicker="onclick=\"javascript:OpenColorPicker(" + this.UniqueID + ");\"";
165 html += "<input style=\"background-color:" + SelectedHexValue + ";"+this._width+"px;height:"+this._height+"px;color:" + SelectedHexValue + ";\" class=\"colorpickerbutton\" " + onclicker + " readonly=\"true\" class=\"lookupmodalvalue\" type=\"text\" name=\"" + this.UniqueID + "\" value=\"" + SelectedHexValue + "\" title=\"选取颜色!\">";
166 output.Write(html);
167 }
168
169 public bool LoadPostData(String postDataKey, NameValueCollection values)
170 {
171 SelectedHexValue = values[this.UniqueID];
172 return false;
173 }
174
175 public void RaisePostDataChangedEvent()
176 {
177 }
178 }
179
}
180
效果如下：
下载源码