Databases
StackOverflow2013
Postsdbo
POcreating a jquery plugin with multiple functions
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcreating a jquery plugin with multiple functions
    text
    copied!<p>ok am kinda new to plugins i have used many in my projects, i have also written basic plugins that just work on elements with options:</p> <pre><code>(function($){ $.fn.pulse = function(options) { // Merge passed options with defaults var opts = jQuery.extend({}, jQuery.fn.pulse.defaults, options); return this.each(function() { obj = $(this); for(var i = 0;i&lt;opts.pulses;i++) { obj.fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh); }; // Reset to normal obj.fadeTo(opts.speed,1); }); }; // Pulse plugin default options jQuery.fn.pulse.defaults = { speed: "slow", pulses: 2, fadeLow: 0.2, fadeHigh: 1 }; })(jQuery); </code></pre> <p>the above works ok, but obviously it performs one task, ideally i would like to be able to perform multiple tasks within a plugin so i could use:</p> <pre><code>$('#div').myplugin.doThis(options); $('#div').myplugin.doThat(options; </code></pre> <p>reason being i have quite a large script which does various ajax calls to save data and query data from a database (using an external php file) I'd like to intergrate all this functionality into a plugin, but i don't know the best structure to use for it, ive looked at so many tutorials and have basically fried my brain, and i am confused as to how i should go about doing this.</p> <p>is it just a question of creating a new function like:</p> <pre><code>$.fn.pluginname.dothis = function(options){ return this.each(function() { //execute code }; }; </code></pre> <p>any pointers on this, or a template to get me started would be really helpful.</p> <p>forever in need of help!!!</p> <hr> <p>next problem:</p> <pre><code>(function($){ // Can use $ without fear of conflicts //var gmap3plugin = $.fn.gmap3plugin; var obj = this; // "this" is the jQuery object var methods = { init : function(options){ var lat = $.fn.gmap3plugin.defaults[lat]; var lng = $.fn.gmap3plugin.defaults[lng]; alert('init'+' lat:'+lat+' --- lng:'+lng); }, show : function( ) { }, hide : function( ) { }, update : function( content ) { } }; $.fn.gmap3plugin = 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' ); }; }; $.fn.gmap3plugin.defaults = { mapdiv :'#mapdiv', region : 'uk', lat : 53.4807125, lng : -2.2343765 }; })(jQuery); </code></pre> <p>this is functioning and gets the right function that is passed, but how do i access the values in the $.fn.gmap3plugin.defaults the code in my init method returns undefined for lat and lng</p> <pre><code>init : function(options){ var lat = $.fn.gmap3plugin.defaults[lat]; var lng = $.fn.gmap3plugin.defaults[lng]; alert('init'+' lat:'+lat+' --- lng:'+lng); }, </code></pre> <p>or can i not access thhe data in $.fn.gmap3plugin.defaults from a function???</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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