How to write a custom jQuery plugin?

I want to write a custom jQuery plugin. How can I create a custom plugin with a custom name?

I want to create my own custom jQuery plugin. How can I create a custom jQuery plugin with a custom name? I have the following div:

<div id="content"></div>

I want the result of calling the plugin to get displayed inside the above div.

0 0

1 Answer

Ricky Barnes

Answered on 6th Dec, 2017

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>

0 0

Would you like to add a better answer?

How to write a custom jQuery plugin?

Follow

Newsletter