隐藏文本框针对性的ColorPickerExtender针对性、文本框、ColorPickerExtender

2023-09-04 05:25:31 作者:爺们狠有范er

有没有办法来隐藏由colorpickerextender在最新版本的AJAX控件工具包的?

Is there a way to hide the textbox that is targeted by the colorpickerextender in the newest release of the ajax control toolkit?

如果您添加

style="display:none"

到文本框,然后在颜色选择器显示在浏览器窗口的左上角。我想让它显示了附近那就是在扩展popupbuttonid引用的按钮。

to the textbox, then the color picker shows up in the top left corner of the browser window. I want it to show up near the button that is referenced in the extenders popupbuttonid.

我想隐藏的文本框,因为我不希望用户看到的颜色code。

I want to hide the textbox because I don't want the user to see the color code.

推荐答案

虽然我没有隐藏它,我没有找到另一种方式来获得我想要的东西。 当选择的颜色我调用JavaScript函数,得到的颜色code从文本框,并将其存储在一个隐藏字段,然后清除文本框中的文本,然后最后设置文本框的颜色选择背景颜色

While I didn't hide it, I did find another way to get what I wanted. When the color is selected I call a javascript function that gets the color code from the textbox and stores it in a hidden field, then clears the textbox's text, then finally sets the background color of the textbox to the color that was selected.

下面是ASPX code:

Here is the aspx code:

<%@ 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>

和后面的code:

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);
    }
}

我刚刚分配code到标签,证明颜色code被提交。 很抱歉的ASPX格式。经过测试,在Chrome,IE 6,IE 7,火狐3,Opera 9中和Safari 4。工作

I just assign the code to the label to prove that color code is being submitted. Sorry for the aspx formatting. Tested and working in Chrome, IE 6, IE 7, Firefox 3, Opera 9, and Safari 4.