Question

我希望能够插入围绕<img>标记的div标记。

当我在寻找一种用图像而不是文本创建锚点的方法时，我找到了以下类。现在这样可行，但我需要包围<img>标记内的<a>。

public class ImageAnchor extends Anchor {
    public ImageAnchor() {
    }    

    public void setURL(String imageURL) {
        Image img = new Image(imageURL);
        img.setStyleName("navbarimg");
        setTarget("_blank");

        DOM.insertBefore(getElement(), img.getElement(), DOM
                .getFirstChild(getElement()));
    }
}

以上输出：

<a class="gwt-Anchor" target="_blank" href="#">
  <img src="img.png" class="navbarimg"/>
</a>

但我需要这个：

<a class="gwt-Anchor" target="_blank" href="#">
  <div class="style">
    <img src="img.png" class="navbarimg"/>
  </div>
</a>

为了理解这背后的原因，我不知道我需要多少个ImageAnchors，它取决于从数据库返回的内容。我只是将它们全部添加到一个带有相应图像和链接的流程图中。（后来我计划添加一个出现在悬停上的描述）

Answer 1

为什么不使用HTMLPanel？

        HTMLPanel myHTML = new HTMLPanel(
            "<a class=\"gwt-Anchor\" target=\"_blank\" href=\"#\">  " +
            "<div class=\"style\">    " +
            "<img src=\"img.png\" class=\"navbarimg\"/>  " +
            "</div>" +
            "</a>");
    RootPanel.get().add(myHTML);

稍微简单一点，你不需要那么多DOM操作......

另一方面，你可能有充分的理由使用这样的东西！：

        class ImageAnchor extends Anchor {
        public ImageAnchor() {
        }    

        public void setURL(String imageURL) {
            Image img = new Image(imageURL);
            img.setStyleName("navbarimg");
            setTarget("_blank");

            HTMLPanel stylePanel = new HTMLPanel("<div class=\"style\"");


            DOM.insertBefore(stylePanel.getElement(), img.getElement(), DOM
                    .getFirstChild(getElement()));

            DOM.insertBefore(getElement(), stylePanel.getElement(), DOM
                    .getFirstChild(getElement()));
        }
    }

    ImageAnchor ia = new ImageAnchor();
    ia.setURL("img.png");

    RootPanel.get().add(ia);

两个例子都产生

<a class="gwt-Anchor" target="_blank"><div><img src="img.png" class="navbarimg"></div></a>

对我来说。

此致斯蒂芬

在<a> tag using DOM</a> </div>中插入<div>标记

1 个答案: