Как создать панель инструментов с подменю, которые исчезают при наведении мыши? - PullRequest
Новая
       19

Как создать панель инструментов с подменю, которые исчезают при наведении мыши?

2 голосов
/ 16 сентября 2011

Я использую goog.ui.toolbar для создания горизонтального меню навигации в верхней части моего сайта (возможно, это моя проблема - я использую неправильный компонент пользовательского интерфейса?). Я хочу, чтобы он работал как строка меню YUI , чтобы при наведении курсора на любой элемент на панели инструментов появлялось раскрывающееся меню, а при наведении мыши на это меню оно исчезало (подменю goog ожидает вас щелкнуть в другом месте документа, чтобы закрыть его).

Я не могу на всю жизнь понять, как это сделать. Я вложил goog.ui.toolbar в свой собственный класс и целыми днями пытался заставить его делать то, что я хочу, но ничего не получил. Одна вещь, которую я узнал, заключается в том, что интересующее меня поведение автоматического скрытия обеспечивается функцией setHighlighted goog.ui.submenu, которая переопределяет функцию setHighlighted goog.ui.control, которая является базовым классом goog.ui.menu. , который не скрывает, как мне нравится. Я хотел бы переопределить goog.ui.menu, но он создается фабрикой декораторов, и я не хочу создавать подкласс для половины базы кода.

Кто-нибудь из вас сумел выяснить, как это сделать?

Большое спасибо!

1 Ответ

1 голос
/ 28 октября 2011

Это требует немного работы, но, похоже, очень близко к тому, что вы хотите.

Код Psuedo

  • Переопределить событие наведения мыши для каждой кнопки меню на панели инструментов
  • При наведении курсора мыши откройте меню
  • Переопределить событие mouseout каждой кнопки меню на панели инструментов
  • Всякий раз, когда наведите курсор мыши, подождите полсекунды. Проверьте, есть ли среди детей (меню пункты) выделены. Если они есть, подождите еще полсекунды. Если нет Элементы детского меню выделены, затем закройте меню.

Код (возможно, требуется небольшая настройка, но он близок) 

//...
var m1 = new goog.ui.Menu();
//... create menu items ...

var b1 = new goog.ui.MenuButton('Add Jars', m1);
b1.handleMouseOver = function(e){
    b1.setOpen(true);
};
b1.handleMouseOut = function(e){
    setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
};


example.toolbar.hideMenu = function(b1, m1){
    var count = m1.getChildCount();
    var shouldClose = true;
    for(var i=0; i<count; i++){
        if(b1.isHighlighted()){
            shouldClose = false;            
        }

        if(m1.getChildAt(i).isHighlighted()){
            shouldClose = false;
        } else {
        }
    }
    if(shouldClose){
        b1.setOpen(false);
    } else {
        setTimeout(function(){example.toolbar.hideMenu(b1,m1);}, 500);
    }
};
...