由ColorPickerExtender定位的隱藏文本框

有沒有辦法在最新發布的ajax控件工具包中隱藏colorpickerextender所針對的文本框？由ColorPickerExtender定位的隱藏文本框

如果您將

style="display:none"

添加到文本框中，則顏色選擇器顯示在瀏覽器窗口的左上角。我希望它顯示在擴展器popupbuttonid中引用的按鈕附近。

我想隱藏文本框，因爲我不想讓用戶看到顏色代碼。

來源

2009-05-28 Ronnie Overby

雖然我沒有隱藏它，但我確實找到了另一種獲得我想要的方式。當選擇顏色時，我調用一個javascript函數，它從文本框中獲取顏色代碼並將其存儲在隱藏字段中，然後清除文本框的文本，然後最終將文本框的背景顏色設置爲所選顏色。

下面是ASPX代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="color.aspx.cs" Inherits="color" %> 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<!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></title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    function ColorSelectionChanged() { 
     var txtColorPickerSelector = '#' + txtColorPickerID; 
     var ColorCodeSelector = '#' + ColorCodeID; 
     var colorCode = '#' + $(txtColorPickerSelector).val(); 
     $(txtColorPickerSelector).val('').css('background-color', colorCode); 
     $(ColorCodeSelector).val(colorCode); 
    }   
</script> 

</head> 
<body> 
<form id="form1" runat="server"> 

<asp:HiddenField ID="ColorCode" runat="server" /> 

<asp:ScriptManager ID="ScriptManager1" runat="server" /> 

<asp:TextBox ID="txtColorPicker" runat="server" Width="2em"></asp:TextBox> 

<cc1:ColorPickerExtender ID="txtColor_ColorPickerExtender" runat="server" 
    TargetControlID="txtColorPicker" 
    OnClientColorSelectionChanged="ColorSelectionChanged" /> 

&nbsp;<asp:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" Text="Submit" /> 

<asp:Label ID="lblColorCode" runat="server"></asp:Label> 
</form> 
</body> 
</html> 

<script type="text/javascript"> 
    var txtColorPickerID = '<%=txtColorPicker.ClientID %>'; 
    var ColorCodeID = '<%=ColorCode.ClientID %>';  
</script>

而後面的代碼：

using System; 
using System.Drawing; 

public partial class color : System.Web.UI.Page 
{ 
    protected void btnSubmit_Click(object sender, EventArgs e) 
    { 
     lblColorCode.Text = ColorCode.Value; 
     txtColorPicker.BackColor = ColorTranslator.FromHtml(ColorCode.Value); 
    } 
}

我的代碼分配給標籤，以證明被提交的顏色代碼。抱歉aspx格式。測試並在Chrome，IE 6，IE 7，Firefox 3，Opera 9和Safari 4中工作。

來源

2009-05-28 17:43:53

此解決方案確實有效，但我面臨一個問題。在最初階段，它顯示了十六進制代碼。請幫我解決這個問題。 – 2010-07-29 12:34:16

以前的代碼有點亂。我改變了一點，使其更清晰。

function ColorSelectionChanged() { 
    $get('<%=ColorCode.ClientID %>').value = '#' + $get('<%=txtColorPicker.ClientID %>').value 
    $get('<%=txtColorPicker.ClientID %>').value='' 
    $get('<%=txtMessage.ClientID %>').style.color = $get('<%=ColorCode.ClientID %>').value 
}

和HTML部分

<asp:ImageButton ID="ImageColor" runat="server" ImageUrl="~/_Images/cp_button.png" /> 
         <asp:TextBox ID="txtColorPicker" runat="server" width="0" style="border:0;" /> 
         <asp:HiddenField ID="ColorCode" runat="server" /> 
         <ajaxToolkit:ColorPickerExtender 
          ID="ColorPickerExtender1" 
          PopupButtonID="ImageColor" 
          TargetControlID="txtColorPicker" 
          PopupPosition="Right" 
          OnClientColorSelectionChanged="ColorSelectionChanged" 
          runat="server" 
          />

其中txtMessage是他們會寫（想象一個聊天文本框）的texbox。如果你不需要它

窗體後面的碼只使用ColorCode.value以檢索選定的顏色代碼，你可以發表評論說行。

來源

2009-06-14 01:33:36

在你的代碼中，JavaScript函數ColorSelectionChanged駐留在哪裏？如果我曾嘗試在aspx頁面的head標記內部執行<％= ServerControl.ClientID％>，那麼我會在添加控件或其他東西時遇到一些錯誤。 – 2009-06-15 13:01:23

由ColorPickerExtender定位的隱藏文本框

回答

相關問題