Note that there are some explanatory texts on larger screens.

plurals
  1. PORecommend design pattern for jQuery plugins - Pass options or method?
    primarykey
    data
    text
    <p>The jQuery documentation recommends having default values for a plugin, and allowing the user to send any custom values. To do so, the user passes the custom values as an object using <code>$.fn.tooltip = function( options ) {}</code>. Makes sense to me.</p> <p>Then later in the same article, they recommend collecting all of the plugin's methods in an object literal called methods, and calling a given method by passing the string name of the method such as <code>$.fn.tooltip = function( method ) {}</code>.</p> <p>So, am I sending options or method to <code>$.fn.tooltip = function( ? ) {}</code>?</p> <p>Also, why is the methods object declared outside the plugin?</p> <p>SOURCE: <a href="http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Authoring#Defaults_and_Options</a></p> <pre><code>(function( $ ){ $.fn.tooltip = function( options ) { // Create some defaults, extending them with any options that were provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery ); </code></pre> <p>SOURCE: <a href="http://docs.jquery.com/Plugins/Authoring#Plugin_Methods" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Authoring#Plugin_Methods</a></p> <pre><code>(function( $ ){ var methods = { init : function( options ) { // THIS }, show : function( ) { // IS }, hide : function( ) { // GOOD }, update : function( content ) { // !!! } }; $.fn.tooltip = function( method ) { // Method calling logic 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 exist on jQuery.tooltip' ); } }; })( jQuery ); // calls the init method $('div').tooltip(); // calls the init method $('div').tooltip({ foo : 'bar' }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload