Home / AJAX

HOW TO Use the ColorPicker Control

RSS
Modified on 2010/01/16 20:42 by Mike Pope Categorized as Uncategorized

ColorPicker Demonstration



ColorPicker Description

The ColorPicker extender enables you to display a pop-up color picker when the focus is moved to an input element. You can attach the ColorPicker extender to any ASP.NET TextBox control. It provides client-side color-picking functionality with UI in a popup control. Optionally, you can specify a button to display the color-picker popup and a control that previews a color from the color palette. You can also provide a TextBox control where users can enter a color value; the ColorPicker extender can display a custom color even if the color is not in the default color-picker palette.

Video - How do I: Use the Color Picker?

ColorPicker Client Code Sample

<!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>Untitled Page</title> <style type="text/css"> </style> <link href="http://ajax.microsoft.com/ajax/beta/0911/extended/colorpicker/colorpicker.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.colorPicker, function() { $("#color").colorPicker({}); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="text" id="color" /> </div> </form> </body> </html>

ColorPicker Client Reference

Sys.Extended.UI.ColorPickerBehavior Class

Events

  • colorSelectionChanged(handler) - Adds or removes an event handler for the colorSelectionChanged event.
    • Parameters - A function that represents the event handler.
  • showing(handler) - Adds or removes an event handler for the showing event.
    • Parameters - A function that represents the event handler.
  • shown(handler) - Adds or removes an event handler for the shown event.
    • Parameters - A function that represents the event handler.
  • hiding(handler) - Adds or removes an event handler for the hiding event.
    • Parameters - A function that represents the event handler.
  • hidden(handler) - Adds or removes an event handler for the hidden event.
    • Parameters - A function that represents the event handler.

Methods

  • initialize() - Initializes the ColorPicker behavior.
  • dipose() - Disposes the ColorPicker behavior.
  • raiseColorSelectionChanged() - Raises the colorSelectionChanged event.
  • raiseShowing(eventArgs) - Raises the showing event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the showing event.
  • raiseShown(eventArgs) - Raises the shown event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the shown event.
  • raiseHiding(eventArgs) - Raises the hiding event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the hiding event.
  • raiseHidden(eventArgs) - Raises the hidden event.
    • Parameters - A Sys.EventArgs object that represents event arguments for the hidden event.
  • show() - Shows the color picker.
  • hide() - Hides the color picker.

Properties

  • button - Gets or sets a Sys.UI.DomElement object that represents the button to use to show the color picker. This property is optional.
  • sample - Gets or sets a Sys.UI.DomElement object that represents the element to use to preview the color that is currently selected or that the user is holding the mouse pointer over. This property is optional.
  • selectedColor - Gets or sets a string that contains the color value that is represented by the text box.
  • enabled - Gets or sets a Boolean value that specifies whether the ColorPicker behavior is available for the current element.
  • popupPosition - Gets or sets a Sys.Extended.UI.PositionMode object that represents where the popup should be positioned relative to the target control.
    • Remarks - The positions can be BottomLeft, BottomRight, TopLeft, or TopRight. The default is BottomLeft.

ColorPicker Server Code Sample

        <b>Default color picker: </b>
        <br />
        <asp:TextBox runat="server" ID="Color1" MaxLength="6" AutoCompleteType="None" /><br />
        <ajaxToolkit:ColorPickerExtender ID="defaultCPE" runat="server" 
                     OnClientColorSelectionChanged="colorChanged" TargetControlID="Color1" />
        <div style="font-size: 90%">
            <em>(Set the focus to the textbox to show the color picker popup; the popup dismisses automatically
                when you choose a color)</em></div>
        </div>
        <script type="text/javascript">
            function colorChanged(sender) {
                sender.get_element().style.color = "#" + sender.get_selectedColor();
            }
        </script>
        <br />
        <div>
        <b>ColorPicker with an associated button and a sample control:</b><br />
        <asp:TextBox runat="server" ID="Color2" AutoCompleteType="None" MaxLength="6" style="float:left" />
        <asp:ImageButton runat="Server" ID="Image1" style="float:left;margin:0 3px" ImageUrl="~/images/cp_button.png" 
                         AlternateText="Click to show color picker" />
        <asp:Panel ID="Sample1" style="width:18px;height:18px;border:1px solid #000;margin:0 3px;float:left" runat="server" />
        <ajaxToolkit:ColorPickerExtender ID="buttonCPE" runat="server"
            TargetControlID="Color2" PopupButtonID="Image1" SampleControlID="Sample1" SelectedColor="33ffcc" />
        <br style="clear:both" />
        <div style="font-size: 90%">
            <em>(Click the image button to show the color picker; enter a valid color value in to the TextBox to 
            have a sample control show the color)</em></div>
        </div>

ColorPicker Server Reference

The properties in italics are optional.



<ajaxToolkit:ColorPickerExtender runat="server" ID="ColorPickerExtender1" TargetControlID="Color1" OnClientColorSelectionChanged="colorChanged" /> The following JavaScript function is called in response to the OnClientColorSelectionChanged event:

function colorChanged(sender) { sender.get_element().style.color = "#" + sender.get_selectedColor(); }

<ajaxToolkit:ColorPickerExtender runat="server" TargetControlID="Color2" PopupButtonID="Image1" SampleControlID="Sample1" SelectedColor="33ffcc" />

  • TargetControlID - The ID of the TextBox control to extend.
  • PopupButtonID - The ID of a control to use to display the color-picker popup. If this value is not set, the color picker will pop up when the TextBox control that is represented by TargetControlID receives focus.
  • SampleControlID - The ID of a control to use to display the selected color. If this value is set and the color picker popup is open, the background color of the specified control displays the color that the mouse pointer is over. If this value is not set, the selected color is not displayed.
  • PopupPosition - Indicates where the color picker popup should appear relative to the TextBox control that is being extended. Values can be BottomLeft, BottomRight, TopLeft, TopRight, Left, or Right. The default is BottomLeft.
  • SelectedColor - The color value that the ColorPicker extender is initialized with.
  • OnClientColorSelectionChanged - A JavaScript function that will be called when the colorSelectionChanged event is raised.

ColorPicker Additional Code Samples

  Name Size
- ColorPicker.png 30.84 KB