A jquery plugin that convent input into color picker.

• Main files
• Quick start
• Requirements
• Usage
• Examples
• Options
• Methods
• Events
• No conflict
• Browser support
• Contributing
• Development
• Changelog
• Copyright and license

dist/ ├── jquery-asColorPicker.js ├── jquery-asColorPicker.es.js ├── jquery-asColorPicker.min.js └── css/    ├── asColorPicker.css    └── asColorPicker.min.css 

Several quick start options are available:

• Development - unminified
• Production - minified

bower install jquery-asColorPicker --save

npm install jquery-asColorPicker --save

If you want build from source:

git clone git@github.com:amazingSurge/jquery-asColorPicker.git cd jquery-asColorPicker npm install npm install -g gulp-cli babel-cli gulp build

Done!

jquery-asColorPicker requires the latest version of jQuery, jquery-asColor, and jquery-asGradient.

<link rel="stylesheet" href="/path/to/asColorPicker.css"> <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery-asColor.js"></script> <script src="/path/to/jquery-asGradient.js"></script> <script src="/path/to/jquery-asColorPicker.js"></script>

<input type='text' class="example" value="#000" />

All you need to do is call the plugin on the element:

jQuery(function($) { $('.example').asColorPicker(); });

There are some example usages that you can look at to get started. They can be found in the examples folder.

jquery-asColorPicker can accept an options object to alter the way it behaves. You can see the default options by call $.asColorPicker.setDefaults(). The structure of an options object is as follows:

{ namespace: 'asColorPicker', readonly: false, skin: null, lang: 'en', hideInput: false, hideFireChange: true, keyboard: false, color: { format: false, alphaConvert: { // or false will disable convert 'RGB': 'RGBA', 'HSL': 'HSLA', 'HEX': 'RGBA', 'NAMESPACE': 'RGBA', }, shortenHex: false, hexUseName: false, reduceAlpha: true, nameDegradation: 'HEX', invalidValue: '', zeroAlphaAsTransparent: true }, mode: 'simple', onInit: null, onReady: null, onChange: null, onClose: null, onOpen: null, onApply: null } 

Methods are called on asColorPicker instances through the asColorPicker method itself. You can also save the instances to variable for further use.

// call directly $().asColorPicker('destory'); // or var api = $().data('asColorPicker'); api.destory();

Get or set opacity.

// get opacity $().asColorPicker('opacity'); // set opacity $().asColorPicker('opacity', 0.1);

Show the colorpicker dropdown.

$().asColorPicker('open');

Close the colorpicker dropdown.

$().asColorPicker('close');

Clear the colorpicker.

$().asColorPicker('clear');

Get or set the colorpicker val.

// get the color $().asColorPicker('val'); // set the color $().asColorPicker('val', 'rgb(100, 100, 100)');

Set the color.

$().asColorPicker('set', 'rgb(100, 100, 100)');

Get the color.

$().asColorPicker('get');

Enable the colorpicker functions.

$().asColorPicker('enable');

Enable the colorpicker functions.

$().asColorPicker('enable');

Disable the colorpicker functions.

$().asColorPicker('disable');

Destroy the colorpicker instance.

$().asColorPicker('destroy');

jquery-asColorPicker provides custom events for the plugin’s unique actions.

$('.the-element').on('asColorPicker::change', function (e) { // on value change  });

If you have to use other plugin with the same namespace, just call the $.asColorPicker.noConflict method to revert to it.

<script src="other-plugin.js"></script> <script src="jquery-asColorPicker.js"></script> <script> $.asColorPicker.noConflict(); // Code that uses other plugin's "$().asColorPicker" can follow here. </script>

Tested on all major browsers.

Latest ✓	Latest ✓	Latest ✓	Latest ✓	9-11 ✓	Latest ✓

As a jQuery plugin, you also need to see the jQuery Browser Support.

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-asColorPicker before submitting an issue. There are several ways to help out:

• Bug reports
• Feature requests
• Pull requests
• Write test cases for open bug issues
• Contribute to the documentation

jquery-asColorPicker is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

npm install -g gulp npm install -g babel-cli npm install

Then you can generate new distributable files from the sources, using:

gulp build 

More gulp tasks can be found here.

To see the list of recent changes, see Releases section.

Copyright (C) 2016 amazingSurge.

Licensed under the LGPL license.

⬆ back to top