Colorpicker Plugin For Bootstrap - Free Download jQuery Colorpicker Plugin For Bootstrap

Free Download jQuery Colorpicker Plugin For Bootstrap

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Colorpicker Plugin For Bootstrap, hope it will help you in programming stack.

Colorpicker Plugin For Bootstrap - Free Download jQuery Colorpicker Plugin For Bootstrap
File Size: 540 KB
Views Total: 22515
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Colorpicker Plugin For Bootstrap 4 and Bootstrap 3 frameworks that allow you to add a color picker to an input field field or to any other element with multiple formats: hex, rgb, rgba, hsl, hsla.

You might also like:

Installation:

view source
1 # Yarn
2 $ yarn add bootstrap-colorpicker
3  
4 # NPM
5 $ npm install bootstrap-colorpicker --save

How to use it:

1. Include jQuery script and bootstrap-colorpicker.js

view source
1 <script src="js/jquery.js"></script>
2 <script src="js/bootstrap-colorpicker.js"></script>

2. Include CSS before </head>.

view source
1 <link href="css/bootstrap.css" rel="stylesheet">
2 <link href="css/colorpicker.css" rel="stylesheet">

3. Call the function on target element.

view source
1 $('.colorpicker').colorpicker();

4. Default plugin options.

view source
001 /**
002  * If true, loads the Debugger extension automatically into the current instance
003  * @type {boolean}
004  * @default false
005  */
006 debug: false,
007 /**
008  * Forces a color, ignoring the one from the elements value or data-color attribute.
009  *
010  * @type {(String|Color|boolean)}
011  * @default false
012  */
013 color: false,
014 /**
015  * Forces an specific color format. If false, it will be automatically detected the first time,
016  * but if null it will be always recalculated.
017  *
018  * Note that the ending 'a' of the format meaning "alpha" has currently no effect, meaning that rgb is the same as
019  * rgba excepting if the alpha channel is disabled (see useAlpha).
020  *
021  * @type {('rgb'|'rgba'|'prgb'|'prgba'|'hex'|'hex3'|'hex6'|'hex8'|'hsl'|'hsla'|'hsv'|'hsva'|'name'|boolean)}
022  * @default false
023  */
024 format: false,
025 /**
026  * Horizontal mode layout.
027  *
028  * If true, the hue and alpha channel bars will be rendered horizontally, above the saturation selector.
029  *
030  * @type {boolean}
031  * @default false
032  */
033 horizontal: false,
034 /**
035  * Forces to show the colorpicker as an inline element
036  *
037  * @type {boolean}
038  * @default false
039  */
040 inline: false,
041 /**
042  * Children input CSS selector
043  *
044  * @type {String}
045  * @default 'input'
046  */
047 input: 'input',
048 /**
049  * Colorpicker container CSS selector. If given, the colorpicker will be placed inside this container.
050  * If true, the colorpicker element itself will be used as the container.
051  *
052  * @type {String|boolean}
053  * @default false
054  */
055 container: false, // container selector
056 /**
057  * Children color component CSS selector.
058  * If it exists, the child <i> element background will be changed on color change.
059  *
060  * @type {String|boolean}
061  * @default '.add-on, .input-group-addon'
062  */
063 component: '.add-on, .input-group-addon',
064 /**
065  * Fallback color to use when the given color is invalid.
066  * If false, the latest valid color will be used as a fallback.
067  *
068  * @type {String|Color|boolean}
069  * @default false
070  */
071 fallbackColor: false,
072 /**
073  * If enabled, the input content will be replaced always with a valid color,
074  * if not enabled the invalid color will be left in the input, but valid in the internal color object.
075  *
076  * @type {boolean}
077  * @default false
078  */
079 autoInputFallback: false,
080 /**
081  * If true a hash will be prepended to hexadecimal colors.
082  * If false, the hash will be removed.
083  * This only affects the input values.
084  *
085  * @type {boolean}
086  * @default false
087  */
088 useHashPrefix: true,
089 /**
090  * If true or false the alpha adjustment bar will be displayed no matter what.
091  * If false it will be always hidden and alpha channel won't be allowed programmatically for this instance,
092  * so the selected or typed color will be always opaque.
093  *
094  * @type {boolean}
095  * @default true
096  */
097 useAlpha: true,
098 /**
099  * This only applies when the color format is hexadecimal.
100  * If true, the alpha channel will be allowed for hexadecimal formatted colors, making them having 4 or 8 chars
101  * (RGBA or RRGGBBAA). This format is not yet supported in all modern browsers, so it is disabled by default.
102  * If false, rgba will be used whenever there is an alpha change different than 1 and the color format is
103  * automatic.
104  *

source : jquery.net

Related posts:

105  * @type {boolean}