Authoring your First jQuery Plugin

<!DOCTYPE html> <html lang="en"> <head id="ctl00_Head1"><meta charset="utf-8" /><title> Authoring your First jQuery Plugin | DotNetCurry </title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><meta name="description" content="With the jQuery Boilerplate Plugin and some simple guidelines, we all can build simple to very complex and structured plugins in no time. This article shows you how to create your first jQuery plugin." /><meta name="keywords" content="jQuery and ASP.NET" /><meta name="author" content="DotNetCurry.com" /><meta name="CCBot" content="nofollow" /><link rel="shortcut icon" href="../../img/favicon.ico" /><link rel="icon" type="image/ico" href="../../img/favicon.ico" /><link rel="stylesheet" href="../../js/font-awesome/css/font-awesome.min.css" /><link rel="canonical" href="https://www.dotnetcurry.com/jquery/1069/authoring-jquery-plugins" /><link href="/content/site?v=dSwaMsW0iplPE-tk0JGVwhcZRf6VKKqSg-lTdPGvZso1" rel="stylesheet"/> <style>.async-hide { opacity: 0 !important} </style>    <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1902706389940870', { //em: 'insert_email_variable' }); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1902706389940870&ev=PageView&noscript=1" /></noscript>    <script> !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js', a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init','nw0gz'); twq('track','PageView'); </script>  </head> <body> <form name="aspnetForm" method="post" action="./authoring-jquery-plugins?ID=1069" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDk2ODQwMTdkZJysVikQVHzjAtZqOeUvZO1Bu1pl" /> </div> <div> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A9C58E29" /> </div> <div class="wrapper">  <header class="header header-megamenu"> <nav class="navbar navbar-default" role="navigation"> <div class="container">   <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <a class="navbar-brand" href="https://www.dotnetcurry.com"> <img src="/img/dnc-logo-small.jpg" class="img-responsive" alt="DNC Magazine" /> </a> </div>  <div class="navbar-social pull-right visible-xs-block, hidden-xs"> <a href="https://www.facebook.com/dotnetcurry"><img src="/img/icon/fb.png" class="img-responsive" alt="DotNetCurry's Official Facebook Account" /></a> <a href="https://www.twitter.com/dotnetcurry"><img src="/img/icon/twit.png" class="img-responsive" alt="DotNetCurry's Official Twitter Account" /></a> <a href="https://github.com/dotnetcurry"><img src="/img/icon/git.png" class="img-responsive" alt="DotNetCurry's Official Github Account" /></a> </div>  <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li> <div class="row"> <div class="col-md-3"> <h5>ASP.NET</h5> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-ajax" class="last">ASP.NET AJAX</a> <h5>Patterns and Practices</h5> <a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> </div> <div class="col-md-3"> <h5>.NET</h5> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS (Azure DevOps) & TFS</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> <a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a> </div> <div class="col-md-3"> <h5>Cloud and Mobile</h5> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a> <a href="https://www.dotnetcurry.com/tutorials/devops">DevOps</a> <a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a> <a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a> <a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a> <a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a> <a href="https://www.dotnetcurry.com/tutorials/windowsphone" class="last">Windows Phone</a> <h5>Useful</h5> <a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a> <a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a> <a href="https://www.dotnetcurry.com/tutorials/general-programming-topics">General Topics</a> </div> <div class="col-md-3"> <h5>JavaScript</h5> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular</a> <a href="https://www.dotnetcurry.com/tutorials/typescript">TypeScript</a> <a href="https://www.dotnetcurry.com/tutorials/nodejs">Node.js</a> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5 & JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">Bootstrap & CSS</a> </div> <div class="col-md-3"> <h5>Publications</h5> <a href="http://www.jquerycookbook.com/">Books</a> <a href="https://www.dotnetcurry.com/magazine/" class="last">Magazines</a> <h5>Older Technologies</h5> <a href="https://www.dotnetcurry.com/tutorials/silverlight">Silverlight</a> <a href="https://www.dotnetcurry.com/tutorials/expression-web">Expression Web</a> <a href="https://www.dotnetcurry.com/tutorials/expression-blend">Expression Blend</a> <a href="https://www.dotnetcurry.com/tutorials/windows-vista">Windows Vista</a> <a href="https://www.dotnetcurry.com/tutorials/microsoft-word">Word 2007</a> <a href="https://www.dotnetcurry.com/tutorials/microsoft-outlook">Outlook 2007</a> <a href="#"></a> </div> </div> </li> </ul> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Featured <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li> <div class="row"> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet"> <div class="hp-thumb"> <img data-src="/img/header/1385.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Aug 30, 2017</date> <h4><a href="https://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet">Angular 4 Development Cheat Sheet</a></h4> <p class="hidden-xs">A quick reference guide to get you going with Angular development. It uses Angular v4 with TypeScript.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1364/error-handling-dotnet-projects"> <div class="hp-thumb">  <img data-src="/img/header/1364.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>May 12, 2017</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1364/error-handling-dotnet-projects">Error Handling in Large .NET Projects - Best Practices</a></h4> <p class="hidden-xs">Learn some effective error handling strategies that you can use in your .NET projects.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1375/behavior-driven-development-bdd"> <div class="hp-thumb"> <img data-src="/img/header/1375.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>July 3, 2017</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1375/behavior-driven-development-bdd">Behavior Driven Development (BDD) – an in-depth look</a></h4> <p class="hidden-xs">Learn how Behavior Driven Development (BDD) works with a real-world example of how to use it.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1305/aspect-oriented-programming-aop-csharp-using-solid"> <div class="hp-thumb"> <img data-src="/img/header/1305.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Sep 25, 2016</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1305/aspect-oriented-programming-aop-csharp-using-solid">Aspect Oriented Programming (AOP) in C# with SOLID</a></h4> <p class="hidden-xs">Aspect Oriented Programming (AOP) in C# using SOLID principles, with challenges and solutions.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/javascript/1359/javascript-frameworks-aspnet-mvc-developer"> <div class="hp-thumb"> <img data-src="/img/header/1359.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Sep 25, 2016</date> <h4><a href="https://www.dotnetcurry.com/javascript/1359/javascript-frameworks-aspnet-mvc-developer">JavaScript Frameworks for ASP.NET MVC Developers</a></h4> <p class="hidden-xs">Learn about a few JavaScript frameworks, and which one will be a good fit in your ASP.NET MVC apps</p> </div> </div> </div> </li> </ul> </li> <li class="dropdown megamenu"> <a href="https://www.dotnetcurry.com/magazine/">.NET Magazines</a> </li> <li class="dropdown dropdown-v1"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li><a href="https://www.dotnetcurry.com/About.aspx">About Us</a></li> <li><a href="https://www.dotnetcurry.com/WriteForUs.aspx">Write For Us</a></li> <li><a href="https://www.dotnetcurry.com/Contact.aspx">Contact Us</a></li> </ul> </li>  </ul> </div>  </div> </nav> </header>   <div class="container"> <div class="clearfix divborder"> <div class="col-md-8 column"> <div class="col-md-12 articlebox row"> <div class="articletitle"> <h1 class="articlehead"> <span id="ctl00_MainContent_lblTitle">Authoring your First jQuery Plugin</span> </h1> <b>Posted by: </b> <a id="ctl00_MainContent_lnkAddedBy" href="../../Author.aspx?AuthorName=Suprotim Agarwal">Suprotim Agarwal</a> , on 1/9/2015, in <b> Category </b> <a id="ctl00_MainContent_lnkCategory" href="../../BrowseArticles.aspx?CatID=63">jQuery and ASP.NET</a> <br /> </div> <div class="articlestats"> <div class="stats1"> <b>Views: </b> 20311 <br/> </div> </div> <div class="articleabstract"> <b>Abstract: </b> With the jQuery Boilerplate Plugin and some simple guidelines, we all can build simple to very complex and structured plugins in no time. This article shows you how to create your first jQuery plugin. </div> <div class="socialshare"> <a class="resp-sharing-button__link" id="fbsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> </g> </svg> <span></span> </div> </div> </a> <a class="resp-sharing-button__link" id="twtsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> </g> </svg> <span></span> </div> </div> </a> <a class="resp-sharing-button__link" id="linkdinsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg> <span></span> </div> </div> </a>  </div> </div> <div id="articleBody" class="col-md-12 row"> <p>One of the key aspects of jQuery is the possibility to extend it. A jQuery plugin is a method that <i>extends</i> the jQuery object. You can create a simple plugin by adding a method to $.fn in the following manner:</p> <pre class="brush: js;"> $.fn.plugin = function() { } </pre> <p>If you look at the jQuery documentation, <a title="jQuery doc" rel="nofollow" target="_blank" href="https://github.com/jquery/jquery/blob/1.11.1/src/core.js#L36">line 36</a> you will find that the <i>fn</i> property is an alias to the <i>prototype</i> property, which returns the current jQuery version</p> <p><img title="s8-jquery-plugin" border="0" alt="s8-jquery-plugin" width="397" height="68" src="https://www.dotnetcurry.com/images/jquery/Authoring-your-First-jQuery-Plugin_816A/s8-jquery-plugin.png" /></p> <p>The <a title="jQuery Boilerplate" rel="nofollow" target="_blank" href="https://github.com/jquery-boilerplate/jquery-boilerplate/blob/91b4eb05b18f3038a6f8a34c41435c4d2702c0d0/dist/jquery.boilerplate.js">jQuery Boilerplate plugin</a> by Zeno Rocha and Addy Osmani is a good starting point to start creating your own plugin. Here’s the structure of the plugin:</p> <pre class="brush: js;"> /* * jQuery Boilerplate - v3.3.3 * A jump-start for jQuery plugins development. * http://jqueryboilerplate.com * * Made by Zeno Rocha * Under MIT License */; (function ($, window, document, undefined) { var pluginName = "defaultPluginName", defaults = { propertyName: "value" }; function Plugin(element, options) { this.element = element; this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } $.extend(Plugin.prototype, { init: function () { console.log("xD"); }, yourOtherFunction: function () { // some logic } }); $.fn[pluginName] = function (options) { this.each(function () { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); return this; }; })(jQuery, window, document); </pre> <p>Although the boilerplate plugin comes with some useful inline comments (not included in the above code) which you must read, I will try to simplify things for you by walking through this structure by creating our own plugin based on this template.</p> <p id="jquery" class="articlead"> </p> <p>Create a new file ‘SimplePlugin.html’. We will create a simple <i>highlight</i> plugin which can highlight a textbox or a div by giving it a background color and a border. This plugin is saved as ‘jquery.highlighttextbox.js’ in the scripts folder of the source code that comes with this article.</p> <p>Once it is ready, we will be calling our plugin in the following manner:</p> <pre class="brush: js;"><script type="text/javascript"> $(function () { $("#myText").highlight(); }); </script> </pre> <p>The first step is to understand the following structure of the boilerplate plugin:</p> <pre class="brush: js;"> ;(function ($, window, document, undefined) { ... })(jQuery, window, document); </pre> <p>What you see here is an <i>Immediately Invoked Function Expression</i> a.k.a IIFE. An IIFE is a function that is immediately defined and then invoked. Since JavaScript has a function scope, IIFE lets you create a ‘private scope’ which is safe from outside tampering. This separates your variables and other code from the global scope.</p> <p>To make it simpler, think of it as an anonymous function wrapped within a function call. The function is invoked using the closing brackets ()</p> <pre class="brush: js;"> ;(function() { // Function body })(); </pre> <p>Also observe there is a semi-colon (;) before function invocation. The semi-colon is a safety net against concatenated scripts and/or other plugins which may not be closed properly.</p> <p>Let us now briefly talk about the arguments ($, window, document, undefined).</p> <p>‘$’ here simply represents a reference to a jQuery object that is passed in to the wrapper function and avoids plugin conflicts with other languages like Prototype, that also use $.</p> <p><i>window</i>, <i>document</i> and <i>undefined</i> are passed as local variables to the function. Passing these as arguments, shorten the time it takes to resolve these variables. However in my personal opinion, the time saved by using these local variables is negligible. So if your plugin does not reference <i>window</i> or <i>document</i> too many times in your code, you can skip passing these variables. For knowledge purpose, another reason <i>undefined</i> is passed is because the <i>undefined</i> global property in ECMAScript 3, is mutable; so that means someone could change its value from outside. However in ECMAScript 5, <i>undefined</i> has been made immutable (read only).</p> <p>To access the actual <i>window</i> and <i>document</i> objects, you are passing (jQuery, window, document) parameters at the end of your anonymous function.</p> <p>Our next step is to define the plugin name and create defaults for it.</p> <pre class="brush: js;"> ;(function ($, window, document, undefined) { var pluginName = "highlight", // plugin defaults: defaults = { bgColor: "AliceBlue", border: "3px solid #cdcdcd" }; </pre> <p>Our plugin will be called ‘highlight’. <i>defaults</i> allows users to pass options to the plugin. You can even send a single argument as an object literal, which is a standard jQuery practice. It is also a best practice to set default options using the defaults object, hence we are setting the default background color and border in case the user does not pass any option.</p> <p>The next step is to define the plugin constructor which does all the heavy lifting and creates a few instance properties and calls init().</p> <pre class="brush: js;"> function Plugin(element, options) { this.element = element; this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } </pre> <p>Observe how the boilerplate stores the custom settings of the user in this.settings. This is done to ensure that the plugin's default settings aren't overwritten by the user's custom settings.</p> <p>The next step is the init() function which is called during initialization and contains the logic associated with the plugin initialization.</p> <pre class="brush: js;"> $.extend(Plugin.prototype, { init: function () { $(this.element).css({ 'background-color': this.settings.bgColor, 'border': this.settings.border }); } }); </pre> <p>To access the default or custom settings, we simply need to access this.settings.</p> <p>The final step is to define a really lightweight plugin wrapper around the constructor, which prevents against multiple instantiations.</p> <pre class="brush: js;"> $.fn[pluginName] = function (options) { this.each(function () { if (!$.data(this, "plugin_" + pluginName)) { $.data(this, "plugin_" + pluginName, new Plugin(this, options)); } }); // chainable jQuery functions return this; }; </pre> <p>Within the function, <i>this</i> represents the jQuery object on which your function was called. That means that when you say $("#myText").highlight(), the value of <i>this</i> refers to the jQuery object containing the result of $("#myText"). Here you are referring to just one textbox but you could always do $(‘div’).highlight() which will contain all the divs on the page. By doing this.each, you are looping over every element within <i>this</i>, and thus highlighting every div/text on the page.</p> <p>Within this.each, we check to see if the textbox object has been assigned a plugin. If yes, that means the plugin is already up and running. In case we haven't, then we create a new Plugin() object and add it to the textbox element.</p> <p>At the end of it, <i>this</i> is returned making your plug-in chainable. This means someone could do the following:</p> <pre class="brush: js;"> $("#myText").highlight().fadeOut(); </pre> <p>That’s it. Your plugin is ready to be used. Define a textbox on the page:</p> <pre class="brush: js;"><input type=""text"" id=""myText"" name=""myText"" value=""Sample"" /> </pre> <p>..and call our plugin in the following manner:</p> <pre class="brush: js;"><script type="text/javascript"> $(function () { $("#myText").highlight(); }); </script> </pre> <p>You will see that the textbox gets a background color and a border:</p> <p><img title="s8-jquery-plugin-highlight" border="0" alt="s8-jquery-plugin-highlight" width="197" height="44" src="https://www.dotnetcurry.com/images/jquery/Authoring-your-First-jQuery-Plugin_816A/s8-jquery-plugin-highlight.png" /></p> <p>An additional point I want to make here is that there are some jQuery plugins that act as Singletons. They define themselves directly on $ and do not return <i>this</i>. Eg: $.somePlugin = function(). Check the jQuery Cookie plugin for an example.</p> <p>Summarizing the pattern, some points to keep in mind are as follows:</p> <ul> <li>Always wrap your plugin in a self-invoking function</li> <li>Add a semi-colon before the function’s invocation</li> <li>Use a basic defaults object and extend the options with defaults</li> <li>Use a simple plugin constructor for defining the logic for initial creation and assignment of the DOM element to work with</li> <li>Always return the <i>this</i> keyword to maintain chainability unless you want to create a Singleton plugin</li> <li>Use a lightweight wrapper around the constructor, which helps to avoid issues such as multiple instantiations.</li> </ul> <p>With the jQuery Boilerplate Plugin and these simple guidelines in mind, we can build simple to very complex and structured plugins in no time.</p> <p><strong>Update:</strong> Here's another away to create a jQuery Plugin without using the Boilerplate template <a href="https://www.dotnetcurry.com/jquery/1109/jquery-plugin-for-running-counter"><strong>Create a jQuery Plugin to display a Running Counter</strong></a></p> <p><b>Further Reading</b>: <a title="jquery extend" rel="nofollow" target="_blank" href="http://api.jquery.com/jQuery.extend/">http://api.jquery.com/jQuery.extend/</a></p> <p><em>This article has been editorially reviewed by </em><a href="https://www.dotnetcurry.com/author/suprotim-agarwal"><em>Suprotim Agarwal.</em></a></p> <div id="csharpbook" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 articletext">  <div class="col-md-3 col-sm-3 col-xs-12"> <a href="https://www.dotnetcurry.com/csharpbook" target="_blank"><img alt="Absolutely Awesome Book on C# and .NET" src="/csharpbook/images/csharp-book-ad.jpg" /></a> </div> <div class="col-md-9 col-sm-9 col-xs-12"> <p>C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.</p> <p>We at DotNetCurry are very excited to announce <strong><a href="https://www.dotnetcurry.com/csharpbook" target="_blank">The Absolutely Awesome Book on C# and .NET</a></strong>. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle). </p><p>Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering <b>C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too</b>. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.</p> <p><strong><a href="https://www.dotnetcurry.com/csharpbook" target="_blank" style="color:#cd282f">Click here to Explore the Table of Contents or Download Sample Chapters!<a /></strong></p> </div> </div> <div class="footerheading margin-top-20">What Others Are Reading!</div> <div class="col-xs-12 col-sm-12 col-md-12 similarauthor"> <div class="row"> <div class="col-md-12 similararticles"> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1309" style="color:#4A75AD;font-weight:normal;">jQuery 3 - New Features and Performance Improvements</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1277" style="color:#4A75AD;font-weight:normal;">HTML Table and jQuery – Handy Code Snippets</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1275" style="color:#4A75AD;font-weight:normal;">jQuery Event Handling Basics - Difference between Bind, Live, Delegate and On</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1272" style="color:#4A75AD;font-weight:normal;">Select / Deselect All CheckBoxes using jQuery</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1209" style="color:#4A75AD;font-weight:normal;">jQuery UI DatePicker - Tips and Tricks</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1200" style="color:#4A75AD;font-weight:normal;">jQuery TreeView with Expand Collapse Icons</a> <br /><br /> <span id="ctl00_MainContent_SimilarPosts1_lblCategoNam"></span> </div> </div> </div>  <div class="visible-xs visible-sm visible-md visible-lg"> <div id='dnc-bot-txtad' class="articletext"> </div> </div> <div class="socialbox"> <b>Was this article worth reading? Share it with fellow developers too. Thanks!</b> <br/>  <a class="resp-sharing-button__link" id="fbsharelink" target="_blank" aria-label="Share on Facebook"> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> </g> </svg> </div>Share on Facebook</div> </a>  <a class="resp-sharing-button__link" id="twtsharelink" target="_blank" aria-label="Share on Twitter"> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> </g> </svg> </div>Share on Twitter</div> </a>  <a class="resp-sharing-button__link" id="linkdinsharelink" target="_blank" aria-label="Share on LinkedIn"> <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg> </div>Share on LinkedIn</div> </a>  <a class="resp-sharing-button__link" id="googsharelink" target="_blank" aria-label="Share on Google+"> <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M11.366,12.928c-0.729-0.516-1.393-1.273-1.404-1.505c0-0.425,0.038-0.627,0.988-1.368 c1.229-0.962,1.906-2.228,1.906-3.564c0-1.212-0.37-2.289-1.001-3.044h0.488c0.102,0,0.2-0.033,0.282-0.091l1.364-0.989 c0.169-0.121,0.24-0.338,0.176-0.536C14.102,1.635,13.918,1.5,13.709,1.5H7.608c-0.667,0-1.345,0.118-2.011,0.347 c-2.225,0.766-3.778,2.66-3.778,4.605c0,2.755,2.134,4.845,4.987,4.91c-0.056,0.22-0.084,0.434-0.084,0.645 c0,0.425,0.108,0.827,0.33,1.216c-0.026,0-0.051,0-0.079,0c-2.72,0-5.175,1.334-6.107,3.32C0.623,17.06,0.5,17.582,0.5,18.098 c0,0.501,0.129,0.984,0.382,1.438c0.585,1.046,1.843,1.861,3.544,2.289c0.877,0.223,1.82,0.335,2.8,0.335 c0.88,0,1.718-0.114,2.494-0.338c2.419-0.702,3.981-2.482,3.981-4.538C13.701,15.312,13.068,14.132,11.366,12.928z M3.66,17.443 c0-1.435,1.823-2.693,3.899-2.693h0.057c0.451,0.005,0.892,0.072,1.309,0.2c0.142,0.098,0.28,0.192,0.412,0.282 c0.962,0.656,1.597,1.088,1.774,1.783c0.041,0.175,0.063,0.35,0.063,0.519c0,1.787-1.333,2.693-3.961,2.693 C5.221,20.225,3.66,19.002,3.66,17.443z M5.551,3.89c0.324-0.371,0.75-0.566,1.227-0.566l0.055,0 c1.349,0.041,2.639,1.543,2.876,3.349c0.133,1.013-0.092,1.964-0.601,2.544C8.782,9.589,8.363,9.783,7.866,9.783H7.865H7.844 c-1.321-0.04-2.639-1.6-2.875-3.405C4.836,5.37,5.049,4.462,5.551,3.89z"/> <polygon points="23.5,9.5 20.5,9.5 20.5,6.5 18.5,6.5 18.5,9.5 15.5,9.5 15.5,11.5 18.5,11.5 18.5,14.5 20.5,14.5 20.5,11.5 23.5,11.5 "/> </g> </svg> </div>Share on Google+</div> </a>  </div> <br /> <div class="col-xs-12 col-sm-12 col-md-12 similarauthor"> <div class="row footerheading">Author</div> <div class="row"> <div class="col-md-12"> <div class="col-md-12 author-wrap img-rounded"> <div class="author-image thumbnail"> <img id="ctl00_MainContent_authorInfo_imgAuthor" onerror="this.onload = null; this.src='/images/authors/NoImage.jpg';" src="../../images/authors/Suprotim%20Agarwal.jpg" style="border-width:0px;" /> </div> <div class="author-desc caption"> Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of <a href='http://www.dotnetcurry.com'>DotNetCurry</a>, <a href='http://www.dotnetcurry.com/magazine'>DNC Magazine for Developers</a>, <a href='http://www.sqlservercurry.com' target='_blank'>SQLServerCurry</a> and <a href='http://www.devcurry.com' target='_blank'>DevCurry</a>. He has also authored a couple of books <a href='http://www.dotnetcurry.com/order/jQueryASPNETRecipesBook.aspx'>51 Recipes using jQuery with ASP.NET Controls</a> and <a href='http://www.jquerycookbook.com' target='_blank'>The Absolutely Awesome jQuery CookBook</a>.<p></p><p>Suprotim has received the prestigious <a href='https://mvp.microsoft.com/en-US/Overview'>Microsoft MVP award</a> for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.</p><p>Get in touch with him on Twitter @<a href='http://twitter.com/suprotimagarwal' target='_blank'>suprotimagarwal</a> or at <a href='https://www.linkedin.com/in/suprotimagarwal'>LinkedIn</a></p> </div> </div> </div> </div> </div> </div>  <div class="marginspace"> <div id='ban-pos-9-90'></div> <div id='ban-pos-10-90'></div> <div id='ban-pos-11-90'></div> </div> <br /><br /> <div class="col-xs-12 col-sm-12 col-md-12"> <img src="/images/copyscape.gif" alt="Page copy protected against web site content infringement by Copyscape" title="Do not copy content from the page. Plagiarism will be detected by Copyscape." height="16" border="0"/> </div> <br /><br /> <br /> <hr /> <div id="ctl00_MainContent_panComments" class="col-md-12 spacer"> <div class="footerheading">Feedback - Leave us some adulation, criticism and everything in between!</div> <ul class="tabHeader"> <li><a class="show-comments" href="#t1">Click here to post your Comments</a> </li> </ul> <div class="tabContent"> <div id="t1" class="col-md-12 column"> <div id="disqus_thread"></div>  </div> <div id="t2"> </div>  </div>  </div>   </div> <div id="rightcol" class="col-md-4">  <div class="margin-vertical-20" /> <div class="side-widget"> <div class="featured-tools"> <span>Featured Tools</span> <div id="creatives"> <div id='ban-pos-1' style='display: none'> </div> <div id='ban-pos-2'> <div class="padding-vertical-10"></div> </div> <div id='ban-pos-3'> </div> <div class="padding-vertical-10"></div> <div id='ban-pos-4-250'> </div> <div id='ban-pos-5-250'> </div> <div id='ban-pos-6-250'> </div> </div> </div> </div> <div class="sec-title"> <h4>Categories</h4> </div> <div class="side-widget"> <ul id="toggle-view"> <li> <h3>.NET Web</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-ajax">ASP.NET AJAX</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> </div> </div> </li> <li> <h3>.NET Framework, Visual Studio and C#</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a> </div> </div> </li> <li> <h3>Patterns & Practices</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> <a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a> </div> </div> </li> <li> <h3>Cloud and Mobile</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a> <a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a> <a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a> <a href="https://www.dotnetcurry.com/tutorials/windowsphone">Windows Phone</a> </div> </div> </li> <li> <h3>JavaScript</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/typescript">TypeScript</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/nodejs">Node.js</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5 & JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">Bootstrap & CSS</a> </div> </div> </li> <li> <h3>.NET Desktop</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a> </div> </div> </li> <li> <h3>Interview Questions & Product Reviews</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a> <a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/general-programming-topics">General Topics</a> </div> </div> </li> </ul> </div> <div class="sec-title"> <h3><b>JOIN OUR COMMUNITY</b></h3> </div> <div class="side-widget"> <div class="side-social"> <a href="https://www.facebook.com/dotnetcurry"><i class="fa fa-facebook"></i> 50K+ <span>fans</span></a> <a href="https://www.twitter.com/dotnetcurry"><i class="fa fa-twitter"></i> 8K+ <span>followers</span></a> <a href="https://www.dotnetcurry.com/magazine/"><i class="fa fa-envelope"></i> 128K+ <span>subscribers</span></a> </div> </div> <div class="sec-title"> <h3><b>POPULAR ARTICLES</b></h3> </div> <div id="latestart" class="side-widget"> <div> <br /> <br /> <br /> </div> </div> <div id='ban-pos-7-600'> </div> <div id='ban-pos-8-600'> </div> <div class="sec-title-plain"> <h4>Tags</h4> </div> <div class="side-widget"> <div class="tags"> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Azure</a> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular.js</a> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5</a> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> </div> </div> <div class="sec-title"> <h3><b>JQUERY COOKBOOK</b></h3> </div> <div class="side-widget"> <a href="http://www.jquerycookbook.com"><img src="https://www.dotnetcurry.com/images/books/300x300-jqckbk.png" alt="jQuery CookBook" /></a> </div> </div> </div> </div>  </div>  <footer class="margin-top-30"> <div class="container"> <div class="footer-head"> <div class="row center-content"> <div class="col-md-2 col-sm-3"> <a href="https://www.dotnetcurry.com"> <img data-src="/img/dnc-logo-tee-trans.png" class="img-responsive lazyload" alt="" /> </a> </div> <div class="col-md-6 col-sm-4"> <p></p> </div>  </div> </div> <div class="footer-content"> <div class="row"> <div class="col-sm-2"> <h5 class="text-white">Server-Side</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Client-side</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">CSS</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">.NET</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Cloud and Mobile</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/devops">DevOps</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/windowsphone">Windows Phone</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Skill Up</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a></li> <li><a href="https://www.dotnetcurry.com/magazine/" class="last">Magazines</a></li> <li><a href="http://www.jquerycookbook.com/">Books</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Follow Us</h5> <ul class="footer-social"> <li><a href="https://www.facebook.com/dotnetcurry">Facebook</a></li> <li><a href="https://www.twitter.com/dotnetcurry">Twitter</a></li> <li><a href="https://github.com/dotnetcurry">Github</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="row"> <div class="col-sm-6"> <p>© 2007-2023 DotNetCurry.com (A subsidiary of A2Z Knowledge Visuals Pvt. Ltd). All rights reserved.</p> </div> <div class="col-sm-6 text-right"> <ul class="list-inline"> <li><a href="https://www.dotnetcurry.com/Contact.aspx">Contact Us</a></li> <li><a href="https://www.dotnetcurry.com/WriteForUs.aspx">Write For Us</a></li> <li><a href="https://www.dotnetcurry.com/PrivacyPolicy.aspx">Privacy</a></li> <li><a href="https://www.dotnetcurry.com/terms-conditions">Terms</a></li> </ul> </div> </div> </div> </div> </footer>  </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js"></script> <script src="/bundles/scriptsmin?v=ztXW8lGCJchjv7iQbaTOZjTpSGfOrLg1lKllrWansXI1"></script> <script src="/bundles/framework?v=yOkBizHgoWwNt4OFd4FauUxu9fucEJ_a4EJrci8uIGA1"></script> <script type="text/javascript"> SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all() </script> <script> $(function () { $('.tabHeader').children().first().addClass('current'); $('.tabContent').children().first().addClass('current'); $('.tabHeader li').click(function (e) { e.preventDefault(); $(this).siblings('.current').removeClass('current'); $(this).addClass('current'); $('.tabContent').children('.current').removeClass('current'); $('.tabContent').children().eq($(this).index()).addClass('current'); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> <script> WebFont.load({ google: { families: ['Hind Vadodara:300,400,500,600,700'] } }); </script> </body> </html>

CINXE.COM

Authoring your First jQuery Plugin | DotNetCurry