Categories

.uiColorpicker()

Categories: UI

.uiColorpicker( [ options ] )

Subclass: ep

Inherit: (Subclass: ep) .Widget()

Plugin: ep.ui.colorpicker

Description: Add color picker handling for each element in the set of matched elements.

  • .uiColorpicker( [ options ] )

    version added: 6.12.0

    options   A map of additional options pass to the method.

The .uiColorpicker() method add color picker open on click for each element in the set of matched elements.

  • Apply color picker for a button.

    HTML:
    <button>select color</button>
    
    Code:
    ep('button')
        .uiColorpicker({
            autoOpen:       true,
            orientation:    'right',
            callback:       function( color ){
                $(this).css( 'background-color', color );
            }
        });
    
    
  • Apply extended color picker for a button.

    HTML:
    <button>select color</button>
    
    Code:
    ep('button')
        .uiColorpicker({
            autoOpen:       true,
            orientation:    'right',
            callback:       function( color ){
                $(this).css( 'background-color', color );
            },
            extended: {
                userColors: {
                    'Color1' : '#0A528F',
                    'Color2' : '#EB670B',
                    'Color3' : '#B0BD35',
                    'Color4' : '#7336F0',
                    'Color5' : '#59506F',
                    'Color6' : '#D3EC5A',
                    'Color7' : '#6BDC5C',
                    'Color8' : '#1D9675',
                    'Color9' : '#E087C2',
                    'Color10': '#47B03D',
                    'Color11': '#8D6319',
                    'Color12': '#BFD33C',
                    'Color13': '#85EC28',
                    'Color14': '#5AD9E0',
                    'Color15': '#B27E86',
                    'Color16': '#420B62',
                    'Color17': '#F7C93F',
                    'Color18': '#60FBFC',
                    'Color19': '#85BBC6'
                },
                userColorsSave: function( serializedColorsArray ){
                	// save action to store the colors
                },
                baseColors: {
                	'Base1': '#12ff98',
                	'Base2': '#ef9372',
                	'Base3': '#093fec',
                	'Base4': '#ac2983',
                	'Base5': '#a57c9d'
                }
            }
        });
    
    
  • autoApply

    version added: 6.12.0

    A boolean indication whether to apply the selected color instantly (apply button is hidden).

    Default: false

  • autoOpen

    version added: 6.12.0

    A boolean indication whether to open the color picker on startup.

    Default: false

  • callback( color )

    version added: 6.12.0

    A function to be called on apply the selected color. Receives the selected color as argument.

  • color

    version added: 6.12.0

    A named or hex formated startup color.

    Default: \'#fff\'

  • orientation

    version added: 6.12.0

    A vertical and/or horizontal position relative to the matched element: middle, bottom, right, center or left.

    Default: \'right\'

  • orientationAdjust

    version added: 6.12.0

    An array of numbers to adjust the positioning [0: adjust x, 1: adjust y].

    Default: [0, 0]

  • extended

    version added: 6.13.0

    Set this option to display the extended mode with predefined colors. See the example...

  • close

    version added: 6.12.0

    This event is triggered when the color picker close.

  • colorApply

    version added: 6.12.0

    This event is triggered when the selected color applies.

  • colorReset

    version added: 6.12.0

    This event is triggered when the selected color resets.

  • colorSelect

    version added: 6.12.0

    This event is triggered when a color selects.

  • open

    version added: 6.12.0

    This event is triggered when the color picker opens.

  • close

    • .uiColorpicker( 'close' )

      version added: 6.12.0

    Close a previously opened color picker.

  • open

    • .uiColorpicker( 'open' )

      version added: 6.12.0

    Call up a previously attached color picker.

  • colorApply

    • .uiColorpicker( 'colorApply', [ color ] )

      version added: 6.12.0

      color   A named or hex formated color to apply.

    Apply the selected or additional color.

  • colorReset

    • .uiColorpicker( 'colorReset' )

      version added: 6.12.0

    Reset the selected color to the previous selected / startup color.

  • colorSelect

    • .uiColorpicker( 'colorSelect', [ color ] )

      version added: 6.12.0

      color   A named or hex formated color to apply.

    Select an additional color or refresh the state of the selected color.