Is it possible to achieve the following, using jQuery: I'd like to create two different objects that have different functions with the same name.
var item = new foo();
item.doSomething();
var item2 = new bar();
item2.doSomething();
Furthermore, I'd like to be able to use the created items as "regular" jQuery objects - for example, to drag&drop the items and execute the correct doSomething() function when dragging has stopped.
We've come up with a solution to the problem. It consists of 3 separate steps: first, the initial jQuery item must be created:
var item = $.create("div");
then create an instance of the javascript object you want to create and copy all of it's functions and properties to the jQuery item:
$.extend( item, new foo.bar() );
Finally, initialize the object. Note that the constructor in previous step cannot be used for this since the "this" object is different.
item.initialize();
After this, the object $(item) can be used like a regular jQuery object, plus it has functions and local variables like a regular javascript object.
item.doSomething(); var offset = $(item).offset();
So you can make DOM objects that have a "class" that can be used by jQuery. BTW, we used DUI to create namespaces.
Hopefully someone will find the solution helpful. It made our code much nicer.
This is from Building Object-Oriented jQuery Plugins
(function($){
var MyPlugin = function(element, options){
var elem = $(element);
var obj = this;
var settings = $.extend({
param: 'defaultValue'
}, options || {});
// Public method - can be called from client code
this.publicMethod = function(){
console.log('public method called!');
};
// Private method - can only be called from within this object
var privateMethod = function(){
console.log('private method called!');
};
};
$.fn.myplugin = function(options){
return this.each(function(){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('myplugin')) return;
// pass options to plugin constructor
var myplugin = new MyPlugin(this, options);
// Store plugin object in this element's data
element.data('myplugin', myplugin);
});
};
})(jQuery);
Test usage
$('#test').myplugin();
var myplugin = $('#test').data('myplugin');
myplugin.publicMethod(); // prints "publicMethod() called!" to console
There's also a plugin based on this pattern, Tagger based on this pattern.
Not sure about the Object Orientation part, but jQuery has baked-in support for the kind of drag-and-drop capability you are describing.
Using JQuery to Add Drag and Drop Support http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx