SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery Plugin And Public Methods

    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

    best regards

    Silversurfer

    Code:
    (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);
    "Persistence is the path to perfection"

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.

    http://jsfiddle.net/chrisupjohn/YUfkd/

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    "Persistence is the path to perfection"

  4. #4
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I can elaborate on that question. If I take the code below from JQuery.com:

    Code:
      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?
    "Persistence is the path to perfection"

  5. #5
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I found very good this way:
    http://www.virgentech.com/blog/2009/...ry-plugin.html
    Bye

  6. #6
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by whisher View Post
    Hi,
    I found very good this way:
    http://www.virgentech.com/blog/2009/...ry-plugin.html
    Bye
    Hey thanks whisher,

    That's really cool too
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •