A Simple RGB Color Picker For jQuery Mobile
File Size: | 48.9 KB |
---|---|
Views Total: | 2116 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a simple jQuery plugin which enables you to create a mobile-first RGB color picker component using jQuery mobile's popup widget.
How to use it:
1. Load the needed jQuery library and jQuery Mobile's JavaScript & Stylesheet in your html document.
<link rel="stylesheet" href="/path/to/jquery.mobile.min.css"> <script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery.mobile.min.js"></script>
2. Load the jQuery Simple Colorpicker's files in the document.
<link rel="stylesheet" href="jqm-simple-colorpicker.min.css"> <script src="jqm-simple-colorpicker.min.js"></script>
3. Create the elements for the color picker.
<a id="button" href="#picker" data-rel="popup" class="ui-btn ui-btn-inline">Pick color</a> <div id="picker" data-role="colorpicker" data-transition="turn">Test</div>
4. The JavaScript to activate the color picker and apply the picked color to the background of the document.
$(function(){ $('#picker').colorpicker('option', { picked:function(event, data){ $('div[data-role=page]').css('background-color', data.color) }, defaultColor:$('div[data-role=page]').css('background-color') }) $('#button').click(function(){ $('#picker').colorpicker('open') }) })
5. Possible options to customize the color picker.
{ redText: 'Red', greenText: 'Green', blueText: 'Blue', defaultColor: '#000000' },
This awesome jQuery plugin is developed by Vertumnus. For more Advanced Usages, please check the demo page or visit the official website.