GWT垂直標籤，如iGoogle

Question

我正在使用GWT，並希望開發一個像iGoogle中的垂直標籤面板。

如何才能實現相同？

Answer 1

可以使用EXT-JS的垂直選項卡 - 看到這個演示http://iamtotti.com/playground/js/ext-3.1.1/examples/tabs/tabs.html

有EXT-JS的GWT端口，您可以使用：http://code.google.com/p/gwt-ext/

智能GWT還具有垂直標籤實現（其與gwt-ext不同） - http://www.smartclient.com/smartgwt/showcase並在左側菜單中搜索方向。

Answer 2

我想你要找的是TabLayoutPanel（向下滾動一下）。它的效果很好，它是一個香草GWT小部件，不需要任何第三方庫。

Answer 3

我有同樣的問題，並決定不使用第三方庫只是一個小部件。這是我最終使用的一個輕量級解決方案 - 它基於調整樣式。

verticaltabpanel.css：

@external gwt-TabLayoutPanel; 
.gwt-TabLayoutPanel>div { 
    position: static !important; 
} 
.gwt-TabLayoutPanel { 
    margin-left: 30px; 
} 
@external gwt-TabLayoutPanelTabs; 
.gwt-TabLayoutPanelTabs { 
    top: 0 !important; 
    width: 140px !important; 
} 
@external gwt-TabLayoutPanelTab; 
.gwt-TabLayoutPanelTab { 
    display: block !important; 
    margin-top: 2px; 
    padding: 8px 6px !important; 
} 
@external gwt-TabLayoutPanelContentContainer; 
.gwt-TabLayoutPanelContentContainer { 
    left: 150px !important; 
    top: 0 !important; 
} 

將它添加到資源通常是：當你的應用程序啓動

public interface YouAppResources extends ClientBundle { 

    @Source("verticaltabpanel.css") 
    CssResource verticalTabPanelStyles(); 
} 

然後把它注射：

resources.verticalTabPanelStyles().ensureInjected(); 

定義標籤面板在像這樣的模板：

<ui:style> 
    .tabPanel { 
     height: 400px; 
     width: 800px; 
    } 
</ui:style> 
<g:TabLayoutPanel addStyleNames="{style.tabPanel}" barUnit='PX' barHeight='0'> 
</g:TabLayoutPanel> 

請注意，您必須設置高度和寬度，並且應該添加未設置的樣式。

這種方法的缺點是，應用程序中的所有選項卡面板現在都是垂直的。如果你需要一個水平的，你可以使用舊的TabPanel（注意它已被棄用）。對我的情況來說很好，因爲我的應用程序中有許多垂直選項卡面板，只有一個水平面。

Answer 4

thx爲您的答案，megas。

一個擴展可以使用一些TabLayoutPanel與水平（原始）和一些垂直（新）佈局： 可以添加ID（即#myVertTab）到CSS選擇器。