Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
852 views
in Technique[技术] by (71.8m points)

creating a jquery plugin with multiple functions

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:

(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<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); 

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:

$('#div').myplugin.doThis(options);
$('#div').myplugin.doThat(options;

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.

is it just a question of creating a new function like:

$.fn.pluginname.dothis = function(options){
        return this.each(function() {
            //execute code
        };
   };

any pointers on this, or a template to get me started would be really helpful.

forever in need of help!!!


next problem:

(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);

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

init : function(options){
    var lat = $.fn.gmap3plugin.defaults[lat];
    var lng = $.fn.gmap3plugin.defaults[lng];
    alert('init'+' lat:'+lat+' --- lng:'+lng);
},

or can i not access thhe data in $.fn.gmap3plugin.defaults from a function???

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Following Samuel's answer, you can also use the following to avoid double handling the function names:

(function($) {
    $.fn.myplugin = function(options, param) {
        if( typeof(this[options]) === 'function' ) {
            this[options](param);
        }
        // do default action

        this.function1 = function() {
            //do something
        }

        this.function2 = function(param) {
            //do something else (with a parameter)
        }
    }    
}

The addition of the param variable allows you to call functions like below:

$.myplugin(); // does default behaviour
$.myplugin('function1'); // run function 1
$.myplugin('function2'); // run function 2
$.myplugin('function2',{ option1 : 4, option2 : 6 }); // run function 2 with a parameter object

See http://jsfiddle.net/tonytlwu/ke41mccd/ for a demo.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...