How to expand the widget to include new features?

Question

Imagine that we are creating a jQuery widget. We use jquery.ui.widget for the task. We want to create a simple square div with red borders. Well, let this be our foundation for any future advanced widgets.

(function ($) { $.widget('ns.redsquare', { _create: function () { var elem = this.element; elem.css({ width: 100, height: 100, border: 'solid 1px red' }); $(this.element).appendTo('body'); } // probably a lot of other functionality follows } $(document).ready(function () { $('<div/>').redsquare(); }); })(jQuery); 

So the future has come. We want to expand our red square so that it contains a square div with green borders. Of course, the child should be slightly smaller than the parent. Question: " How to expand the widget to include new features? ". That is, how do we extend (do not change the source code) our red square to help our green square have a parent? The red square code should remain intact; the green square should have its own code, but include all the features that the red square can offer.

NOTE. The widget example presented here is not real; this is another unfortunately my example.

Answer 1

Use the subclassification process here .