Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color

Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color
File Size: 6.6 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

Pick-a-Color is a cool and easy-to-use jQuery plugin that helps you create beautiful and powerful color picker using Twitter's bootstrap framework.

Features:

  • Flexible text entry: Accepts HEX, RGB, HSL, HSV, HSVA, and names.
  • Saved colors: Saves up to 16 recently used colors. Colors are stored in localStorage or cookies.
  • Advanced: Advanced tab lets users modify hue, saturation, and lightness to make any color their hearts desire.
  • Basic color palate: Easy-to-use preset colors that can be lightened and darkened.
  • Chunky mobile styles: Dragging is easy, even on a touch device.

Basic Usage:

1. Include necessary CSS files in your head section

<link rel="stylesheet" href="css/bootstrap-2.2.2.min.css">
<link rel="stylesheet" href="css/pick-a-color-1.1.0.min.css">

2. Markup

<div class="pick-a-color" id="border-color" data-border-color="222"></div>

3. Include necessary javascript files on your page

<script src="js/jquery-1.9.1.min.js"></script> 
<script src="js/tinycolor-0.9.14.min.js"></script> 
<script src="js/pick-a-color-1.1.0.min.js"></script> 

4. Call the plugin with options

<script type="text/javascript">
$(document).ready(function () {
  $(".pick-a-color").pickAColor({
    showSpectrum            : true, // Specifies whether or not there is a spectrum next to each basic color allowing users to lighten and darken it.
    showSavedColors         : true, // Specifies whether or not there is a tab called "Saved Colors" that keeps track of the last 16 colors a user customized.
    saveColorsPerElement    : false, // Specifies whether there is a tab called "Advanced" that allows users to modify hue, lightness, and saturation to make any color their hearts desire.
    fadeMenuToggle          : true, // Specifies whether the dropdown menu should fade in and out when it's opened and closed. This setting is overridden for mobile devices, in which Pick-a-Color never ever ever uses a fade because WOW they look terrible in mobile browsers.
    showAdvanced            : true // Specifies whether there is a tab called "Advanced" that allows users to modify hue, lightness, and saturation to make any color their hearts desire.
    showBasicColors         : true, // Specifies whether or not the dropdown should show a list of basic colors that the user can select from. 
    showHexInput            : true, // Specifies whether or not to show the hex text input. If false the input has an input type of 'hidden'. 
    allowBlank              : true // Specifies whether or not the field can be left blank. Use this if the color input is not a required field. 

});
});
</script>

Change Log:

v1.2.2 (2014-02-19)

  • toggle dropdown visibility onBlur as well as onFocus.
  • if input field is disabled, don't allow users to open the dropdown. 

v1.2.0 (2014-02-19)

v1.1.8 (2013-10-20)

  • Added allowBlank option

v1.1.4 (2013-05-21)

  • Fixed bug preventing advanced spectrums from updating in IE10, moved from conditional comments to IE version specific featured detection.

v1.1.3 (2013-05-15)

  • use the ID of the initializing div to become the name of the input field

For more Advanced Usages, please check the demo page or visit the official website.