jquery-dev

[Prev] Thread [Next]  |  [Prev] Date [Next]

[jquery-dev] Re: Question on writing a jQuery plugin Samer Wed Jun 24 05:00:52 2009

@tres
Nice plugin

On Jun 23, 7:34 pm, tres <[EMAIL PROTECTED]> wrote:
> Check this 
> thread:http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb8...
>
> I've written a plugin to allow you to call methods as they should be
> called on a plugin while still using 'this' to refer to the DOM
> collection inside the plugin as you would in jQuery. There are a few
> examples there, but you can email me if you have any questions, given
> that you decide to use it. It's a similar approach to samer's, but it
> does a lot of the setup work involved for you.
>
> @Damir Zekić
>
> Chaining in jQuery isn't necessarily a "convention" per say, but it is
> a good practice to do so when practical. To put it in context, if you
> do namespace your plugin it might be better to return an instance of
> the plugin in certain methods rather than jQuery. Alternatively, the
> method might return a scalar value, etc.
>
> $('div').myPlugin().moveRight().moveLeft() might be more efficient in
> the long run than $('div').myPlugin().moveRight().myPlugin().moveLeft
> (), but it all depends on how you design the API to be used.
>
> The plugin for writing plugins that I give in the thread linked to
> above explains that 'this' within the context of the plugin refers to
> the selected DOM elements as it would in jQuery, which brings a lot of
> flexibility into plugin namespacing.
>
> --
> Trey
>
> On Jun 24, 2:50 am, Bob Spryn <[EMAIL PROTECTED]> wrote:
>
> > Cool. Good suggestion. Very smart.
>
> > Thanks,
> > Bob
>
> > On Jun 23, 2:48 am, samer <[EMAIL PROTECTED]> wrote:
>
> > > It's not wrong, but to save you all the lines in the switch you could
> > > implement your functions (init, advance, ...) in an object like
> > > var jMyPlugin = { init: function()....
>
> > > or
>
> > > jMyPlugin.prototype.init
>
> > > or whatever
>
> > > so then your switch case could be replaced with
> > >                  } else if (typeof options === "string"){
> > >                          jMyPlugin[option];
> > >                  }
>
> > > On Jun 23, 2:26 am, Bob Spryn <[EMAIL PROTECTED]> wrote:
>
> > > > So here's what I've done and it seems to be working pretty well. Let
> > > > me know if I'm doing anything weird. (I'm going to provide access to
> > > > the default options object publicly at some point, but its working for
> > > > now)
>
> > > > //Simple screen wizard plugin
> > > > ;(function($) {
> > > >         $.fn.screenWizard = function (options) {
>
> > > >                 var defaultOptions = {
> > > >                         size : "100",
> > > >                         duration : 1000,
> > > >                         defaultLeft : 0
> > > >                 };
>
> > > >                 if (typeof options === "object") {
> > > >                         return init(this, options);
> > > >                 } else if (typeof options === "string"){
> > > >                         switch (options) {
> > > >                                 case "advance":
> > > >                                         return advance(this);
> > > >                                         break;
> > > >                                 case "back":
> > > >                                         return back(this);
> > > >                                         break;
> > > >                                 case "reset":
> > > >                                 default:
> > > >                                         return reset(this);
> > > >                                         break;
>
> > > >                         }
> > > >                 }
>
> > > >                 function init(obj, options){
> > > >                         obj.settings = $.extend(defaultOptions, 
> > > > options);
> > > >                         return obj.each(function(){});
> > > >                 };
>
> > > >                 function advance(obj){
> > > >                         return obj.each(function(){
> > > >                                 var current = 
> > > > parseInt($(obj).css("left"));
> > > >                                 $(this).animate({left: (current - 
> > > > obj.settings.size) + "px"},
> > > > obj.settings.duration);
> > > >                         });
> > > >                 };
>
> > > >                 function back(obj){
> > > >                         return obj.each(function(){
> > > >                                 var current = 
> > > > parseInt($(obj).css("left"));
> > > >                                 $(this).animate({left: (current + 
> > > > obj.settings.size) + "px"},
> > > > obj.settings.duration);
> > > >                         });
> > > >                 };
>
> > > >                 function reset(obj){
> > > >                         return obj.each(function(){
> > > >                                 $(this).animate({left: 
> > > > obj.settings.defaultLeft },
> > > > obj.settings.duration);
> > > >                         });
> > > >                 };
>
> > > >         };
>
> > > > })(jQuery);
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"jQuery Development" group.
To post to this group, send email to [EMAIL PROTECTED]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---