在GWT中创建具有追溯功能的下拉菜单. [英] Create Dropdown Menu with Drilldown Capabilities in GWT.

问题描述

我想创建一个具有追溯功能的下拉菜单.UI活页夹XML中有类似的内容:

I want to create a Dropdown Menu with Drilldown capabilities. I have something similar to this in the UI binder XML:

<b:DropDownMenu ui:field="menuInfo" addStyleNames="wt-dropdown-menu">
  <b:AnchorListItem ui:field="menuItemA" text="A"/>
  <b:AnchorListItem ui:field="menuItemB" text="B"/>
</b:DropDownMenu>

现在，这仅会创建一个包含项A，B的下拉列表.

Right now this just creates a dropdown with the Items A,B.

我想要这样的东西，我单击A，然后有更多选项可深入查看，例如Apple，Alex，Anne.

I want something like this where I click on A and I have more options to drill down into such as Apple, Alex, Anne whatever.

当前使用GWT 2.7，我知道MenuBar具有该功能，但想知道是否可以通过DropDown做到这一点.

Currently using GWT 2.7, I know MenuBar has that functionality but wondering if there is I way I can do that via a DropDown.

推荐答案

就像这样，它应该可以工作(经过测试).

Like this it should work (tested).

添加以下CSS:

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

然后将以下结构添加到您的* .ui.xml:

Afterwards add the following structure to your *.ui.xml:

<b:AnchorButton dataToggle="DROPDOWN">DropDown</b:AnchorButton>
<b:DropDownMenu>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>A</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Apple</b:AnchorListItem>
            <b:AnchorListItem>Alex</b:AnchorListItem>
            <b:AnchorListItem>Anne</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
    <b:ListItem styleName="menu-item dropdown dropdown-submenu">
        <b:Anchor>B</b:Anchor>
        <b:DropDownMenu>
            <b:AnchorListItem>Ben</b:AnchorListItem>
            <b:AnchorListItem>Bea</b:AnchorListItem>
        </b:DropDownMenu>
    </b:ListItem>
</b:DropDownMenu>

随后结果应如下所示(当然，您可以更改样式):

Afterwards the result should look like this (of course you can change the styling):

这篇关于在GWT中创建具有追溯功能的下拉菜单.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！