ChromoSelector - jQuery Color Picker plugin - Documentation / API / Events

beforeHide

Description:
This event is triggered when the color picker is about to be hidden. If cancelled, the event will be aborted and the color picker will stay shown.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        beforeHide: function () {
            // Require confirmation to hide
            return confirm('Are you sure you want to hide the color picker?');
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('beforeHide', function () {
            // Require confirmation to hide
            return confirm('Are you sure you want to hide the color picker?');
        })
});

beforeShow

Description:
This event is triggered when the color picker is about to be shown. If cancelled, the event will be aborted and the color picker will stay hidden.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        beforeShow: function () {
            // Require confirmation to show
            return confirm('Are you sure you want to show the color picker?');
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('beforeShow', function () {
            // Require confirmation to show
            return confirm('Are you sure you want to show the color picker?');
        })
});

create

Description:
This event is triggered after the plugin has been instanciated, but before the color picker has been rendered. Cannot be registered with .bind()

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        create: function () {
            // Do something
        }
    });
});

destroy

Description:
This event is triggered when the "destroy" method is called on the plugin and it is going to be destroyed shortly.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        destroy: function () {
            // Do something
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('destroy', function () {
            // Do something
        })
});

hide

Description:
This event is triggered after the color picker has been hidden.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        hide: function () {
            // Do something
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('hide', function () {
            // Do something
        })
});

ready

Description:
This event is triggered when the color picker has been rendered on the canvas. This will occur once, before the color picker is shown for the first time and the exact timing depends on the value of the "autoshow" property.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        ready: function () {
            // Do something
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('ready', function () {
            // Do something
        })
});

show

Description:
This event is triggered after the color picker has been shown.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        show: function () {
            // Do something
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('show', function () {
            // Do something
        })
});

resizeStart

Description:
This event is triggered when the user initiates a resize operation or after a call to the "resize" method.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        resizeStart: function () {
            // Do something
        })
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('resizeStart', function () {
            // Do something
        })
});

resize

Description:
This event is repeatedly triggered while the user is performing a resize operation. It is also triggered once after a call to the "resize" method.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        resize: function () {
            // Do something
        })
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('resize', function () {
            // Do something
        })
});

resizeStop

Description:
This event is triggered when the user finishes a resize operation or after a call to the "resize" method.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        resizeStop: function () {
            // Do something
        })
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('resizeStop', function () {
            // Do something
        })
});

update

Description:
This event is triggered when the user changes the color on the color picker. This event is throttled and the event handler will only be called on average once every 100 milliseconds.

Sample usage:

// Bind to the event before instantiating the plugin
$(document).ready(function () {
    $('input.color').chromoselector({
        preview: false,
        update: function () {
            // Show a preview in the background of the input element
            $(this).css(
                'background-color',
                $(this).chromoselector('getColor').hex
            );
        }
    });
});

// Bind to the event after instantiating the plugin
$(document).ready(function () {
    $('input.color')
        .chromoselector()
        .bind('update', function () {
            // Do something
        })
});