How to write a custom jQuery plugin?



To create a jQuery plugin, first create a file named jquery-demoplugin.js with the following code. This is our plugin code. Here, demoplugin is the name of our plugin. You can add any name to your custom plugin −

(function ( $ ) {    $.fn.demoplugin = function( options ) {       var web = $.extend({          name: 'example'       }, options );       return this.append('Website: ' + web.name + '.com');    }; }( jQuery ));

Now, to load it, add to the HTML file, new.html

<html> <head> <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="jquery-demoplugin.js"></script> <script>    $( document ).ready(function() {       $( '#content ).demoplugin();    }); </script> </head> <body> <div id="content"></div> </body> </html>
Updated on: 2020-06-12T09:00:13+05:30

284 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements