jQuery插件：调用其他插件方法的插件方法？

Question

I have a plugin definedlike so:

(function( $ ){
    var mymethods = {
        init: function(opts) {
            // do some wild awesome magic
            if (opts.drawtablefirst) $(this).drawtable(); // This doesn't actually work of course
        },

        drawtable: function() {
            $(this).empty().append($("<table>")); // Empty table, I know...
        }
    }

    // Trackman table
    $.fn.myplugin = function(method) {

        if (mymethods[method] ) {
            return mymethods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method ) {
            return mymethods.init.apply(this, arguments);
        }
    }
})( jQuery );

I want to be able to call the drawtable method from the init method, but that approach isn't working. I instantiate my plugin mostly like:

$("div#container").myplugin({drawtablefirst: true})

But sometimes I don't want to pass drawtablefirst and then later call it manually, like:

$("div#container").myplugin('drawtable')

What is the best way to configure this so drawtable is an accessible plugin method, but also can be called from within the plugin methods themselves such as init ?

Also, accessing the original element in drawtable via $(this) doesn't seem to work. What's the proper approach there?

Thanks.

Answer 1

this solution uses jQuery-ui 1.7+ .widget functionality, here's an excellent link to what you get for free

$.widget("notUi.myPlugin",{
 options:{
   drawtablefirst:true,
   //...any other opts you want
 },
 _create:function(){
  // do some wild awesome magic
  if (this.options.drawtablefirst){
   this.drawtable(); // This actually works now of course
  } 
 },
 //any function you do not put an underscore in front of can be called via .myPlugin("name", //args)
 drawtable: function() {
   this.element.empty().append($("<table>")); // Empty table, I know...
 }
});