article:
Mockups App
article:
Website: Template with jQuery Slider for Agriculture Business

JS Plugins: ColorJoe

Advertisement

Scaleable color picker.

Resource: colorjoe

Essentially this means that you'll be able to define its actual dimensions and layout using a bit of CSS. This way the widget fits well responsive layouts.


Installation

Add prepackaged dist/colorjoe.js and css/colorjoe.css to you page or use AMD to load the dependencies from src/.


Usage

var joe = colorjoe.rgb(element_id_or_dom_object, initial_color_value, extras);

or

var joe = colorjoe.hsl(element_id_or_dom_object, initial_color_value, extras);


Event Handling

The returned joe object is an event emitter style object with change and done events. The change event is fired continuously when selecting and done is fired when user has stopped selecting.

joe.on("change", function(color) {
    console.log("Selecting " + color.css());
});
joe.on("done", function(color) {
    console.log("Selected " + color.css());
});


Implementing Custom Extras


colorjoe.registerExtra('text', function(p, joe, o) {
    // attach new elements to p element here (as children that is)
    // o is optional and will contain any parameters you might have
    // passed to the extra using the array syntax
    // optional return. these are triggered by colorjoe
    // use this way instead of joe.on
    return {
        change: function(col) {},
        done: function(col) {}
    };
})




source
demo
github
download

Advertisement
Tags: color, rgb, online, js, plugin, jquery, design, layout, develop, internet

Leave a Comment

No Comment

© Creative3x Ltd.