Скрыть текстовое поле, на которое нацелен ColorPickerExtender

Есть ли способ скрыть текстовое поле, на которое нацеливается colorpickerextender в новейшей версии инструментария управления ajax?

Если вы добавите

 стиль ="дисплей: нет"
в текстовое поле, то палитра цветов отображается в верхнем левом углу окна браузера. Я хочу, чтобы он появился рядом с кнопкой, на которую ссылается popupbuttonid экстендеров.

Я хочу скрыть текстовое поле, потому что я не хочу, чтобы пользователь видел цветовой код.

Источник

2 ответа

Решение

Хотя я не скрывал этого, я нашел другой способ получить то, что хотел. Когда цвет выбран, я вызываю функцию 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.

Источник

Предыдущий код немного беспорядок. Я немного его изменил, чтобы было понятнее.

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, чтобы получить выбранный код цвета.

Источник
Другие вопросы по тегам