How to create a jQuery plugin with methods

Question

I m trying to write a jQuery plugin that will provide additional functions methods to the object that calls it  All the tutorials I read online  have been browsing for the past 2 hours  include  at the most  how to add options  but not additional functions   Here s what I am looking to do     format div to be a message container by calling the plugin for that div      mydiv   messagePlugin        mydiv   messagePlugin   saySomething  hello      or something along those lines  Here s what it boils down to  I call the plugin  then I call a function associated with that plugin  I can t seem to find a way to do this  and I ve seen many plugins do it before   Here s what I have so far for the plugin   jQuery fn messagePlugin   function       return this each function        alert this              i tried to do this  but it does not seem to work   jQuery fn messagePlugin saySomething   function message         this  html message            How can I achieve something like that   Thank you     Update Nov 18  2013  I ve changed the correct answer to that of Hari s following comments and upvotes

User · Answer

Here I want to suggest steps to create simple plugin with arguments.

_x000D_

(function($) {_x000D_
  $.fn.myFirstPlugin = function(options) {_x000D_
    // Default params_x000D_
    var params = $.extend({_x000D_
      text     : 'Default Title',_x000D_
      fontsize : 10,_x000D_
    }, options);_x000D_
    return $(this).text(params.text);_x000D_
  }_x000D_
}(jQuery));_x000D_
_x000D_
$('.cls-title').myFirstPlugin({ text : 'Argument Title' });

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<h1 class="cls-title"></h1>

_x000D_

Here, we have added default object called params and set default values of options using extend function. Hence, If we pass blank argument then it will set default values instead otherwise it will set.

Read more: How to Create JQuery plugin

User · Answer

The following plugin-structure utilizes the jQuery-data  -method to provide a public interface to internal plugin-methods -settings  while preserving jQuery-chainability        function    window  undefined       const defaults         elementId     null      shape          square       color          aqua       borderWidth    10px       borderColor    DarkGray            fn myPlugin   function options           settings  e g         var settings     extend     defaults  options           private methods  e g       var setBorder   function color  width                  settings borderColor   color        settings borderWidth   width                  drawShape                var drawShape   function                            settings elementId  attr  class   settings shape          center                   settings elementId  css            background-color   settings color           border   settings borderWidth     solid     settings borderColor                               settings elementId  html settings color         settings shape                           return this each function        jQuery chainability               set stuff on ini  e g         settings elementId     this  attr  id           drawShape              PUBLIC INTERFACE           gives us stuff like                                  data  myPlugin   myPublicPluginMethod                   var myPlugin             element    this              access private plugin methods  e g            setBorder  function color  width                      setBorder color  width             return this element     To ensure jQuery chainability                        access plugin settings  e g            color  function               return settings color                                access setting  shape           shape  function               return settings shape                             inspect settings          inspectSettings  function               msg    inspecting settings for element      settings elementId                      msg      n--- shape       settings shape                  msg      n--- color       settings color                  msg      n--- border       settings borderWidth     solid     settings borderColor                  return msg                                       do stuff on element  e g             change  function shape  color                      settings shape   shape            settings color   color            drawShape                 return this element     To ensure jQuery chainability                             this  data  myPlugin   myPlugin              return this each          myPlugin   jQuery      Now you can call internal plugin-methods to access or modify plugin data or the relevant element using this syntax             data  myPlugin   myPublicPluginMethod       As long as you return the current element  this  from inside your implementation of myPublicPluginMethod   jQuery-chainability  will be preserved - so the following works               data  myPlugin   myPublicPluginMethod   css  color    red   html             Here are some examples  for details checkout this fiddle       initialize plugin on elements  e g       shape1   myPlugin  shape   square   color   blue   borderColor   SteelBlue         shape2   myPlugin  shape   rectangle   color   red   borderColor    ff4d4d         shape3   myPlugin  shape   circle   color   green   borderColor   LimeGreen         calling plugin methods to read element specific plugin settings  console log     shape1   data  myPlugin   inspectSettings         console log     shape2   data  myPlugin   inspectSettings         console log     shape3   data  myPlugin   inspectSettings               calling plugin methods to modify elements  e g       OMG  And they are chainable too        shape1   data  myPlugin   change  circle    green   fadeOut 2000  fadeIn 2000             shape1   data  myPlugin   setBorder  LimeGreen    30px         shape2   data  myPlugin   change  rectangle    red         shape2   data  myPlugin   setBorder   ff4d4d    40px   css      width    350px      font-size    2em      slideUp 2000  slideDown 2000                      shape3   data  myPlugin   change  square    blue   fadeOut 2000  fadeIn 2000          shape3   data  myPlugin   setBorder  SteelBlue    30px        etc

User · Answer

According to the jQuery Plugin Authoring page  http   docs jquery com Plugins Authoring   it s best not to muddy up the jQuery and jQuery fn namespaces  They suggest this method    function            var methods             init   function options                        show   function              IS         hide   function            GOOD         update   function  content                            fn tooltip   function methodOrOptions            if   methods methodOrOptions                  return methods  methodOrOptions   apply  this  Array prototype slice call  arguments  1               else if   typeof methodOrOptions      object       methodOrOptions                    Default to  init              return methods init apply  this  arguments              else                 error   Method      methodOrOptions     does not exist on jQuery tooltip                                jQuery      Basically you store your functions in an array  scoped to the wrapping function  and check for an entry if the parameter passed is a string  reverting to a default method   init  here  if the parameter is an object  or null    Then you can call the methods like so        div   tooltip       calls the init method    div   tooltip       calls the init method   foo    bar         div   tooltip  hide       calls the hide method    div   tooltip  update    This is the new tooltip content        calls the update method   Javascripts  arguments  variable is an array of all the arguments passed so it works with arbitrary lengths of function parameters

User · Answer

Here is my bare-bones version of this  Similar to the ones posted before  you would call like       myDiv   MessagePlugin   yourSettings   here                 MessagePlugin  saySomething   Hello World       -or access the instance directly   plugin MessagePlugin   elem       myDiv   MessagePlugin    var instance    elem data  plugin MessagePlugin    instance saySomething  Hello World       MessagePlugin js    function          function MessagePlugin element settings      The Plugin         this  elem   element          this  settings   settings          this settings     extend this  default settings              MessagePlugin prototype        The Plugin prototype          default                message   Generic message                     initialize  function              saySomething  function message               message   message    this  default message              return this  elem html message                           fn MessagePlugin   function settings      The Plugin call          var instance   this data  plugin MessagePlugin       Get instance          if instance   undefined      Do instantiate if undefined             settings   settings                    this data  plugin MessagePlugin  new MessagePlugin this settings                return this                     if   isFunction MessagePlugin prototype settings        Call method if argument is name of method             var args   Array prototype slice call arguments      Get the arguments as Array             args shift       Remove first argument  name of method              return MessagePlugin prototype settings  apply instance  args      Call the method                       Do error handling          return this            jQuery

User · Answer

I got it from jQuery Plugin Boilerplate  Also described in jQuery Plugin Boilerplate  reprise     jQuery Plugin Boilerplate    A boilerplate for jumpstarting jQuery plugins development    version 1 1  May 14th  2011    by Stefan Gabos     remember to change every instance of  pluginName  to the name of your plugin   function              here we go        pluginName   function element  options            plugin s default options        this is private property and is accessible only from inside the plugin     var defaults              foo   bar               if your plugin is event-driven  you may provide callback capabilities            for its events  execute these functions before or after events of your            plugin  so that users may customize those particular events without            changing the plugin s code         onFoo  function                     to avoid confusions  use  plugin  to reference the        current instance of the object     var plugin   this          this will hold the merged default  and user-provided options        plugin s properties will be available through this object like         plugin settings propertyName from inside the plugin or        element data  pluginName   settings propertyName from outside the plugin         where  element  is the element the plugin is attached to      plugin settings           var  element     element      reference to the jQuery version of DOM element     element   element     reference to the actual DOM element         the  constructor  method that gets called when the object is created     plugin init   function             the plugin s final properties are the merged default and        user-provided options  if any      plugin settings     extend     defaults  options           code goes here              public methods       these methods can be called like        plugin methodName arg1  arg2      argn  from inside the plugin or       element data  pluginName   publicMethod arg1  arg2      argn  from outside       the plugin  where  element  is the element the plugin is attached to         a public method  for demonstration purposes only - remove it     plugin foo public method   function            code goes here                 private methods         these methods can be called only from inside the plugin like          methodName arg1  arg2      argn           a private method  for demonstration purposes only - remove it       var foo private method   function                 code goes here                  fire up the plugin          call the  constructor  method      plugin init                     add the plugin to the jQuery fn object        fn pluginName   function options                iterate through the DOM elements we are attaching the plugin to         return this each function                   if plugin has not already been attached to the element           if  undefined      this  data  pluginName                        create a new instance of the plugin                  pass the DOM element and the user-provided options as arguments               var plugin   new   pluginName this  options                     in the jQuery version of the element                  store a reference to the plugin object                  you can later access the plugin and its methods and properties like                  element data  pluginName   publicMethod arg1  arg2      argn  or                  element data  pluginName   settings propertyName                 this  data  pluginName   plugin                                         jQuery

User · Answer

The problem with the currently selected answer is that you re not actually creating a new instance of the custom plugin for every element in the selector like you think you re doing    you re actually only creating a single instance and passing in the selector itself as the scope   View this fiddle for a deeper explanation   Instead  you ll need to loop through the selector using jQuery each and instantiate a new instance of the custom plugin for every element in the selector   Here s how    function           var CustomPlugin   function  el  options             this  defaults                 randomizer  Math random                       this  options     extend true      this  defaults  options            this options   function options                return  options                      extend true  this  options  options                    this  options                      this move   function                  el css  margin-left   this  options randomizer   100                             fn customPlugin   function methodOrOptions             var method    typeof methodOrOptions      string     methodOrOptions   undefined           if  method                var customPlugins                    function getCustomPlugin                     var  el              this                   var customPlugin    el data  customPlugin                     customPlugins push customPlugin                              this each getCustomPlugin                var args       arguments length  gt  1    Array prototype slice call arguments  1    undefined              var results                    function applyMethod index                    var customPlugin   customPlugins index                    if   customPlugin                        console warn    customPlugin not instantiated yet                        console info this                       results push undefined                       return                                     if  typeof customPlugin method       function                         var result   customPlugin method  apply customPlugin  args                       results push result                     else                       console warn  Method       method       not defined in   customPlugin                                                 this each applyMethod                return  results length  gt  1    results   results 0             else               var options    typeof methodOrOptions      object     methodOrOptions   undefined               function init                     var  el              this                   var customPlugin   new CustomPlugin  el  options                     el data  customPlugin   customPlugin                              return this each init                         jQuery     And a working fiddle   You ll notice how in the first fiddle  all divs are always moved to the right the exact same number of pixels  That is because only one options object exists for all elements in the selector   Using the technique written above  you ll notice that in the second fiddle  each div is not aligned and is randomly moved  excluding the first div as it s randomizer is always set to 1 on line 89   That is because we are now properly instantiating a new custom plugin instance for every element in the selector  Every element has its own options object and is not saved in the selector  but in the instance of the custom plugin itself   This means that you ll be able to access the methods of the custom plugin instantiated on a specific element in the DOM from new jQuery selectors and aren t forced to cache them  as you would be in the first fiddle   For example  this would return an array of all options objects using the technique in the second fiddle  It would return undefined in the first      div   customPlugin       div   customPlugin  options       would return an array of all options objects   This is how you would have to access the options object in the first fiddle  and would only return a single object  not an array of them   var divs      div   customPlugin    divs customPlugin  options       would return a single options object     div   customPlugin  options       would return undefined  since it s not a cached selector   I d suggest using the technique above  not the one from the currently selected answer

User · Answer

According to jquery standard you can create plugin as follow    function             methods starts here         var methods             init   function method options                 this loadKeywords settings     extend     this loadKeywords defaults  options                methods method  apply  this  Array prototype slice call  arguments  1                   loadkeywordbase   this                      show   function                   your code here                                     getData   function                  your code here                                      do not put semi colon here otherwise it will not work in ie7       end of methods        main plugin function starts here          fn loadKeywords   function options method            if  methods method                 return methods method  apply this  Array prototype slice call                      arguments  1              else if  typeof method      object      method                return methods init apply this  arguments             else                 error  Method     method     does not ecw-Keywords                           fn loadKeywords defaults                 keyName       Messages               Options       1               callback                   fn loadKeywords settings             end of plugin keyword function      jQuery     How to call this plugin   1    your element   loadKeywords  show    callback  callbackdata  keyName   myKey        show   will be called   Reference  link

User · Answer

You can do    function        var YourPlugin   function element  option        var defaults             default value            this option     extend     defaults  option       this  element     element       this init           YourPlugin prototype         init  function            show  function              another functions          fn yourPlugin   function option        var arg   arguments          options   typeof option     object   amp  amp  option       return this each function           var  this     this             data    this data  yourPlugin           if   data   this data  yourPlugin    data   new YourPlugin this  options           if  typeof option      string             if  arg length  gt  1              data option  apply data  Array prototype slice call arg  1              else             data option                                          In this way your plugins object is stored as data value  in your element     Initialization without option     myId   yourPlugin       Initialization with option     myId   yourPlugin        your option         call show method     myId   yourPlugin  show

User · Answer

Try this one     fn extend    calendar  function        console log this       var methods                  add  function   console log  add    return this                 init  function   console log  init    return this                 sample  function   console log  sample    return this               methods init       you can call any method inside     return methods          fn calendar      caller or    fn calendar   sample   add   sample              call methods

User · Answer

A simpler approach is to use nested functions  Then you can chain them in an object-oriented fashion  Example   jQuery fn MyPlugin   function       var  this   this    var a   1     jQuery fn MyPlugin DoSomething   function           var b   a      var c   2       jQuery fn MyPlugin DoSomething DoEvenMore   function               var d   a        var e   c        var f   3        return  this              return  this          return this       And here s how to call it   var pluginContainer       divSomeContainer    pluginContainer MyPlugin    pluginContainer MyPlugin DoSomething    pluginContainer MyPlugin DoSomething DoEvenMore      Be careful though  You cannot call a nested function until it has been created  So you cannot do this   var pluginContainer       divSomeContainer    pluginContainer MyPlugin    pluginContainer MyPlugin DoSomething DoEvenMore    pluginContainer MyPlugin DoSomething      The DoEvenMore function doesn t even exist because the DoSomething function hasn t been run yet which is required to create the DoEvenMore function  For most jQuery plugins  you really are only going to have one level of nested functions and not two as I ve shown here  Just make sure that when you create nested functions that you define these functions at the beginning of their parent function before any other code in the parent function gets executed   Finally  note that the  this  member is stored in a variable called   this   For nested functions  you should return   this  if you need a reference to the instance in the calling client  You cannot just return  this  in the nested function because that will return a reference to the function and not the jQuery instance  Returning a jQuery reference allows you to chain intrinsic jQuery methods on return

User · Answer

I think this might help you      x000D   x000D   function         x000D     x000D        fn highlight   function  options     x000D     x000D             This is the easiest way to have default options  x000D          var settings     extend   x000D                 These are the defaults  x000D              color    000   x000D              backgroundColor   yellow  x000D             options    x000D     x000D             Highlight the collection based on the settings variable  x000D          return this css   x000D              color  settings color  x000D              backgroundColor  settings backgroundColor x000D              x000D     x000D         x000D     x000D     jQuery     x000D   x000D   x000D    In the above example i had created a simple jquery highlight plugin I had shared an article in which i had discussed about How to Create Your Own jQuery Plugin from Basic to Advance  I think you should check it out    http   mycodingtricks com jquery how-to-create-your-own-jquery-plugin

User · Answer

What you did is basically extending jQuery fn messagePlugin object by new method  Which is useful but not in your case   You have to do is using this technique  function methodA args   this    refers to object      function saySomething message   this html message    to first function    jQuery fn messagePlugin   function opts      if opts   methodA   methodA call this     if opts   saySomething   saySomething call this  arguments 0       arguments is an array of passed parameters   return this each function        alert this               But you can accomplish what you want I mean there is a way to do     mydiv   messagePlugin   saySomething  hello    My friend he started writing about lugins and how to extend them with your chainf of functionalities here is the link to his blog

User · Answer

What about using triggers  Does anyone know any drawback using them  The benefit is that all internal variables are accessible via the triggers  and the code is very simple   See on jsfiddle   Example usage   lt div id  mydiv  gt This is the message container    lt  div gt    lt script gt      var mp       mydiv   messagePlugin            the plugin returns the element it is called on     mp trigger  messagePlugin saySomething    hello            so defining the mp variable is not needed            mydiv   trigger  messagePlugin repeatLastMessage     lt  script gt    Plugin  jQuery fn messagePlugin   function          return this each function              var lastmessage               this     this             this on  messagePlugin saySomething   function e  message                lastmessage   message              saySomething message                         this on  messagePlugin repeatLastMessage   function e                repeatLastMessage                         function saySomething message                 this html   lt p gt     message     lt  p gt                        function repeatLastMessage                  this append   lt p gt Last message was      lastmessage     lt  p gt

User · Answer

Too late but maybe it can help someone one day   I was in the same situation like  creating a jQuery plugin with some methods  and after reading some articles and some tires I create a jQuery plugin boilerplate  https   github com acanimal jQuery-Plugin-Boilerplate    In addition  I develop with it a plugin to manage tags  https   github com acanimal tagger js  and wrote a two blog posts explaining step by step the creation of a jQuery plugin  http   acuriousanimal com blog 2013 01 15 things-i-learned-creating-a-jquery-plugin-part-i

User · Answer

Following is a small plug-in to have warning method for debugging purpose  Keep this code in jquery debug js file  JS   jQuery fn warning   function        return this each function           alert  Tag Name        this  prop  tagName                        HTML    lt html gt      lt head gt         lt title gt The jQuery Example lt  title gt          lt script type    text javascript            src    http   ajax googleapis com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt          lt script src    jquery debug js  type    text javascript  gt  lt  script gt          lt script type    text javascript  language    javascript  gt             document  ready function                    div   warning                   p   warning                        lt  script gt       lt  head gt       lt body gt         lt p gt This is paragraph lt  p gt         lt div gt This is division lt  div gt      lt  body gt    lt  html gt

User · Answer

jQuery has made this a lot easier with the introduction of the Widget Factory   Example     widget   myNamespace myPlugin          options               Default options              create  function                Initialization logic here                Create a public method      myPublicMethod  function  argument                                   Create a private method       myPrivateMethod  function  argument                                 Initialization       my-element   myPlugin        my-element   myPlugin   defaultValue 10       Method calling       my-element   myPlugin  myPublicMethod   20      This is how the jQuery UI library is built

User · Answer

What about this approach  jQuery fn messagePlugin   function        var selectedObjects   this      return                saySomething   function message                                   selectedObjects  each function                                      this  html message                                                                   return selectedObjects     Preserve the jQuery chainability                                              anotherAction   function                                                                        return selectedObjects                                                    Usage     p   messagePlugin   saySomething  I am a Paragraph   css  color    red     The selected objects are stored in the messagePlugin closure  and that function returns an object that contains the functions associated with the plugin  the in each function you can perform the desired actions to the currently selected objects  You can test and play with the code here  Edit  Updated code to preserve the power of the jQuery chainability

User · Answer

This can actually be made to work in a  nice  way using defineProperty  Where  nice  means without having to use    to get plugin namespace nor having to pass function name by string   Compatibility nit  defineProperty doesn t work in ancient browsers such as IE8 and below  Caveat    fn color blue apply foo  args  won t work  you need to use foo color blue apply foo  args    function   color color        return this css  color   color      function   color blue         return this css  color    blue       Object defineProperty   fn   color         enumerable  true      get  function                 var self   this           var ret   function     return   color apply self  arguments             ret blue   function     return   color blue apply self  arguments              return ret                 foo   color   f00        bar   color blue      JSFiddle link

User · Answer

Here s the pattern I have used for creating plugins with additional methods   You would use it like      selector   myplugin    key   value         or  to invoke a method directly      selector   myplugin   mymethod1    argument       Example     function             fn extend           myplugin  function options arg                if  options  amp  amp  typeof options      object                     options     extend        myplugin defaults  options                                  this creates a plugin for each element in                the selector or runs the function once per                selector   To have it do so for just the                first element  once   return false after                creating the plugin to stop the each iteration              this each function                     new   myplugin this  options  arg                                return                           myplugin   function  elem  options  arg              if  options  amp  amp  typeof options      string                if  options     mymethod1                    myplugin method1  arg                            else if  options     mymethod2                    myplugin method2  arg                            return                        normal plugin actions             function myplugin method1 arg                           do method1 with this and arg                    function myplugin method2 arg                           do method2 with this and arg                          myplugin defaults                           jQuery

User · Answer

Here is how I do it     function            fn gridview   function  options                                          var factory   new htmlFactory        factory header                             jQuery       var htmlFactory   function           header      this header   function object          console log object

[javascript] How to create a jQuery plugin with methods?

Examples related to javascript

Examples related to jquery

Examples related to jquery-plugins

Examples related to javascript-framework