Good day for all of you my readers, today we will learn a new tutorial. It's a very simple plugin which depends on jQuery. This plug will enable you to create an RGB color picker for a mobile. Not only that, but with a button that pops up the RGB color gadget. Just try to understand the steps, then you will start to establish the plugins in the right way. So right now let me show you how it looks like:
How To use the Plugins

1- Before you start doing anything, you should load the very important needed "jQuery library, jQuery Mobile's JavaScript and Style-sheet" in your template or in your HTML document. I consider this the most important step of all. 
<link rel="stylesheet" href="PATH TO JQUERY MOBILE HERE.CSS">
<script src="PATH TO JQUERY.MIN.JS"></script>
<script src="PATH TO JQUERY MOBILE HERE.JS"></script>
Alert message: If you already have jQuery on your page, you shouldn't include it a second time.
Great! Do not worry, I will give you full and complete codes for everything at the end of the topic. Just try to understand the steps, OK.


2- Add the jQuery Simple Colorpicker's files in your document 
<link rel="stylesheet" href="PATH OF COLOR PICKER.CSS">
<script src="PATH OF COLOR PICKER.JS"></script>



3- Create the HTML "button and popup picker", meaning 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- Now let us add the options to activate the color picker and apply the picked color to the background of the document with JavaScript. 
$(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- No problem if you would like to use another color for the color picker box. Yes, it's possible! Options to customize the color picker are available. In the event that you want to change the Red, Green, and Blue text to something else, then use the `redText`, `greenText`, and `blueText` options, respectively. 
{
  redText: 'Red',
  greenText: 'Green',
  blueText: 'Blue',
  defaultColor: '#000000'
},


As I mentioned above, I will give you all the codes completely.

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://rawgit.com/FeedBlogz/fb/master/RGB-ColorPicker-Mobile/1.4.5-jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="https://rawgit.com/FeedBlogz/fb/master/RGB-ColorPicker-Mobile/colorpicker.min.css">
<script src="https://rawgit.com/FeedBlogz/fb/master/RGB-ColorPicker-Mobile/jquery-1.12.4.min.js"></script>
<script src="https://rawgit.com/FeedBlogz/fb/master/RGB-ColorPicker-Mobile/1.4.5-jquery.mobile-1.4.5.min.js"></script>
<script src="https://rawgit.com/FeedBlogz/fb/master/RGB-ColorPicker-Mobile/colorpicker.min.js"></script>
<script>
 $(document).on('pagecreate', '#pageone', function(){
 $('#picker').colorpicker({
 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')
 })
 })
 </script>
 </head>
 <body>
 <div data-role="page" id="pageone">
 <div data-role="header">
 <h1>My color picker page</h1>
 </div>
 <div data-role="main" class="ui-content">
 <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"></div>
 </div>
 </div>
 </body>
 </html>