更改 GWT 子菜单弹出位置

Posted 2023-02-16

【中文标题】更改 GWT 子菜单弹出位置

【英文标题】：Change GWT SubMenu Popup Location

【发布时间】：2012-03-28 12:04:42

【问题描述】：

在菜单栏中，通常子菜单显示在右侧。我想换到左侧。谁能告诉我，我该怎么做？

【参考方案1】：

子菜单的弹出位置由 CSS 元素在渲染时根据菜单项的位置定义。

在主菜单上通过 Firebug 查看它产生的：

element.style 
    clip: rect(auto, auto, auto, auto);
    left: 337px; // Change this to left:35px;
    overflow: visible;
    position: absolute;
    top: 319px;
    visibility: visible;


// This is main CSS for popup
.gwt-MenuBarPopup

所以，试试使用代码中的setStyleName("css goes here")

【讨论】：

嘿哈迪克，感谢您的及时回复。我也做了同样的事情并做到了。

您确实可以在弹出窗口内的菜单组上执行 addStyleName，但不能在实际上是“.gwt-MenuBarPopup”的菜单组上执行。由于在需要响应用户操作（悬停、单击）之前不会创建菜单栏弹出窗口，因此您甚至无法通过其索引设置弹出窗口的样式。也不是它的父级，因为它的 DOM 容器实际上根本没有父级。我还没有找到一种方法来使一个弹出位置本身与另一个不同（例如，右侧的最后一个需要弹出到原始项目的左侧）。 MenuBar 类没有对齐能力似乎是一个重大疏忽。

【参考方案2】：

我再次建议您覆盖默认样式 GWT:) 当我不得不更改 GWT 元素的一些标准视图时，我在我的项目中使用了这种方法。

【讨论】：

我知道只有这样才能做到。但是你能告诉我我需要覆盖哪些样式吗？

我在 firebug 中打开了一个示例菜单栏，发现 MenuBar 的所有项目都有 CSS 样式类“gwt-MenuItem”。此外，每个项目都有其标识符，例如“gwt-uid-1”、“gwt-uid-2”等。如果您想覆盖元素的默认样式，请连接到主机页面、您的 CSS 文件并为需求类和 ID 编写新属性。我建议你在连接GWT脚本后将CSS文件连接到主机页面的节头末尾，否则更改无法覆盖默认样式。如果你愿意，我可以像我那样描述要点）

【参考方案3】：

我也能够通过更改 css 来实施解决方案。也许这不是最优雅的方式，但它确实有效。使用 GwtQuery 的最接近（）方法的一点帮助，这里是一个简短的例子。

        menuBar.addAttachHandler(new AttachEvent.Handler()             
        @Override
        public void onAttachOrDetach(AttachEvent event) 
            if(event.isAttached())
                Scheduler.get().scheduleDeferred(new ScheduledCommand()                        
                    @Override
                    public void execute() 
                        Element e = $(menuBar).closest(".gwt-MenuBarPopup").get(0);
                        e.getStyle().setLeft(parentMenuBar.getAbsoluteLeft()-menuBar.getOffsetWidth() , Unit.PX);
                    
                );                 
            
        
    );

因此，当附加子菜单时，您想要更改 css。我使用延迟命令，以便在 GWT 的默认 MenuBar 实现设置它之后更改 css。 这一行，"$(menuBar).closest(".gwt-MenuBarPopup").get(0);"将向上搜索 DOM 树，直到找到具有 .gwt-MenuBarPopup 类的元素，这是您要更改的元素。

【参考方案4】：

我的解决方案与目前在此处发布的解决方案有些混合，但我认为它比其中任何一个都更干净/更简单。

每个垂直子菜单本身都是一个MenuBar，作为项目添加到顶层 MenuBar。对于您想要放置到左侧而不是右侧的任何子菜单，请在该 MenuBar 小部件上使用 .addStyleName("myLeftDropDownStyleName") 为其添加样式类名称。

像这样为该样式定义选择器规则（这些是我获得左下角所需的最低属性）：

.myLeftDropDownStyleName position: absolute; right: 0px;

Absolute 相对于第一个非静态位置的父元素的位置；至少就我而言，该父位置似乎是水平位置，否则下拉菜单的左边缘没有此解决方案。如果Relative 职位在其他人的情况下可能会更好，我不会感到惊讶。

0px 的右偏移量告诉绝对位置的正确位置在我上面提到的那个水平位置。当然，像素大小可以是 > 0 以进一步向左推那么多，甚至可以是

这对我来说非常有效，简单干净，并且不会强制 所有 您的 MenuBars 具有这种样式（我认为如果您覆盖其中一种 GWT MenuBar 样式就会出现这种情况自己）。