JQuery Plugin Tutorial - My First JQuery Plugin alert tutorial


In this JQuery Tutorial, I am writing my first JQuery Plugin. JQuery plugin code writing is very awesome experience to the Web Developers.

This is the JQuery plugin code. We can keep this code in the separate js file also. Since it is basic tutorial I have included in the html page itself.


    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);



Below example will show the alert message at the time of loading page.

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);


    $(document).ready(function () {
            $('#ranga').MyFirstPlugIn();
        });
    </script>
</head>
<body>
<div id="ranga">
http://aspnettutorialonline.blogspot.com/
</div>
</body>
</html>


Output: 

JQuery Plugin Tutorial
JQuery Plugin Tutorial





Post a Comment

Complete posts