Miscellaneous in JQuery ColorPicker widget

getValue

The getValue() method in ColorPicker returns the hexadecimal value.

In the HTML page, add a <input> element to render ColorPicker widget

  • html
  • <input type="text" id="colorPicker" />
  • javascript
  • var ColorObj;
        jQuery(function ($) {
            ColorObj = $("#colorPicker").ejColorPicker({ value: "#278787" }).data('ejColorPicker');
            ColorObj.getValue();
        });

    setValue

    The setValue() method in ColorPicker is used to set the color value. The given value is in hexadecimal form.

    In the HTML page, add a <input> element to render ColorPicker widget

  • html
  • <input type="text" id="colorPicker" />
  • javascript
  • var ColorObj;
        jQuery(function ($) {
            ColorObj = $("#colorPicker").ejColorPicker().data('ejColorPicker');
            ColorObj.setValue("#278787");
        });

    getColor

    The getColor() method in ColorPicker control returns the color value in r,g,b,a form.

    In the HTML page, add a <input> element to render ColorPicker widget

  • html
  • <input type="text" id="colorPicker" />
  • javascript
  • var ColorObj;
        jQuery(function ($) {
            ColorObj = $("#colorPicker").ejColorPicker({ value: "#278787" }).data('ejColorPicker');
            ColorObj.getColor();
        });

    Enable/Disable Colorpicker widget

    Colorpicker widget provides you an option to enable /disable the widget. You can disable the TimePicker by setting the “enabled” property value as false.

    The following steps explain you to enable/disable property in Colorpicker widget.

    In the HTML page, add a <input> element to configure Button widget.

  • html
  • <input type="text" id="colorPicker"/>
  • javascript
  • // To enable/disable Button controls use the following code example.
        //disable Button:
        $(function () {
           $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.disable(); // disables the colorPicker
        });
    
        //enable Button:
        $(function () {
          $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.enable(); // enables the colorPicker
        });

    showTooltip

    The showTooltip property of the colorpicker control allows to shows tooltip to notify the slider value in color picker control

  • html
  • <input type="text" id="colorPicker"/>
  • javascript
  • $(function () {
           $('#colorPicker').ejColorPicker({ value: "#278787", showTooltip: true});
        });

    showSwitcher

    The showSwitcher property of the colorpicker control allows show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in colorpicker.its default value is true

  • html
  • <input type="text" id="colorPicker"/>
  • javascript
  • $(function () {
           $('#colorPicker').ejColorPicker({ value: "#278787", showSwitcher: false}); // hide the switcher button in colorpicker control.
        });

    showApplyCancel

    The showApplyCancel property of the colorpicker control allows to show/hides the apply and cancel buttons in ColorPicker control.its default value is true.

  • html
  • <input type="text" id="colorPicker"/>
  • javascript
  • $(function () {
           $('#colorPicker').ejColorPicker({ value: "#278787", showApplyCancel: false});
        });

    showClearButton

    The showClearButton property of the colorpicker control allows to show/hides the clear button in ColorPicker control.its default value is true.

  • html
  • <input type="text" id="colorPicker"/>
  • javascript
  • $(function () {
           $('#colorPicker').ejColorPicker({ value: "#278787", showClearButton: false});
        });