1

我正在尝试将jQuery Masonry库与我的 GWT 项目集成。但是，我无法使库与 GWT 生成的容器和元素一起使用。但如果我直接在我的 HTML 页面中重写生成的 GWT HTML，它确实有效。

这就是我的 GWT 入口点的样子

public class Sample implements EntryPoint {

    //In here the text has random lengths to achieve different div blocks to work with Masonry
    private HTML label1 = new HTML("Text..");
    private HTML label2 = new HTML("Text..");
    private HTML label3 = new HTML("Text..");
    private HTML label4 = new HTML("Text..");
    private Image image1 = new Image("images/samsung.jpg");
    private AbsolutePanel hPanel = new AbsolutePanel();

    public void onModuleLoad() {

        DOM.setElementAttribute(hPanel.getElement(), "id", "content");
        image1.setSize("230px", "400px");
        HTML html = new HTML(image1.toString());
        html.setStyleName("item");
        hPanel.add(html);

        label1.setStyleName("item");
        hPanel.add(label1);

        label2.setStyleName("item");
        hPanel.add(label2);

        label3.setStyleName("item");
        hPanel.add(label3);

        label4.setStyleName("item");
        hPanel.add(label4);

        RootPanel.get("wrapper").add(hPanel);

    }
}

我也有一个这样声明的css文件：

#wrapper{
    margin: 0 auto;
    width: 1000px;
}

.item{
    padding: 10px 10px;
    width:230px;
    float: left;
}

这会生成以下 HTML 代码：

<div id="wrapper">
            <div id="header">
                <h1>JQuery, Masonry, GWT, GQuery Test</h1>
            </div>

        <div style="position: relative; overflow: hidden;" id="content">
            <div class="item">
                <img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item" style="">
                Text
            </div>
            <div class="item">text</div>
            <div class="item" style="">text</div>
            <div class="item"><img src="images/samsung.jpg" class="gwt-Image"
                    style="width: 230px; height: 400px;">
            </div>
            <div class="item">text</div>
        </div>
    </div>

最后在我的 HTML 页面中，我有如下所示的 jQuery 调用：

    <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery-1.7.2.min.js"></script>

        <script type="text/javascript" charset="UTF-8" language="javascript"
src="scripts/jquery.masonry.js"></script>

    <script type="text/javascript" charset="UTF-8">

    $(document).ready(function(){       

        $('#content').masonry();
    });
</script>

当我执行这个 GWT 应用程序时，Masonry 库将无法工作并且不会呈现预期的输出。但是，当我复制 GWT 生成的 HTML 并将其直接粘贴到 HTML 页面中时，该库将正常工作并呈现预期的输出。

我在 Masonry 网站http://masonry.desandro.com/docs/intro.html中遵循了本教程。有人可以指出这不适用于 GWT 生成的 HTML 的原因可能是什么？

4

3 回答 3

2

在您准备好文档时，入口点尚未执行。所以 DOM 还不存在。

为避免此问题，您可以改用 GWTQuery 或从 gwt 调用 javascript 来通知您的 DOM 更新。这看起来像这样：

JavaScript：

function domUpdated(){
    //do you jquery stuff here...
}

总重量：

private native void tellJavascriptWeAreDone()/*-{
    $wnd.domUpdated();
}-*/;
于 2012-07-08T18:29:45.333 回答
1

看起来 #content-tag 在 document.ready 上尚不存在。只需尝试在那里停止程序（调试器？）并检查生成的 HTML 内容。

可能是ready-event也是生成的javascript GWT的起点，然后id可以稍后设置:)

于 2012-07-08T15:26:45.627 回答
0

有时这有效。

$(window).load(function() {
        // executes when complete page is fully loaded
        //including all frames, objects and images
        var class1 = $('textarea[name="class1_members"]');
        var class0 = $('textarea[name="class0_members"]');
}
于 2013-04-16T21:16:30.813 回答