Widget function not being overridden by options
My widget function isn't getting overridden by the options I pass in. What am I doing wrong?
And PS: Do you think my
Base Framework
should be a widget at all? Or am I just trying to force my design to meet the JQuery UI design? Any recommendations of how I should change it?
- (function ($) {
/*
Design Widget
*/
$.widget( "MY_NAMESPACE.design", {
_create: function () {
if (!this.options.framework)
this.options.framework = $('<div></div>')
.appendTo($('body'))
.baseFramework();
this._super( "_create" );
},
addRow: function() {
var framework = this.options.framework;
// Why do I need to say framework.baseFramework
// Why cant I just do framework.addRow(); ??
// Is it possible to do this?
var row = framework.baseFramework('addRow');
row.appendTo(this.element);
}
});
/*
Framework Widget
Framework could be Bootstrap twitter, WordPress, other
*/
$.widget( "MY_NAMESPACE.baseFramework", {
options: {
layoutType: 'grid',
maxColumns: 10
},
addRow: function() {
return $('<div></div>').addClass('grid-row');
}
});
})(jQuery);
// .............
$(document).ready(function() {
var bootstrapTwitterFramework = $('<div></div>').baseFramework({
maxColumns: 12,
addRow: function() {
return $('<div></div>').addClass('row');
}
}).appendTo($('body'));
var bar = $("[data-type='design']").design({framework: bootstrapTwitterFramework});
bar.design('addRow'); // this calls the default function ::addRow instead of the overridden function passed in
});