JQuery Plugin And Public Methods

JavaScript
1

Hi guys,

I am developing a JQuery plugin for the YouTube Chromeless player and so far I have managed to get everything initialized correctly.

I have wrapped it all in a nice self invoking function, used $.each to allow for multiple instances on the page and used $.extend allowed the user to pass their own options in to override the defaults.

JQuery plugin development 101, right? There was plenty on information on how to do that kind of thing on the web.

However , being a video player, this plugin needs public access to a number of its methods so my question relates to that.

So far I have seen some really crazy looking method object syntax out there and equally strange looking ways of binding event handlers but this is my first plugin and I need to understand exactly what I have done in order to reproduce it in the future so I need something straightforward.

  1. What is the best way to declare public methods within a plugin?

  2. What is the best way to attach event handlers to fire those methods?

If I just give you some basic plugin code can anyone give me a nice clean example of how to do this? I won’t include all of my code, to keep it simple i will just post a standard JQuery Plugin Format. Thanks in advance :wink:

best regards

Silversurfer



(function($) {
   
    $.fn.ytplayer = function(options) {
      var defaults = {
        height: '358',
        width: '500'
      };
     
      var opts = $.extend(defaults, options);
      
         return this.each(function(i) {


       // plugin code here

        });
     

    };
})(jQuery);
2

I actually created a demo for this a while back which I called “The data access layer”, you can see the demo at the following link, if you go through the code it should give you an idea of one way to create public API’s that are accessed via the DOM elements.

3

Thanks Chris.upJohn

That’s a very powerful way of communicating with the plugin, I haven’t used $.data before but I shall look into it. What about the event handlers themselves, do you have any syntax that isn’t too difficult to set them up inside the plugin?

Silversurfer5150

4

Actually I can elaborate on that question. If I take the code below from JQuery.com:



  var methods = {
    init : function( options ) {
      // THIS
    },
    show : function( ) {
      // IS
    },
    hide : function( ) {
      // GOOD
    },
    update : function( content ) {
      // !!!
    }
  };

 $.fn.tooltip = function( method ) {

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

  };

How would you attach event handlers into those methods?

5

Hi,
I found very good this way:
http://www.virgentech.com/blog/2009/10/building-object-oriented-jquery-plugin.html
Bye

6

Hey thanks whisher,

That’s really cool too :wink: