https://github.com/antelle/small-color-picker

jQuery color picker and button styles
https://github.com/antelle/small-color-picker

color-picker javascript jquery jquery-color-picker

Last synced: 23 days ago
JSON representation

jQuery color picker and button styles

• Host: GitHub
• URL: https://github.com/antelle/small-color-picker
• Owner: antelle
• License: mit
• Created: 2013-05-18T17:13:21.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2017-03-20T18:24:01.000Z (almost 8 years ago)
• Last Synced: 2024-04-15T00:16:42.151Z (9 months ago)
• Topics: color-picker, javascript, jquery, jquery-color-picker
• Language: JavaScript
• Homepage: https://antelle.net/small-color-picker/
• Size: 502 KB
• Stars: 21
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE.txt

Awesome Lists containing this project

README

        
# SmallColorPicker

SmallColorPicker is a tiny jQuery color picker licensed under MIT. Also the project includes buttons styles for color selection.  

Live demo page is [here](http://antelle.github.io/small-color-picker/). Screenshot:  

  



## Features

This color picker includes:  

* color wheel and text input modes;

* minimalistic popup interface;

* old (previous) and new (current) color display;

* color buttons which will automatically change its color;

* popup and static positioning;

* text input of colors in natural language;

* touch devices support;

* multi-target popup mode (if initialized with several buttons, only one picker will be visible);

* retina graphics.

This color picker does not include:

* support of non-CSS3 browsers

## Usage

SmallColorPicker initializations should look like this:  

```javascript

try {

    $(".color-btn").smallColorPicker({ /* options */ });

} catch (err) {

    // the browser is not supported

}

```   

Please note: `options` object is mandatory, you can pass just `{}`.  

You can use color picker either in static mode (e.g. in a control displayed on your page), or in popup mode. In case the picker is initialized in popup mode, only one picker will be created for jQuery selector used for initialization (you can see this on example.html page in the source code). If you are using color buttons from this library, the picker will automatically replace color values in them.  

To get an earlier created color picker, call  

```javascript

var picker = $(".color-btn").smallColorPicker();  

```  

If you wish, you can also use the picker in non-jQuery version (`new SmallColorPicker.CirclePicker({})`) but this is more complex and still requires jQuery for operation.  

### Options

```javascript

$(".color-btn").smallColorPicker({

    placement: {

        position: "absolute", // positioning (ignored in popup mode)

        top: "0", // top posision (ignored in popup mode)

        left: "0", // left position (ignored in popup mode)

        parent: null, // don't pass this if you are using jQuery plugin version

        popup: true // popup or static color picker verson

    },

    colors: {

        colorOld: null, // old color (the one displayed on the left)

        colorNew: "#ff0000" // new color (displayed on the right; currently selected color)

    },

    texts: { // texts used in color picker

        ok: "OK",

        cancel: "Cancel",

        switchModeToNum: "Show numbers",

        switchModeToCol: "Show color wheel"

    },

    behavior: {

        rotate: true, // whether to rotate color shades square

        hideOnSelect: true, // auto hide picker on color select

        mode: SmallColorPicker.Mode.COLOR, // default color selection mode 

        switchMode: true, // whether the user can switch input mode

        animation: true // show/hide fade animation 

    }

});

```

### Methods

This code explains usage of methods:  

```javascript

var picker = $(".color-btn").smallColorPicker(); // get the picker

picker.show(); // show the picker

picker.hide(); // hide the picker

picker.toggle(); // toggle picker visibility

picker.toggle(true); // show the picker

picker.toggle(false); // hide the picker

var visible = picker.isVisible(); // is the picker visible

picker.switchMode(); // switch input mode between color wheel and numberic

picker.switchMode(SmallColorPicker.Mode.COLOR); // switch to clor wheel mode

picker.switchMode(SmallColorPicker.Mode.NUMBER); // switch to numeric mode

picker.setColors("#ff0000"); // set the displayed (selected) color

picker.setColors("#ff0000", "#000000"); // set both colors: displayed (selected) and old (previously selected)

var parent = picker.parent(); // get picker current parent

picker.parent("#btn2"); // change picker parent

picker.destroy(); // completely remove color picker 

```

### Events

Here's how to listen the picker events:

```javascript

$(".color-btn").on {

    scp_ok: function(picker, color) {  }, // color is selected

    scp_cancel: function(picker, color) {  }, // color selection cancelled

    scp_show: function(picker) {  }, // picker is shown

    scp_hide: function(picker) {  } // picker is hidden

}

```

## Building

Use grunt to build this project. It will put the result into ../build-v1 folder.