ColorPanel Constructor

Syntax

PP.Ui.ColorPanel (settings);

Parameters

settings. JSON object that contains values of component properties.

Description

The ColorPanel constructor creates an instance of the ColorPanel class.

Example

To execute the example, add links to the PP.js components library, the PP.css styles file and the resources.ru.js resources file. The BODY tag must contain a div element with the example identifier. The resources folder must contain resources folders. Create the ColorPanel component:

        PP.resourceManager.setRootResourcesFolder("../resources/"); //path to resources forlder
        PP.setCurrentCulture(PP.Cultures.ru); //selection of language settings
        var colPanel = new PP.Ui.ColorPanel({
            ParentNode: document.getElementById('example'),
            Color: new PP.Color("#FF0000"),
            Mode: 2,
            ColorChange: function (sender, args) { alert("Color is selected") },
            PresentedColors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#FFFFFF', '#000000'],
            SpectrumMode: 1,
            PaletteSelected: function (sender, args) { alert("Color is selected from the palette") }
        });
        // Add a handler of color palette value change
        colPanel.ValueChanged.add(function(sender, args) {
            console.log("Color panel value is changed");
        });   
        // Call the event of color palette value change after color change
        colPanel.ColorChange.add(function(sender, args) {
            colPanel.ValueChanged.fire(colPanel);
        });

After executing the example the ColorPanel component is placed in the page. The component looks as follows:

The panel is open in Spectrum mode (Mode: 2), the spectrum is shown in HSV mode (SpectrumMode: 1). Above the spectrum there is a list of predefined colors set in the ColorPanel.PresentedColors property. The black color is chosen (Color: new PP.Color("#FF0000")). On color change and on color selection from the palette corresponding messages are displayed and the message about the color panel value change is also displayed in the console:

Color panel value is changed

See also:

ColorPanel