2

我正在使用 goog.ui.toolbar 在我的网站顶部创建一个水平导航菜单（也许这是我的问题——我使用了错误的 UI 组件吗？）。我希望它像YUI 的 menubar一样工作，这样当您将鼠标悬停在工具栏中的任何项目上时，会出现一个下拉菜单，当您将鼠标移出该菜单时，它会消失（goog 子菜单希望您单击文档中的其他位置让它关闭）。

我无法为我的生活弄清楚如何做到这一点。我已经将 goog.ui.toolbar 子类化到我自己的类中，并且几天来一直在胡闹，试图让它做我想做的事，但一无所获。我学到的一件事是我感兴趣的自动隐藏行为是由 goog.ui.submenu 的 setHighlighted 函数提供的，它覆盖了 goog.ui.control 的 setHighlighted 函数，它是 goog.ui.menu 的基类，这并没有隐藏我喜欢的方式。我想覆盖 goog.ui.menu，但它是由装饰器工厂产生的，我不想继承一半的代码库。

你们有没有人设法弄清楚如何做到这一点？

非常感谢！

4

1 回答 1

1

这需要一些工作，但它似乎非常接近你想要的。

伪代码

  • 覆盖工具栏内每个菜单按钮的鼠标悬停事件
  • 每当鼠标悬停时，打开菜单
  • 覆盖工具栏中每个菜单按钮的 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);
    }
};
于 2011-10-28T15:01:48.330 回答