如何以编程方式打开Bootstrap Dropdown?

时间:2013-07-23 15:19:46

标签: gwt twitter-bootstrap

我开发了GWT应用程序。我也使用Twitter Bootstrap库和GWTQuery。有DropdownButton。我想以编程方式打开它。

像这样的ui.xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
...
<b:DropdownButton text="Test" ui:field="dropdownButton">
   <g:FlowPanel ui:field="contentPanel"/>
</b:DropdownButton>

我可以通过谷歌浏览器的检查员打开它 - 将'开放'课程添加到'btn-group'。但这不可能以编程方式进行。我不知道为什么。 addClassName / addStyleName方法的用法被忽略。

此外,我尝试通过Document.get().createClickEvent模拟点击事件,但下拉列表中没有handlerManager。我试图在JQuery / GWTQuery的帮助下调用triggerclick

是否可以通过编程方式打开Dropdown?

1 个答案:

答案 0 :(得分:0)

您可以尝试继承DropDownButton,为触发按钮添加一个getter(在类的末尾),如下所示:

 public class CustomDropdownButton extends DropdownBase {

private Button trigger;

/**
 * Creates a DropdownButton without a caption.
 */
public CustomDropdownButton() {
    super("div");
    addStyleName("btn-group");
}

/**
 * Creates a DropdownButton with the given caption.
 * 
 * @param caption
 *            the button's caption
 */
public CustomDropdownButton(String caption) {
    this();
    setText(caption);
}

/**
 * {@inheritDoc}
 */
@Override
protected IconAnchor createTrigger() {
    trigger = new Button();
    trigger.setCaret(true);
    return trigger;
}

/**
 * Sets the button's size.
 * 
 * @param size
 *            the button's size
 */
public void setSize(ButtonSize size) {
    trigger.setSize(size);
}

/**
 * Sets the button's type.
 * 
 * @param type
 *            the button's type
 */
public void setType(ButtonType type) {
    trigger.setType(type);
}

/**
 * Sets the button's icon.
 * 
 * @param type
 *            the icon's type
 */
@Override
public void setIcon(IconType type) {
    setBaseIcon(type);
}

/**
 * {@inheritDoc}
 */
@Override
public void setBaseIcon(BaseIconType type) {
    trigger.setBaseIcon(type);
}

@Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
    return trigger.addClickHandler(handler);
}

/**
 * {@inheritDoc}
 */
@Override
public void setIconSize(IconSize size) {
    trigger.setIconSize(size);
}

/**
 * {@inheritDoc}
 */
@Override
public void setCustomIconStyle(String customIconStyle) {
    trigger.setCustomIconStyle(customIconStyle);
}

/**
 * {@inheritDoc}
 */
@Override
public void setIconPosition(IconPosition position) {
    trigger.setIconPosition(position);
}

public Button getButton(){
    return trigger;
}

}

现在你将拥有你的uiBinder xml:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:c='urn:import:com.example.packageWithCustomDropDown'
...
<c:CustomDropdownButton text="Test" ui:field="dropdownButton">
   <g:FlowPanel ui:field="contentPanel"/>
</b:CustomDropdownButton>

现在您可以在按钮上调用点击功能:dropDownButton.getButton().click();

我没有测试它,但它应该可以工作。

希望它有所帮助。 :)