更改GWT子菜單彈出位置

1

子菜單的彈出位置由CSS元素在基於菜單項位置的呈現中定義。

展望通過螢火蟲在主菜單中它生產：

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")從代碼

來源

2012-03-29 06:38:40

+0

嘿哈迪克，感謝你的及時回覆。我已經做了同樣的事情並實現了。 – PVR 2012-03-29 17:51:51

+0

Ranna：很高興聽到 – 2012-03-30 03:52:51

+2

確實可以在菜單組INSIDE彈出菜單上做addStyleName，但不是實際上是「.gwt-MenuBarPopup」的菜單。由於菜單欄彈出窗口在需要響應用戶操作（懸停，單擊）時纔會創建，因此您甚至無法通過其索引設置彈出窗口的樣式。事實上，它的母公司，因爲它的DOM容器根本就沒有父母。我還沒有找到一種方法來使一個彈出位置本身與另一個不同（例如，右邊的最後一個需要彈出到左側的原始項目）。似乎沒有MenuBar類的對齊功能的主要監督。 – eon 2013-04-04 19:55:15

0

我再次建議您重寫默認樣式GWT :)我在我的項目中使用此方法時，我不得不更改一些GWT元素的標準視圖。

來源

2012-03-28 12:19:28

+0

我知道只能通過它來完成。但是，請您告訴我我需要重寫哪些樣式？ – PVR 2012-03-28 12:46:34

+2

我在firebug中打開了一個示例菜單欄，並且看到MenuBar的所有菜單項都具有CSS風格的類「gwt-MenuItem」。此外，每個項目都有其標識符，如「gwt-uid-1」，「gwt-uid-2」等。如果您想要覆蓋元素的默認樣式，請連接到主機頁面，您的CSS文件併爲需要類和ID編寫新屬性。建議您在連接GWT腳本後將CSS文件連接到主機頁面的節頭，否則更改將無法覆蓋默認樣式。如果你願意，我可以像我一樣描述這些觀點） – 2012-03-28 13:51:44

0

我能夠通過改變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的元素，這是您想要更改的元素。

來源

2014-09-24 17:11:56 Will

0

我的解決方案有點像迄今爲止發佈的解決方案的混合，但我認爲它比其中任何一個都更簡單/更簡單。

每個垂直子菜單本身是一個MenuBar，添加作爲到頂層 MenuBar的項目。無論您想將哪個subMenu拖放到左側而不是右側，請在MenuBar小部件上使用.addStyleName("myLeftDropDownStyleName")向其添加樣式類名稱。
定義選擇規則對於風格像這樣的（這些是有必要的最低限度的屬性，我讓左邊落下）：

.myLeftDropDownStyleName{ position: absolute; right: 0px; }

Absolute位置相對於第一具有非靜態位置的父元素;至少對我來說，這個父母的位置似乎是水平的，否則這個下拉的左邊緣沒有這個解決方案。我不會驚訝，如果Relative職位可能在其他一些人的情況下更好地工作。

0px的右偏移說明絕對位置的權利是在我上面提到的水平位置。當然，像素大小可以大於0，以進一步向左推動那麼多，甚至可以將它拉回到那麼多。

這工作完全對我來說，是簡單&乾淨，並沒有強制所有您的菜單欄有這樣的風格（因爲我認爲會出現這種情況，如果你推翻的GWT菜單欄樣式自理之一）。

來源

2014-11-13 01:29:57 cellepo

更改GWT子菜單彈出位置

回答

相關問題