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

File Size: 744 KB
Views Total: 7758
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Beautiful jQuery Color Picker For Bootstrap - Pick-a-Color

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. 
    inlineDropdown          : false
});
});
</script>

Change Log:

v1.2.2 (2014-04-25)

  • add option for inline dropdown on desktop. 

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

This awesome jQuery plugin is developed by lauren. For more Advanced Usages, please check the demo page or visit the official website.