Create a plugin in Jquery

By
Plugin In Jquery
Jquery Plugin is piece of code which are available throughout the application. For example if we want to open a my custom menu in right click then best option is create the plugin for this.In C#  .ToString() is like a plugin but in C# its called as Extended properties.Here i am create a simple plugin in Jquery.Also i custom the plugin see the explanation section for this.

Code Sample for plugin [JQuery]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="headbody">
    <title>Create a plugin in Jquery</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            (function ($) {
                $.fn.ChangeColor = function (mycolor) {
                    this.each(function () {
                        $(this).css({ 'background-color': 'green', 'color': '#000' });
                    });
                }
            }(jQuery));
            $("p").ChangeColor();
        });
     </script>
</head>
<body>
    <div>
        <div>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <div>D</div>
            <p>E</p>
        </div>
    </div>
</body>
</html>

Output


A

B
C
D
E

Expalnation
In above exaple plugin name is  ChangeColor. I am using each loop due to its run on multiple DOM(Document Object Model) element.For example in above code i want to change the background color as well color of all p tag element.I already discuss how to change the css color with jquery click here for detail.Here i am using the closure
(function ($) {
// coding are here
}(jQuery));
I am using closure because so many JavaScript library using $ notation so when we make the plugin it may be conflict to another library plugin.But closure protect this.We can also pass the argument in plugin for example let we want to change the background color from where i call the plugin.Then example of this is
   <script type="text/javascript">
        $(function () {
            (function ($) {
                $.fn.ChangeColor = function (mycolor) {
                    this.each(function () {
                        $(this).css({ 'background-color':mycolor, 'color': '#000' });
                    });
                }
            }(jQuery));
            $("p").ChangeColor('blue');
        });

    </script>
you can also send the json in plugin like below
<script type="text/javascript">
        $(function () {
            (function ($) {
                $.fn.ChangeColor = function (option) {
                    this.each(function () {
                        $(this).css({ 'background-color': option.backColor, 'color': option.frontColor         
});
                    });
                }
            }(jQuery));

            var pluginOption = {};
            pluginOption.backColor = "blue";
            pluginOption.frontColor = "#fff";
            $("p").ChangeColor(pluginOption);
        });
</script>

1 comment: