Masquer la zone de texte ciblée par ColorPickerExtender

Existe-t-il un moyen de masquer la zone de texte ciblée par colorpickerextender dans la dernière version de la boîte à outils de contrôle ajax?Masquer la zone de texte ciblée par ColorPickerExtender

Si vous ajoutez

style="display:none"

à la zone de texte, le sélecteur de couleur s'affiche dans le coin supérieur gauche de la fenêtre du navigateur. Je veux qu'il apparaisse près du bouton qui est référencé dans les popups popupbuttonid.

Je veux cacher la zone de texte parce que je ne veux pas que l'utilisateur voie le code de couleur.

Source

2009-05-28 Ronnie Overby

Bien que je ne l'ai pas caché, j'ai trouvé un autre moyen d'obtenir ce que je voulais. Lorsque la couleur est sélectionnée, j'appelle une fonction javascript qui récupère le code couleur de la zone de texte et le stocke dans un champ masqué, puis efface le texte de la zone de texte, puis définit la couleur d'arrière-plan de la zone de texte.

Voici le code 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>

Et le code derrière:

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

Je viens attribuer le code à l'étiquette pour prouver que le code couleur est soumis. Désolé pour le formatage aspx. Testé et fonctionnant dans Chrome, IE 6, IE 7, Firefox 3, Opera 9 et Safari 4.

Source

2009-05-28 17:43:53

Cette solution fonctionne, mais je fais face à un problème. Dans la phase initiale, il montre le code Hexa. Aidez-moi s'il vous plaît à résoudre ceci. –

Le code précédent est un peu en désordre. Je l'ai changé un peu pour le rendre plus clair.

function ColorSelectionChanged() { 
    $get('<%=ColorCode.ClientID %>').value = '#' + $get('<%=txtColorPicker.ClientID %>').value 
    $get('<%=txtColorPicker.ClientID %>').value='' 
    $get('<%=txtMessage.ClientID %>').style.color = $get('<%=ColorCode.ClientID %>').value 
}

et la partie 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" 
          />

où txtMessage est le TexBox qu'ils vont écrire sur (imaginez une zone de texte de chat). Vous pouvez commenter cette ligne si vous ne besoin

forme le code derrière il suffit d'utiliser ColorCode.value retrive le code de couleur sélectionnée.

Source

2009-06-14 01:33:36

Où réside la fonction javascript ColorSelectionChanged dans votre code? Si jamais j'essaie de faire un <% = ServerControl.ClientID%> à l'intérieur de la balise principale d'une page ASPX, j'obtiens une erreur à propos de l'ajout de contrôles ou de quelque chose. –

Masquer la zone de texte ciblée par ColorPickerExtender

Répondre

Questions connexes