JQuery UI Менубар Фантом Подменю Выпуск
Я создаю JQuery Menubar, и все выглядит хорошо, но я получаю странный эффект, когда я наводю курсор мыши на элемент меню верхнего уровня, который имеет подменю, где первый элемент также имеет подменю. Если я наведу курсор мыши (перемещаясь влево и вправо по пункту меню "Вид") примерно 20 раз, я начну видеть подменю "Вид"> "Кодировка", смещающееся все больше вправо.
Я могу воссоздать проблему с измененной версией демо-примера menubar. Я на Firefox 20.0.1.
Смотрите здесь: http://jsfiddle.net/Njjgm/
Я полагаю, что он находит правый край меню подподводки, а затем устанавливает новый левый край того же меню подподставки в эту позицию... Так что, если я замедляю открытие или исправляю математику позиционирования, то у меня не должно быть этой ошибки,
Я просматриваю файл jquery.ui.menubar.js, чтобы узнать, могу ли я настроить setTimeouts или исправить положение меню subub, но безуспешно.
Я смотрю на это (из строки 262 jquery.ui.menubar.js):
__applyMouseBehaviorForSubmenuHavingMenuItem: function (input, menubar) {
var menu = input.next( menubar.options.menuElement ),
mouseBehaviorCallback = function( event ) {
// ignore triggered focus event
if ( event.type === "focus" && !event.originalEvent ) {
return;
}
if (event.type === "mouseenter") {
this.element.find(":focus").focusout();
if (this.stashedOpenMenu) {
this._open( event, menu);
}
this.stashedOpenMenu = undefined;
}
if ((this.open && event.type === "mouseenter")
|| this.options.autoExpand) {
if (this.options.autoExpand) {
clearTimeout( this.closeTimer );
}
this._open( event, menu );
}
};
А также на это: (из строки 68 jquery.ui.menubar.js)
focusin: function( event ) {
clearTimeout( menubar.closeTimer );
},
focusout: function( event ) {
menubar.closeTimer = setTimeout (function() {
menubar._close( event );
}, 150 );
},
"mouseleave .ui-menubar-item": function( event ) {
if ( menubar.options.autoExpand ) {
menubar.closeTimer = setTimeout( function() {
menubar._close( event );
}, 150 );
}
},
"mouseenter .ui-menubar-item": function( event ) {
clearTimeout( menubar.closeTimer );
}
Кто-нибудь с опытом работы с jquery ui menubar видел и исправлял это раньше? Кто-нибудь знает исправление с setTimeout? HoverIntent, похоже, использует ту же технику set / clearTimeout, что и menubar, поэтому я не хочу извлекать всю логику из menubar, чтобы добавить это. Любые предложения приветствуются. Благодарю.
1 ответ
Ну, я нашел способ обойти эту проблему, хотя я не исправил ошибочное позиционирование (но, думаю, я нашел, где это можно исправить).
Код по умолчанию выбирает первый элемент списка в открывшемся меню, и если этот элемент также имеет меню, это меню также открывается. Я вынул код, который фокусируется на первом дочернем элементе (зачем это нужно делать?)
из строки 451 jquery.ui.menubar.js
this.active = menu
.show()
.position($.extend({
of: button
}, this.options.position));
//.removeAttr("aria-hidden")
//.attr("aria-expanded", "true")
//.menu("focus", event, menu.children(".ui-menu-item").first() )
// TODO need a comment here why both events are triggered
//.focus()
//.focusin();
И Престо-Чанго! Нет больше фантомных выпадающих меню... Я мог бы попытаться выяснить menu.position
но это сработало для меня.