如何在jquery插件中调用函数？

Question

(function($) { 
    $.fn.top_islides = function(){
        var ajax_init = function(){
            init_islides();
            setTimeout(function(){picmove()},300);
        };
//.....
    };  
})(jQuery);

call it in doucument ready in another file

$('#top_slides').top_islides();
$('#top_slides').top_islides().ajax_init();

I thought it should work ,I got an error, what's the problem?

Answer 1

Do it like this:

(function($) {
    //Assuming $.fn.top_islides is defined
    $.fn.top_islides.ajax_init = function(){
        init_islides();
        setTimeout(picmove,300);
    };
 //.....
})(jQuery);

Or

(function($) { 
    $.fn.top_islides = function(){
        var ajax_init = function(){
            init_islides();
            setTimeout(picmove,300);
        };
        return {
            ajax_init: ajax_init
        };
    });
     //.....
})(jQuery);

Answer 2

Try something like this as in the example below:-

<script type="text/javascript">


    $.someplugin = {
      CallMe : function() {
            alert("You called?");
        },
      otherstuff : function() { alert("other stuff!"); }
    };


    $.someplugin.CallMe();
    $.someplugin.otherstuff();
</script>

Answer 3

when using var inside a function, it will make the element "private". it's a hacky way to make visibility in Javascript work, while true class structure don't come to Javascript. You need to either set it to the prototype of your function or to return an object

(function($) { 
  $.fn.top_islides = function(){
    var ajax_init = function(){
        init_islides();
        setTimeout(function(){picmove()},300);
    };
    return {
      'ajax_init': ajax_init
    };
  //.....
  };  
 })(jQuery);

or

(function($) { 
  $.fn.top_islides = function(){
  //.....
  };
  $.fn.top_islides.prototype.ajax_init = function(){
    init_islides();
    setTimeout(function(){picmove()},300);
  }
 })(jQuery);

but in your case, you won't be using prototype, since you aren't instantiating a new top_islides object, but accessing through jQuery, so the first option is your best bet.

Answer 4

Imo, best solution is used trigger which is cleaner because you can keep the chainable plugin system.

You can declare event handler in your plugin declaration and trigger from outside:

(function($) { 
  $.fn.top_islides = function(){
    this.on ('init_islides', function(){
        setTimeout(function(){picmove()},300);
    };
  //.....
  };  
 })(jQuery);
$( "button" ).click(function () {
  $( "p" ).trigger( "init_islides");
});

DOC can be found here : http://api.jquery.com/on/