带子菜单的GwtBootstrap3 NavBar

时间:2015-02-05 22:08:29

标签: gwt gwtbootstrap3

我开始使用GWTBoostrap3,我最大的需求是创建一个包含子菜单的菜单,这个菜单需要是动态的,所以需要用Java做。它类似于Gwt MenuBar

我的尝试......

final ListDropDown listDropDown = new ListDropDown();
AnchorButton anchorButton = new AnchorButton(ButtonType.INFO);
anchorButton.setText("btn1");
DropDownMenu dropDownMenu = new DropDownMenu();
AnchorListItem anchorListItemd = new AnchorListItem("Item 1");
dropDownMenu.add(anchorListItemd);
anchorButton.setDataToggle(Toggle.DROPDOWN);
listDropDown.add(anchorButton);
listDropDown.add(dropDownMenu);


final ListDropDown listDropDown2 = new ListDropDown();
final AnchorButton anchorButton2 = new AnchorButton(ButtonType.INFO);
anchorButton2.setText("Item 2");
DropDownMenu dropDownMenu2 = new DropDownMenu();
dropDownMenu2.setStyleName("dropdown-submenu");
dropDownMenu2.add(new AnchorListItem("Item 1"));
HTML child = new HTML();
child.addStyleName("caret");
anchorButton2.add(child);
anchorButton2.addClickHandler(new ClickHandler() {

    @Override
    public void onClick(ClickEvent event) {
        anchorButton2.removeStyleName("dropdown-toggle");
        listDropDown.addStyleName("open");
        if(!listDropDown2.getStyleName().contains("open")){
            listDropDown2.addStyleName("open");                 
        }else{
            listDropDown2.removeStyleName("open");
        }

    }
});
listDropDown2.add(anchorButton2);
anchorButton2.removeStyleName("dropdown-toggle");
listDropDown2.add(dropDownMenu2);


dropDownMenu.add(listDropDown2);

1 个答案:

答案 0 :(得分:1)

Bootstrap 3 does not support submenus。这是因为Bootstrap 3是一个移动的第一个框架,子菜单在移动设备上没有意义。

如果您仍想使用子菜单,可以easily add them yourself。您必须在应用中的某处添加引用的CSS,并将其添加到DropDownSubmenu窗口小部件,与DropDownMenu非常相似,但使用样式dropdown-submenu,而不是dropdown-menu