Question

有没有办法隐藏最新版本的ajax控件工具包中colorpickerextender所针对的文本框？

如果您将

style="display:none"

添加到文本框，则颜色选择器会显示在浏览器窗口的左上角。我希望它显示在扩展程序popupbuttonid中引用的按钮附近。

我想隐藏文本框，因为我不希望用户看到颜色代码。

Answer 1

虽然我没有隐藏它，但我确实找到了另一种方法来获得我想要的东西。当选择颜色时，我调用一个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中经过测试和使用。

Answer 2

之前的代码有点混乱。我改变了一下以使其更清晰。

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 来检索所选的颜色代码。

隐藏由ColorPickerExtender定位的文本框

2 个答案: