"Proper" jQuery UI widget extension with v1.8 rc3????????

"Proper" jQuery UI widget extension with v1.8 rc3????????

First of all, congrats out to all the hard work by all hands involved with jQuery UI v1.8 rc3. The reliability of display / use of the datepicker when activated inside a modal dialog has improved immensely!!!!

So my questions are:

I had a functioning extension in v1.7 that v1.8 rc3 broke. I made some changes as highlighted below and got it working again -- so all is well, but...

  1. Can I use this approach to jQuery UI widget extensions going forward?
  2. If so, is it the "best approach" to doing so?

Functionally this extension adds two new options to the jQuery UI dialog widget. First, a sticky option that positions the dialog as fixed so it stays anchored on the page during vertical and horizontal scrolling. Secondly, It creates a defaultButton option that is automatically clicked when the dialog has focus and the Enter key is pressed (as long as the input field within the dialog is NOT a textarea).

Thanks in advance for any feedback!!
Marv
  1. (function($) {
  2.     var _create = $.ui.dialog.prototype._create;
  3.     $.ui.dialog.prototype._create = function() {
  4.         var self = this;
  5.         _create.apply(this, arguments);
  6.         var textareaHasFocus = false;
  7.         var saveLeft, saveTop;
  8.         if (self.options.sticky)
  9.             self.uiDialog.css('position', 'fixed');
  10.         this.uiDialog
  11.             .find(':input').bind('focus', function(e) {
  12.                 textareaHasFocus = $(this).is('textarea');
  13.             })
  14.             .end()
  15.             .bind('keypress', function(e) {
  16.                 if (e.which == 13 && !textareaHasFocus && self.options.defaultButton != "") {
  17.                     var $obj = $(this).find(":button:contains(" + self.options.defaultButton + ")");
  18.                     var isJQuery = $obj instanceof jQuery;
  19.                     if (isJQuery) {
  20.                         $obj.click();
  21.                         e.preventDefault();
  22.                     };
  23.                 };
  24.             })
  25.             .bind('dialogopen', function(event, ui) {
  26.                 self.uiDialog.find(':button').removeClass('ui-state-focus');
  27.                 if (self.options.defaultButton != '')
  28.                     self.uiDialog.find(':button:contains(' + self.options.defaultButton + ')').addClass('ui-state-focus');
  29.             })
  30.             .bind('dragstop', function(event, ui) {
  31.                 if (self.options.sticky) {
  32.                     saveLeft = ui.position.left;
  33.                     saveTop = ui.position.top;
  34.                 }
  35.             })
  36.             .bind('resizestart', function(event, ui) {
  37.                 if (self.options.sticky) {
  38.                     saveLeft = ui.position.left - $(window).scrollLeft();
  39.                     saveTop = ui.position.top - $(window).scrollTop();
  40.                 }
  41.             })
  42.             .bind('resizestop', function(event, ui) {
  43.                 if (self.options.sticky)
  44.                     self.uiDialog.css({ 'position': 'fixed', 'left': saveLeft, 'top': saveTop });
  45.             });
  46.     };
  47.     $.ui.dialog.prototype.options.sticky = true;
  48.     $.ui.dialog.prototype.options.defaultButton = '';
  49. })(jQuery);