GWT图像按钮

Question

我正在使用PNG图标创建一个图片按钮，我需要让它具有按钮的感觉（但不是按下按钮的效果），只要用户点击图像，就会出现一个虚线框（类似选择框）以产生按钮被点击的效果。有什么想法吗？

- quarks

Answer 1

在GWT中类似这样的代码：

Hyperlink link = new Hyperlink();
Image image = new Image(imageUrl);
...
link.getElement().appendChild(image.getElement());
link.setStyleName("imgBtnLink");

添加/设置CSS样式:

.imgBtnLink:active {
   border-style:dashed;
}

旧的 JSFiddle 示例: http://jsfiddle.net/Wsaf5/

- BumbleB2na

---

是的，我需要相同的点击效果，如何将其应用到GWT？ - quarks

谢谢，但是这个效果似乎在GWT调试模式和Chrome中无法工作。 - quarks

Answer 2

你可以创建自己的小部件，我有这个

public class ImageButton extends Button {

    public ImageButton() {
        super();
    }

    public void setImgSrc(String imgSrc) {
        Image img = new Image(imgSrc);
        String definedStyles = img.getElement().getAttribute("style");
        img.getElement().setAttribute("style",definedStyles);
        img.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
        DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
    }

    @Override
    public void setText(String text) {
        Element span = DOM.createElement("span");
        span.setInnerText(text);

        span.getStyle().setPaddingLeft(5, Unit.PX);
        span.getStyle().setPaddingRight(3, Unit.PX);
        span.getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
        span.getStyle().setColor("black");

        span.setAttribute("class", "arial12R6D6D6D");
        DOM.insertChild(getElement(), span, 0);
    }
}

- Munawar

---

@Exa，Munawar，你们提供的代码能够工作，但与GWT内置的PushButton相同。我使用PNG图标作为按钮，以保留透明度。 - quarks

实际上，这个类/小部件用于在 GWT 按钮上显示图像（图像+文本）。如果您只想使用您的 .png 作为按钮，您可以将其放入 css 中作为背景，并将该类应用于按钮。例如，在 uiBinder 中：<g:Button styleName=".png as background" />。 - Munawar

Answer 3

ToggleButton与CSS样式相配。

ToggleButton button = new ToggleButton();
button.setStyleName("toggle-button");
...

CSS：

.toggle-button {
    outline: none;
    border: none;
    margin: 3px; /* border size */
    background: transparent url(../img/toggle-button.jpg);
}

.toggle-button-down, .toogle-button-down-hovering {
    margin: 0;
    border: 3px #469 dashed; /* margin size */
}

- trupanka

---

@Daniel，谢谢，但你的方法是通过CSS添加图像的网址吗？ - quarks

新的ToggleButton(Image upImage, Image downImage) - Flo

Answer 4

你能在 ClickEvent 处理程序中为元素添加样式表吗？（addStyleDependentName）。

或者，也许 PushButton 会有用？

- Daniel Lundmark

Answer 5

我创建了一个简单的自定义小部件类，它使用CSS和事件来显示自定义按钮：

活动： view.getContent().add(new ImageButton(resource.comment(), resource.search(), resource.chechCircle(), new ClickCallback() { public void onClick() { Window.alert("Clicked!"); } }));

我使用 UiBinder/Composite 来控制布局、css 和事件。"ClickCallback" 只是一个带有一个 onClick 方法的自定义接口。

UiBinder 文件在这里： http://www.acrinta.com/ImageButton.zip

CSS 在悬停时显示边框，MouseOverMouseOut 可以交换图像，与 onClick 相同，它会在瞬间更改图像，可能会给出一些想法。

- Ashton Thomas