Programming Tip - How to write a custom jQuery plugin and how to insert in html Quick view

in #steem8 years ago

Programming Tip - How to write a custom jQuery plugin and how to insert in html?

3.jpg


Today i am going to show How to write a custom jQuery plugin and how to insert in html with simple code. I hope you will understand this.
If you have any query you can ask.
i hope you will like it.


First create a file named jquery-TestPlugin.js with the following code. This is our plugin code.

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


Now include in html file.

<html>
<head>

<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="jquery-TestPlugin.js"></script>

<script>
  $( document ).ready(function() {
    $( '#content ).demoplugin();
  });
</script>

</head>
<body>
<div id="content"></div>
</body>
</html>




Follow me at : https://steemit.com/@ahmadhassan
=========================================================


Thanks for reading and always welcome your suggestions :) =========================================================

Coin Marketplace

STEEM 0.04
TRX 0.33
JST 0.091
BTC 63026.84
ETH 1771.20
USDT 1.00
SBD 0.39