Widget multiextend

by mestevez85

HTML

<DIV ID='obj1'></DIV>
<DIV ID='obj2'></DIV>

JavaScript

(function($){

$.widget('uitest.base', {
	options: {
		base: true
	},
	
	/**
	 *
	 */
	_create: function() {
	}
});

$.widget('uitest.subbase1', $.uitest.base, {
	options: {
		subbase1: true
	},
    
    attrBase : null,
	
	/**
	 *
	 */
	_create: function() {
		this._super();
	},
    
    getBase: function() {
        return this.attrBase;
    },
    
    setBase: function(attrBase) { 
         this.attrBase = attrBase;
    }
});

$.widget('uitest.subbase2', $.uitest.base, {
	options: {
		subbase2: true
	},
    
	/**
	 *
	 */
	_create: function() {
		this._super();
	}
});

$.widget('uitest.obj1', $.uitest.subbase1, {
	options: {
		obj1: true
	},
	
	/**
	 *
	 */
	_create: function() {
		this._super();
	}
});

$.widget('uitest.obj2', $.uitest.subbase2, {
	options: {
		obj2: true
	},
	
	/**
	 *
	 */
	_create: function() {
        this._super();
        
        this.element.subbase1(this.options);                                
        $.extend(this.options, this.element.subbase1("option"));        
        $.extend(this, this.element.data("uitest-subbase1"));        		
	}
});

})(jQuery);

console.clear();
var obj1 = $("#obj1").obj1();
var obj2 = $("#obj2").obj2();
obj1.obj1("setBase", "a");
obj2.obj2("setBase", "b");
console.log("obj1", obj1.obj1("getBase"));
console.log("obj2", obj2.obj2("getBase"));