library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Datepicker: bind hover events using delegate. Fixed #7256 - minimize event binding in Datepicker initialization.

Browse Source
This commit is contained in:
adambaratz 2011-04-15 07:23:46 -07:00 committed by Scott González
parent 94b7e6bf18
commit 74d195e396
1 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ui/jquery.ui.datepicker.js vendored
View File

@ -16,6 +16,7 @@ $.extend($.ui, { datepicker: { version: "@VERSION" } });
var PROP_NAME = 'datepicker'; var PROP_NAME = 'datepicker';
var dpuuid = new Date().getTime(); var dpuuid = new Date().getTime();
var instActive;
/* Date picker manager. /* Date picker manager.
Use the singleton instance of this class, $.datepicker, to interact with the date picker. Use the singleton instance of this class, $.datepicker, to interact with the date picker.
@ -107,7 +108,7 @@ function Datepicker() {
autoSize: false // True to size the input for the date format, false to leave as is autoSize: false // True to size the input for the date format, false to leave as is
}; };
$.extend(this._defaults, this.regional['']); $.extend(this._defaults, this.regional['']);
this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'); this.dpDiv = bindHover($('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'));
} }
$.extend(Datepicker.prototype, { $.extend(Datepicker.prototype, {
@ -173,7 +174,7 @@ $.extend(Datepicker.prototype, {
drawMonth: 0, drawYear: 0, // month being drawn drawMonth: 0, drawYear: 0, // month being drawn
inline: inline, // is datepicker inline or not inline: inline, // is datepicker inline or not
dpDiv: (!inline ? this.dpDiv : // presentation div dpDiv: (!inline ? this.dpDiv : // presentation div
$('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>'))}; bindHover($('<div class="' + this._inlineClass + ' ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>')))};
}, },
/* Attach the date picker to an input field. */ /* Attach the date picker to an input field. */
@ -674,29 +675,13 @@ $.extend(Datepicker.prototype, {
_updateDatepicker: function(inst) { _updateDatepicker: function(inst) {
var self = this; var self = this;
var borders = $.datepicker._getBorders(inst.dpDiv); var borders = $.datepicker._getBorders(inst.dpDiv);
instActive = inst; // for delegate hover events
inst.dpDiv.empty().append(this._generateHTML(inst)); inst.dpDiv.empty().append(this._generateHTML(inst));
var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6 if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()}) cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
} }
inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a') inst.dpDiv.find('.' + this._dayOverClass + ' a').mouseover();
.bind('mouseout', function(){
$(this).removeClass('ui-state-hover');
if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
if(this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover');
})
.bind('mouseover', function(){
if (!self._isDisabledDatepicker( inst.inline ? inst.dpDiv.parent()[0] : inst.input[0])) {
$(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
$(this).addClass('ui-state-hover');
if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover');
if(this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover');
}
})
.end()
.find('.' + this._dayOverClass + ' a')
.trigger('mouseover')
.end();
var numMonths = this._getNumberOfMonths(inst); var numMonths = this._getNumberOfMonths(inst);
var cols = numMonths[1]; var cols = numMonths[1];
var width = 17; var width = 17;
@ -1719,6 +1704,28 @@ $.extend(Datepicker.prototype, {
} }
}); });
/*
* Bind hover events for datepicker elements.
* Done via delegate so the binding only occurs once in the lifetime of the parent div.
* Global instActive, set by _updateDatepicker allows the handlers to find their way back to the active picker.
*/
function bindHover(dpDiv) {
var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';
return dpDiv.delegate(selector, 'mouseout', function() {
$(this).removeClass('ui-state-hover');
if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
if (this.className.indexOf('ui-datepicker-next') != -1) $(this).removeClass('ui-datepicker-next-hover');
})
.delegate(selector, 'mouseover', function(){
if (!$.datepicker._isDisabledDatepicker( instActive.inline ? dpDiv.parent()[0] : instActive.input[0])) {
$(this).parents('.ui-datepicker-calendar').find('a').removeClass('ui-state-hover');
$(this).addClass('ui-state-hover');
if (this.className.indexOf('ui-datepicker-prev') != -1) $(this).addClass('ui-datepicker-prev-hover');
if (this.className.indexOf('ui-datepicker-next') != -1) $(this).addClass('ui-datepicker-next-hover');
}
});
}
/* jQuery extend now ignores nulls! */ /* jQuery extend now ignores nulls! */
function extendRemove(target, props) { function extendRemove(target, props) {
$.extend(target, props); $.extend(target, props);