Hello! I live in Uzbekistan and independently study web development for the third year already. During this time, I learned how to reinvent the wheel on my own to solve the problems that I encountered. One of these problems and its solution will be described here. I hope you will be interested.



Why did I have to write a plugin?


I began to create a static page without using bootstrap for a number of reasons where I needed to insert a slider. You could just write a slider, but I wanted to find a solution that can be reused in new projects.


Therefore, I looked for plugins for inserting a slider, but I still did not find a suitable plugin that would suit me according to all the criteria: mobile-friendly, with remote-controllers, so that all the code fits in one file, compact code and that there are all default options for sliders.


Then I decided to write my own plugin for creating sliders, which can be used in other projects and improved with the help of the community. The plugin is called Slibox.


And the second reason for writing a plugin is self-learning and development. By creating a plugin, I would gain experience in creating plugins and modules. And this knowledge could help me in the future.


Why did I use jQuery?


Although I can write code in vanilla JavaScript, sometimes it’s more convenient for me to work with jQuery)


How to create plugins for jQuery?


First of all, you need to understand why this plugin is created, to solve which particular problem. After all, you can use ready-made.


After you have decided on the choice of problems, you can begin to develop.


Template


First of all, connect jQuery to your page:


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 

Then, create a new file and add this code:


(function($) { $.fn.plugtest=function(options) { } })(jQuery) 

This is a self-invoking function for globalizing plugtest. Yes, we will call our plugtest plugin. $.fn is needed so that we can call this function on some element:


<div></div> 

and bottom in the script element:


$('div').plugtest({}) 

Here, an options will be an empty object.


Action with this


If I add console.log (this) to this function now, then this element will go to the console:


(function($) { $.fn.plugtest=function(options) { console.log(this) } })(jQuery) 

displays this

Settings


Now, we can work on the plugin settings:


(function($) { $.fn.plugtest=function(options) { let o=$.extend({ greeting: 'Привет!' }, options) console.log(this[0].tagName + ' говорит ' + o.greeting) } })(jQuery) 

The extend function “crosses” two objects into one. Now let's change greeting in our initialization:


$('div').plugtest({ greeting: "Здравствуй!" }) 

Open the console and see this:


DIV says hello!

You can also add a return function to return all elements to a variable:


let test=$('div').plugtest({ greeting: "Здравствуй!" }) 

(function($) { $.fn.plugtest=function(options) { let o=$.extend({ greeting: 'Привет!' }, options) return this.each(function() { console.log(this[0].tagName + ' говорит ' + o.greeting) }) } })(jQuery) 

Here, we wrote the simplest plugin that says something on behalf of the element. You can add some more options and play a little. If you were thinking of creating your own plugin, don’t wait to start development!


Slibox on github-e:


Slibox lives here


Advanced


I have experience in creating APIs and applications in PHP, in the Laravel and Vue frameworks, I have experience with node.js, express.js. I'm also interested in creating cross-platform desktop applications and love writing vanilla JavaScript for better control of applications. I'm equally interested in the tasks of the frontend and the backend.


I would like to remotely train in a close-knit team under the supervision of a mentor, where my skills (mastery of the lightsaber) would be useful. Thanks for the tips and opinions.

.

Source