How to "properly" extend the jQuery UI Dialog widget????
Having fun writing my first plugin (isrDialog) which simply extends
the jquery.ui.dialog widget to include an option for a boolean
'sticky' that when 'true' repositions the dialog on window scroll --
creating an anchored effect. The dialog can be dragged and when at
'dragStop' the position is saved so that it will be anchored at this
spot during window scroll.
I obviously supplied an internal dragStop event option to the dialog
widget, but now if the caller of my plugin wants to supply a dragStop
option I ignore it. Here are my questions:
1) How do I "merge" my dragStop functionality with that of the
plugin's invoker?
2) Have I gone about implementing this plugin in a "proper way"? Are
there any "gotchas" to the approach I taken?
Here is the whole plugin's code (40 lines) -- jQuery is great!!!!
===================================================================================
(function($) {
$.fn.isrDialog = function(options) {
var defaults = {
sticky: true
},
overrides = {
dragStop: function(e, ui) {
if (isSticky(this)) {
var left = Math.floor(ui.position.left) - $
(window).scrollLeft();
var top = Math.floor(ui.position.top) - $
(window).scrollTop();
$(this).dialog('option', 'position', [left, top]);
};
}
},
settings = $.extend({}, defaults, options, overrides);
this.each(function() {
if ($(this).is('div')) {
if ($(this).hasClass('ui-dialog-content'))
$(this).dialog(options);
else
$(this).dialog(settings);
};
});
if (window.__isrDialogWindowScrollHandled === undefined) {
window.__isrDialogWindowScrollHandled = true;
$(window).scroll(function(e) {
$('.ui-dialog-content').each(function() {
if (isSticky(this)) {
var position = $(this).dialog('option',
'position');
$(this).dialog('option', 'position',
position);
};
});
});
};
function isSticky(el) {
return $(el).dialog('option', 'sticky') && $(el).dialog
('isOpen');
};
};
})(jQuery);
======================================================================
Thanks in advance for your time developing a reply!
Marv