You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

98 lines
2.9 KiB

  1. ## Really Simple Color Picker
  2. This is a very minimal, yet robust Color Picker based on jQuery.
  3. For more details check the introductory blog post - http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/
  4. ### Usage
  5. You can either clone [this repo](https://github.com/laktek/really-simple-color-picker) or download the latest build as a zip from here - http://github.com/laktek/really-simple-color-picker/zipball/master
  6. Color Picker requires jQuery 1.2.6 or higher. Make sure to load it before Color Picker (there's no other dependencies!).
  7. For default styles of the color picker load the CSS file that comes with the plugin.
  8. ```html
  9. <script language="javascript" type="text/javascript" src=jquery.min.js"></script>
  10. <script language="javascript" type="text/javascript" src="jquery.colorPicker.min.js"/></script>
  11. <link rel="stylesheet" href="colorPicker.css" type="text/css" />
  12. ```
  13. Add a text field to take the color input.
  14. ```html
  15. <div><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
  16. ```
  17. Then call 'colorPicker' method on the text field when document loads.
  18. ```html
  19. <script language="javascript">
  20. jQuery(document).ready(function($) {
  21. $('#color1').colorPicker();
  22. }
  23. </script>
  24. ```
  25. ### Options
  26. There are several options you can set at the time of binding.
  27. **Selected color**
  28. Color Picker will use the value of the input field, which the picker is attached to as the selected color. If not, it will use the color passed with `pickerDefault` property.
  29. ```javascript
  30. $('#color1').colorPicker({pickerDefault: "ffffff"});
  31. ```
  32. **Color Palette**
  33. Overrides the default color palette by passing an array of color values.
  34. ```javascript
  35. $('#color1').colorPicker({colors: ["333333", "111111"]});
  36. ```
  37. **Transparency**
  38. Enable transparency value as an option.
  39. ```javascript
  40. $('#color1').colorPicker({transparency: true});
  41. ```
  42. **Color Change Callback**
  43. Registers a callback that can be used to notify the calling code of a color change.
  44. ```javascript
  45. $('#color1').colorPicker( { onColorChange : function(id, newValue) { console.log("ID: " + id + " has been changed to " + newValue); } } );
  46. ```
  47. If you want to set an option gloablly (to apply for all color pickers), use:
  48. ```javascript
  49. $.fn.colorPicker.defaults.colors = ['151337', '111111']
  50. ```
  51. ### Demo
  52. Demo can be found at http://laktek.github.com/really-simple-color-picker/demo.html
  53. ### Real-world Examples
  54. * [CurdBee](http://demo.curdbee.com/settings/branding)
  55. * [Readability](https://www.readability.com/publishers/tools)
  56. Let us know how you are using Really Simple Color Picker...
  57. ### Contributors
  58. * Lakshan Perera - http://laktek.com
  59. * Daniel Lacy - http://daniellacy.com
  60. ### Issues & Suggestions
  61. Please report any bugs or feature requests here:
  62. https://github.com/laktek/really-simple-color-picker/issues