Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about the implementation of Color Picker using jQuery. On the button click you open Color Picker and get code of the Color as per your requirement.
Code for HTML Page
Implementation: On the HTML page I will place a textbox control with the id named color_picker. On the HTML page i inherited two JS file named jquery-1.12.3.min.js and kendo.all.min.js. I also inherited one CSS file named kendo.bootstrap-v4.min.css. On page load i created a function $(document).ready(function(). Here i am using id of the textbox i.e. color_picker. When user click on the textbox then Color Picker will be appear on screen and user can select the color code by dragging inside the Color Picker as per their requirement.
Here i am giving the complete code for HTML page. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Color Picker</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/ 2018.2.620/styles/kendo.bootstrap-v4.min.css"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"> </script> <script src="https://kendo.cdn.telerik.com/ 2018.2.620/js/kendo.all.min.js"></script> <style> body {font-family: helvetica;} </style> </head> <body> <input id="color_picker" type="color"> <script> $(document).ready(function(){ $('#color_picker').kendoColorPicker(); }); </script> </body> </html>
Check the Output of the complete Program
Conclusion: In above code, I explained that implementation the Color Picker using jQuery. This code is very helpful for every developer. Bye bye and take care of you Developers. We will come back shortly with the new article.
Regards
Using Asp.net
No comments:
Post a Comment