创建一个具有多个功能的jQuery插件 [英] 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;

原因是我有一个很大的脚本，该脚本执行各种ajax调用以从数据库中保存数据和查询数据(使用外部php文件)我想将所有这些功能集成到一个插件中，但是我不愿意我知道最适合使用的结构，我看了这么多教程，基本上已经动了脑筋，我对应该如何去做感到困惑.

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.

永远需要帮助！

下一个问题:

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

这正在起作用并获得正确的传递函数， 但是我如何访问$ .fn.gmap3plugin.defaults中的值 我的init方法中的代码为lat和lng返回未定义

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);
},

或者我不能从函数访问$ .fn.gmap3plugin.defaults中的数据吗?

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

推荐答案

如果您看一下其他一些jQuery插件和jQuery UI的设计，它们所做的是它们具有单个功能$('#div').myplugin({options})，然后它们可以通过传递字符串而不是对象$('#div').myplugin('performdifferenttask')来执行不同的功能，而对象$('#div').myplugin('performdifferenttask')可以依次调用对用户隐藏的帮助函数.

If you look at the design of some of the other jQuery plugins and jQuery UI, what they do is they have a single function $('#div').myplugin({options}), and then they can do different functions by passing a string instead of an object $('#div').myplugin('performdifferenttask') which can in turn call a helper function that is hidden from the user.

例如，请查看 http://jqueryui.com/demos/progressbar/#methods

以下是一个有望减轻您的困惑的示例:

Here is an example that will hopefully alleviate your confusion:

(function($) {
    $.fn.myplugin = function(options) {
        if(options == 'function1')
            function1();
        else if(options == 'function2')
            function2();
        else {
            //do default action
        }
    }

    function function1() {
        //do something
    }

    function function2() {
        //do something else
    }
}

然后使用:

$.myplugin({option1: 4, option2: 6}); //does default behavior
$.myplugin('function1'); //calls function1()
$.myplugin('function2'); //calls function2()

这篇关于创建一个具有多个功能的jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！