ASP.NET 颜色选取器

分享于 

8分钟阅读

Web开发

  繁體

示例图像- colorpickernet.gif

介绍

在最近的项目中,我需要一个 ASP.NET 颜色选择器。 我创建了一个 ASP.NET 2.0 WebControl,它呈现一些 HTML,CSS和 JavaScript。 不需要包含外部文件或者库。

使用代码

解压zip文件并在 Visual Studio 2005中打开解决方案。 运行测试页( default.aspx )。

颜色选择器是一个 table,其中含有许多具有( 网络安全) background 颜色的单元格:

colorpickerdiv += "<div id="colorpicker">";
colorpickerdiv += " <table cellpadding="0" cellspacing="0"" + 
 "onclick="javascript:ColorPickerOnColorClick(event);">";
string[] websafecolorlist = {"FFFFFF","CCCCCC","999999","666666","333333", 
 "000000","FFCC00","FF9900","FF6600","FF3300","FFFFFF",
 "FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","99CC00",
 "FFFFFF","FFFFFF","FFFFFF","FFFFFF","CC9900","FFCC33",
 "FFCC66","FF9966","FF6633","CC3300","FFFFFF","FFFFFF",
 "FFFFFF","FFFFFF","CC0033","CCFF00","CCFF33","333300",
 "666600","999900","CCCC00","FFFF00","CC9933","CC6633",
 "330000","660000","990000","CC0000","FF0000","FF3366",
 "FF0033","99FF00","CCFF66","99CC33","666633","999933",
 "CCCC33","FFFF33","996600","996600","663333","993333",
 "CC3333","FF3333","CC3366","FF6699","FF0066","66FF00",
 "99FF66","66CC33","669900","999966","CCCC66","FFFF66",
 "996633","663300","996666","CC6666","FF6666","990033",
 "CC3399","FF66CC","FF0099","33FF00","66FF33","339900",
 "66CC00","99FF33","CCCC99","FFFF99","CC9966","CC6600",
 "CC9999","FF9999","FF3399","CC0066","990066","FF33CC",
 "FF00CC","00CC00","33CC00","336600","669933","99CC66",
 "CCFF99","FFFFCC","FFCC99","FF9933","FFCCCC","FF99CC",
 "CC6699","993366","660033","CC0099","330033","33CC33",
 "66CC66","00FF00","33FF33","66FF66","99FF99","CCFFCC",
 "FFFFFF","FFFFFF","FFFFFF","CC99CC","996699","993399",
 "990099","663366","660066","006600","336633","009900",
 "339933","669966","99CC99","FFFFFF","FFFFFF","FFFFFF",
 "FFCCFF","FF99FF","FF66FF","FF33FF","FF00FF","CC66CC",
 "CC33CC","003300","00CC33","006633","339966","66CC99",
 "99FFCC","CCFFFF","3399FF","99CCFF","CCCCFF","CC99FF",
 "9966CC","663399","330066","9900CC","CC00CC","00FF33",
 "33FF66","009933","00CC66","33FF99","99FFFF","99CCCC",
 "0066CC","6699CC","9999FF","9999CC","9933FF","6600CC",
 "660099","CC33FF","CC00FF","00FF66","66FF99","33CC66",
 "009966","66FFFF","66CCCC","669999","003366","336699",
 "6666FF","6666CC","666699","330099","9933CC","CC66FF",
 "9900FF","00FF99","66FFCC","33CC99","33FFFF","33CCCC",
 "339999","336666","006699","003399","3333FF","3333CC",
 "333399","333366","6633CC","9966FF","6600FF","00FFCC",
 "33FFCC","00FFFF","00CCCC","009999","006666","003333",
 "3399CC","3366CC","0000FF","0000CC","000099","000066",
 "000033","6633FF","3300FF","00CC99","FFFFFF","FFFFFF",
 "FFFFFF","FFFFFF","0099CC","33CCFF","66CCFF","6699FF",
 "3366FF","0033CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
 "3300CC","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF",
 "FFFFFF","00CCFF","0099FF","0066FF","0033FF","FFFFFF",
 "FFFFFF","FFFFFF","FFFFFF","FFFFFF"};int rowcounter = 0;bool needrowstart = true;for (int i = 0; i < websafecolorlist.Length; i ++)
{
 if (needrowstart)
 {
 needrowstart = false;
 colorpickerdiv += " <tr>";
 }
 string color = "#" + websafecolorlist[i];
 colorpickerdiv += " <td style="background-color:" + 
 color + ""></td>";
 if (rowcounter++ == 16)
 {
 colorpickerdiv += " </tr>";
 needrowstart = true;
 rowcounter = 0;
 }
}
colorpickerdiv += " </table>";
colorpickerdiv += "</div>";if (!Page.ClientScript.IsClientScriptBlockRegistered("colorpickerdiv"))
 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), 
 "colorpickerdiv", colorpickerdiv);

代码 上面 有点重,可以简化,但颜色的array 可以一起使用一个很好的图像。 table 被一个看不见的div 包围着。 当激发以下代码时,table 将可见:

opendialogscript += " var ActiveColorPicker;n";
opendialogscript += " function OpenColorPicker(id)n";
opendialogscript += " {n";
opendialogscript += " ActiveColorPicker=id; n";
opendialogscript += " var colorpickerdiv=document." + 
 "getElementById('colorpicker');n";
opendialogscript += " colorpickerdiv.style.visibility='visible';n";
opendialogscript += " colorpickerdiv.style.left=ActiveColorPicker" + 
 ".style.left+ActiveColorPicker.style.width;n";
opendialogscript += " colorpickerdiv.style.top=window.event.y;n";
opendialogscript += " colorpickerdiv.style.left=window.event.x;n";
opendialogscript += " }n";

当单击颜色时,使不可见:

opendialogscript += " function ColorPickerOnColorClick(e)n";
opendialogscript += " {n";
opendialogscript += " var td = (e.target)? e.target : e.srcElement; n";
opendialogscript += " var color=td.style.backgroundColor; n";
opendialogscript += " ActiveColorPicker.style.backgroundColor=color;n";
opendialogscript += " ActiveColorPicker.style.color=color;n";
opendialogscript += " ActiveColorPicker.value=color;n";
opendialogscript += " var colorpickerdiv=document.getElementById('colorpicker');n";
opendialogscript += " colorpickerdiv.style.visibility='hidden';n";
opendialogscript += " }n";

下面的代码用于渲染可以单击的rectangle。 控件的ID呈现为 this.UniqueID 要存储颜色值,我使用文本框中的value 属性。

protectedoverridevoid Render(HtmlTextWriter output)
{
 string html = "";
 string onclicker="onclick="javascript:OpenColorPicker(" + 
 this.UniqueID + ");"";
 html += "<input style="background-color:" + 
 SelectedHexValue + ";color:" + SelectedHexValue + 
 ";" class="colorpickerbutton"" + 
 onclicker + " readonly="true" class="lookupmo" + 
 "dalvalue" type="text" name="" + 
 this.UniqueID + "" value="" + 
 SelectedHexValue + "">";
 output.Write(html);
}

LoadPostData 中完成 postback 后检索值:

publicbool LoadPostData(String postDataKey, NameValueCollection values)
{
 SelectedHexValue = values[this.UniqueID];
 returnfalse;
}

颜色代码可以通过 SelectedHexValue 属性获取或者设置。 如果需要 Color 对象或者 RGB int 添加转换十六进制代码的属性。

Label1.Text = ColorPicker1.SelectedHexValue;

Points of Interest

关于web控件:LoadPostData 是一个棘手的事件。 为了防火,你必须与控件的UniqueID 完全一样的NAME 控件之一 !

如果你对该代码有任何意见,请随时向我发送电子邮件: colorpicker@toverstudio。nl。

历史记录

  • 2006-07-11: 发布 1.0.

COL  asp  asp-net  color  pick  挖掘  
相关文章