A Simple RGB Color Picker For jQuery Mobile

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.