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>
Published on 06-Dec-2017 23:17:53
