利用ASP.NET AJAX的SliderExtender來做一個Color Picker的小工具

2008-09-28

14603
0
ASP.NET

小弟最近幫網友解了一個Color轉換的問題,才有此idea的...
此範例的主要功能是利用SliderExtender來選取R,G,B三顏色..
利用Panel直接呈現顏色,並且顯示顏色的色碼...

小弟最近幫網友解了一個Color轉換的問題,才有此idea的...

此範例的主要功能是利用SliderExtender來選取R,G,B三顏色..

利用Panel直接呈現顏色,並且顯示顏色的色碼...

asp.net ajax(c#)

ColorPicker.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ColorPicker.aspx.cs" Inherits="ColorPicker" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ColorPicker</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <table border="0" cellpadding="5" cellspacing="0"> <tr> <td> <ajaxToolkit:SliderExtender ID="SliderExtender1" BoundControlID="slider1_display" Decimals="0" Minimum="0" Maximum="255" runat="server" TargetControlID="slider1" EnableHandleAnimation="true" TooltipText="{0}"> </ajaxToolkit:SliderExtender> <asp:TextBox ID="slider1" runat="server"></asp:TextBox> <asp:Label ID="slider1_display" runat="server"></asp:Label> <br /> <br /> <ajaxToolkit:SliderExtender ID="SliderExtender2" runat="server" BoundControlID="slider2_display" Decimals="0" Maximum="255" Minimum="0" TargetControlID="slider2" EnableHandleAnimation="true" TooltipText="{0}"> </ajaxToolkit:SliderExtender> <asp:TextBox ID="slider2" runat="server"></asp:TextBox> <asp:Label ID="slider2_display" runat="server"></asp:Label> <br /> <br /> <ajaxToolkit:SliderExtender ID="SliderExtender3" runat="server" BoundControlID="slider3_display" Decimals="0" Maximum="255" Minimum="0" TargetControlID="slider3" EnableHandleAnimation="true" TooltipText="{0}"> </ajaxToolkit:SliderExtender> <asp:TextBox ID="slider3" runat="server"></asp:TextBox> <asp:Label ID="slider3_display" runat="server"></asp:Label> <br /> <br /> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="50px" Style="border: solid 1px #c0c0c0; background: #000000"> </asp:Panel> <asp:TextBox ID="txtHexCode" runat="server" Style="text-transform: uppercase"></asp:TextBox> </td> </tr> </table> </div> </form> </body> </html> <script type="text/javascript"> //setColor function setColor() { var r = $get('slider1').value; var g = $get('slider2').value; var b = $get('slider3').value; $get('txtHexCode').value = "#" + d2h(r) + d2h(g) + d2h(b); $get('Panel1').style.background = $get('txtHexCode').value; } //dec2hex var hD = '0123456789ABCDEF'; function d2h(d) { var h = hD.substr(d & 15, 1); while (d > 15) { d >>= 4; h = hD.substr(d & 15, 1) + h; } return padLeft(h, '0', 2); } //padLeft function padLeft(str, pad, count) { while (str.length < count) str = pad + str; return str; } </script>

ColorPicker.aspx.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Drawing; public partial class ColorPicker : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { slider1.Attributes.Add("onchange", "setColor();"); slider2.Attributes.Add("onchange", "setColor();"); slider3.Attributes.Add("onchange", "setColor();"); } } }

執行結果:

參考網址:

http://programming.top54u.com/post/ASP-Net-AJAX-Tab-Control-Extender.aspx
http://www.cnblogs.com/kaixin110/archive/2007/09/17/895447.html
http://bytes.com/forum/thread447636.html

回首頁