Home » How To Create jQuery Plugin | Change Random Background Color On Page Reload

How To Create jQuery Plugin | Change Random Background Color On Page Reload

by admin
How to create jquery plugin with random background color change

Hello friends, today I am going to tell you something new and that thing is to make a jquery plugin, friends, today I am going to tell you how you can make a simple jquery plugin. By the way, you people must have used a lot of jquery plugins, such as a slick carousel. Because it is very easy to integrate this plugin and you will get its solutions easily and you can also customize easily. So, friends, it is a matter of slider’s plugin, although it would have taken a lot of time to make it, we will not make such a big plugin but will make a simple plugin so that you can easily learn how to use its basic function, our time can also be saved.

If I talk about the more advanced level plugins, then there are many such plugins like isotope, fullpage js, lettering js which are very popular and we all use it but what I will make in today will be very simple will not be more advanced In this, we will create a plugin to change the random background, as soon as you refresh, the color of the background will keep changing.

Popular jquery plugins

First of all, I am going to tell you about the structure of index.html, in this file you have to add any HTML and write its style because we have nothing to do with HTML right now and we do not need it now because All the work will be done with js. So we have to add a Jquery link because we are going to make a Jquery plugin, so then we have to create a file named boxify.js, you can give it any name, I have kept boxify. In boxify, we will have the code to create our complete jquery plugin and when the full functionality of the plugin is created, then we will make that plugin a tag named script in index.html and inside that, we will call this boxify plugin. I will give below the structure of index.html, you can see it and copy it in your file.

boxify.js In this file a jquery blank function has been created, inside which I have created a function named boxify, where I have written the name boxify, that is the name of the plugin, if you want, you can write any name and then You will have to use the same name in future also. After that I have created two variables first colorArr and second randomColor in which I have written some hex color codes in array method in colorArr, you can also add and remove your colors in it. After this I have used Math.floor Math.random() in RandomColor so that when the color is selected randomly.

Then after that, I added some options of the plugin like you set options in other plugins (slick carousel option: slideToShow, speed, autoplay, etc.), in this, we are going to add only 3 options so that you know which option How does it work and how can you create it. In this, we are going to add background color, smoothness(transition), and textColor these three options. Then you can use this option in index.html when you call this plugin. After that I have given background property to the background in return CSS so that it is easy to know that this option is going to be used in CSS itself, in the same way, I have added smoothness to transition and textColor to the color property of CSS.

below i’ve attached full code of boxify plugin so if you don’t have a code or you wan’t writen the code, then you can copy and past the whol code to your boxify.js file.

So, friends, our plugin has now been created, that’s all you have to do, friends, you just have to remember two things, first, how do you want to create the option, and secondly, what do you want to do through this plugin. Like I have changed the background color through this plugin, in the same way, you have to do what you want to do.

I hope that you have liked this article of mine and you must have learned something new with the help of this article and if you have not seen How to create a jquery plugin video then you can also watch in which I have told you about the same thing. If you want to see more educational, front-end useful videos in me, then definitely subscribe to my LearnDesign youtube channel and share this article with your friends so that more people can learn, so finally thank you for your valuable time, and keep watching reading and supporting.

Related Articles

Leave a Comment