I'm going to try this out by adpating various existing plugins to use it. So far its a very good step in the right direction: Providing an abstraction to write plugins that can be just as simple as adding to $.fn, but with a clean API and the ability to use options, keep internal state and automatic cleanup. Especially the last one has a lot potential, as it makes every plugin much more robust by default, while hiding the details about namespaced events.
Jörn On Fri, Oct 3, 2008 at 6:41 PM, Ariel Flesler <[EMAIL PROTECTED]> wrote: > > I like it. It's positive to keep working with names like setup and > teardown (from events). > > -- > Ariel Flesler > http://flesler.blogspot.com > > On Oct 3, 11:27 am, "John Resig" <[EMAIL PROTECTED]> wrote: >> Hi Guys - >> >> At the Ajax Experience we talked about possibly making a reusable function >> for helping to encapsulate much of the functionality commonly seen in jQuery >> plugins. >> >> The important points seemed to be: >> - Plugins need a way to maintain state from one call to the next (generally >> in the form of 'options'). >> - The state needs to be directly associated with the elements that they're >> called on >> - There needs to be a default set of options to load state from >> - Plugins need to clean-up any events or data that they bind to an element >> - All methods introduced by a plugin should have access to the same state >> >> I put my code up >> here:http://dev.jquery.com/~john/plugins/widget/http://dev.jquery.com/~john/plugins/widget/widget.js >> >> This is how you would use it: >> >> The most basic call: Adds a single method (.test()) whose 'this' represents >> an individual element wrapped in a jQuery set. An empty options object is >> provided, as well. >> >> jQuery.plugin("test", function(a, b){ >> this.options = a; >> this.hide(b); >> >> }); >> >> jQuery("div").test("woo", "slow"); >> >> Equivalent to the first style shown above. >> >> jQuery.plugin("test", { >> setup: function(a, b){ >> this.options = a; >> this.hide(b); >> } >> >> }); >> >> jQuery("div").test("woo", "slow"); >> >> Next step up: A default set of options is provided - which implies that the >> first argument to .test() will be an options object. >> >> jQuery.plugin("test", { >> options: { speed: "slow" }, >> setup: function(){ >> this.hide( this.options.speed ); >> } >> >> }); >> >> jQuery("div").test({ speed: "fast" }); >> >> Add in some related methods (related to the root setup method) that also >> have access to the instance and options. >> >> jQuery.plugin("test", { >> options: { speed: "slow" }, >> setup: function(){ >> this.hide( this.options.speed ); >> }, >> methods: { >> test2: function(){ >> this.show( this.options.speed ); >> } >> } >> >> }); >> >> jQuery("div").test({ speed: "fast" }).test2(); >> >> Remove some functionality added previously: >> >> jQuery.plugin("test", { >> options: { name: "test" }, >> setup: function(){ >> this.addClass( this.options.name ); >> }, >> teardown: function(){ >> this.removeClass( this.options.name ); >> } >> >> }); >> >> jQuery("div").test({ name: "blah" }); >> >> and the cleanup is triggered by (where 'test' is the name of the plugin that >> you wish to remove): >> >> jQuery("div").trigger("remove.test"); >> >> It's not completely clear yet what will happen with the above plugin - I >> just wanted to put it out there since there was some interest in seeing it. >> >> --John > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery Development" group. To post to this group, send email to jquery-dev@googlegroups.com 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 -~----------~----~----~----~------~----~------~--~---
