Скрыть текстовое поле, на которое нацелен ColorPickerExtender - PullRequest
Новая
       7

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

1 голос
/ 28 мая 2009

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 28 мая 2009

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

0 голосов
/ 14 июня 2009

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

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

...