Encapsulating user interface components with jQuery

Question

I am creating an application that includes the creation of several unique “widgets”, and it’s hard for me to understand the practice of encapsulating the logic of these user interface components using jQuery. These are basically disposable components that are not reused in several places in the application.

I experimented with a lowpro plugin , and although it allows more or less of what I want, I feel m goes against the "jQuery path" using it.

To provide some context, here is an abbreviated extract from what I wrote using lowpro. This is a sortable list that may include other items. When it is initialized empty, it shows a placeholder.

FieldList = $.klass({ initialize: function() { this.placeholder = $('#get-started-placeholder'); if (this.items().length == 0) { this.deactivateList(); } else { this.activateList(); } }, items: function() { return this.element.children('li:visible'); }, deactivateList: function() { this.element.hide(); this.element.sortable('destroy'); this.placeholder.show(); var instance = this; this.placeholder.droppable({ hoverClass: 'hovered', drop: function(e, ui) { instance.receiveFirstField(ui.helper); } }); }, activateList: function() { this.placeholder.hide(); this.placeholder.droppable('destroy'); this.element.show(); var instance = this; this.element.sortable({ placeholder: 'placeholder', forcePlaceholderSize: false, tolerance: 'pointer', handle: 'h4', opacity: 0.9, zIndex: 90, stop: function(e, ui) { instance.receiveField(ui.item); } }); }, receiveFirstField: function(element) { ... this.activateList(); }, receiveField: function(element) { ... } }); $(function() { $('ol#fields').attach(FieldList); } 

Please note that here I have a bit of state, and some instance methods that I would like to make private, etc. So, any jQuery profiles that can tell me how they will do this, without relying on something like lowpro, which possibly javsacript into something that shouldn't be? I have a feeling that there is a clean way to do something like this using the module template that I saw in this thread but the parts are not going for me.

Thanks!

Answer 1

Use jQuery "widget factory" user interface. This is what all other user interface widgets use (Accordion, Dialog, etc.).

There is OK, but a little confusing tutorial here . (This is the best I have found.)

Basically, you define your widget in a much more convenient jQuery way, for example:

 $.widget("ui.myCustomWidget", { _init: function(){ //initialize your function }, somethingElse: function(){ //do something else here } }); 

An underscore before a function name will make it private. You can also set widget functions in an object and access a variable if you need it:

 var foo = { _init: function(){ //yada yada }, somethingElse: function(){ //do something else here } }; $.widget("ui.myCustomWidget", foo); 

Then you simply create your widget in the same way as you create any other user interface widget:

 $('div#myWidget').myCustomWidget(); 

Tons of options and built-in jQuery tools that let you create your own widgets. Instead of making this a tutorial, I will let you read all about them yourself. Happy spread!