有没有办法在最新版本的 ajax 控件工具包中隐藏 colorpickerextender 所针对的文本框?
如果你添加
样式=“显示:无”到文本框,然后颜色选择器显示在浏览器窗口的左上角。我希望它显示在扩展程序 popupbuttonid 中引用的按钮附近。
我想隐藏文本框,因为我不希望用户看到颜色代码。
有没有办法在最新版本的 ajax 控件工具包中隐藏 colorpickerextender 所针对的文本框?
如果你添加
样式=“显示:无”到文本框,然后颜色选择器显示在浏览器窗口的左上角。我希望它显示在扩展程序 popupbuttonid 中引用的按钮附近。
我想隐藏文本框,因为我不希望用户看到颜色代码。
虽然我没有隐藏它,但我确实找到了另一种方法来获得我想要的东西。选择颜色后,我调用一个 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" />
<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 中测试和工作。
前面的代码有点乱。我把它改了一点,让它更清楚。
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 是他们要写的文本框(想象一个聊天文本框)。如果不需要,可以评论该行
形成后面的代码,只需使用ColorCode.value来检索所选的颜色代码。