"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...
- Can I use this approach to jQuery UI widget extensions going forward?
- 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
- (function($) {
- var _create = $.ui.dialog.prototype._create;
- $.ui.dialog.prototype._create = function() {
- var self = this;
- _create.apply(this, arguments);
- var textareaHasFocus = false;
- var saveLeft, saveTop;
- if (self.options.sticky)
- self.uiDialog.css('position', 'fixed');
- this.uiDialog
- .find(':input').bind('focus', function(e) {
- textareaHasFocus = $(this).is('textarea');
- })
- .end()
- .bind('keypress', function(e) {
- if (e.which == 13 && !textareaHasFocus && self.options.defaultButton != "") {
- var $obj = $(this).find(":button:contains(" + self.options.defaultButton + ")");
- var isJQuery = $obj instanceof jQuery;
- if (isJQuery) {
- $obj.click();
- e.preventDefault();
- };
- };
- })
- .bind('dialogopen', function(event, ui) {
- self.uiDialog.find(':button').removeClass('ui-state-focus');
- if (self.options.defaultButton != '')
- self.uiDialog.find(':button:contains(' + self.options.defaultButton + ')').addClass('ui-state-focus');
- })
- .bind('dragstop', function(event, ui) {
- if (self.options.sticky) {
- saveLeft = ui.position.left;
- saveTop = ui.position.top;
- }
- })
- .bind('resizestart', function(event, ui) {
- if (self.options.sticky) {
- saveLeft = ui.position.left - $(window).scrollLeft();
- saveTop = ui.position.top - $(window).scrollTop();
- }
- })
- .bind('resizestop', function(event, ui) {
- if (self.options.sticky)
- self.uiDialog.css({ 'position': 'fixed', 'left': saveLeft, 'top': saveTop });
- });
- };
- $.ui.dialog.prototype.options.sticky = true;
- $.ui.dialog.prototype.options.defaultButton = '';
- })(jQuery);