0

私のプロジェクトでは、
ウィケットでhtmlをレンダリングするクラスからjavascriptコードを呼び出す際に問題が発生しました。ウィケットパネル用の次のコードを持つクラスExamplePanelがあるとします。

 public final class ExamplePanel extends Panel {

      public ExamplePanel(String id) {
          super(id);
          add(new Label("someText", "hello"));
      }}

およびhtmlファイル'ExamplePanel'

 <html xmlns:wicket>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>ExamplePanel</title>
        <wicket:head>
            <link href="panel.css" rel="stylesheet"/>
            <script src="jquery.min.js"></script>
            <script src="jquery-ui.min.js"></script>

        </wicket:head>
    </head>
    <body>
        <wicket:panel>
            <div id="parentContainer">
                <div id="box" wicket:id="someText"></div>
            </div>
        </wicket:panel>
    </body>
</html>

および次のcss

    #box{
    background: #f0f0f0;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 200px;
    left: 200px;
    font-size: 1.5em;
    word-wrap: break-word; 
}

#parentContainer{
    width:500px;
    height: 500px;
     background:RGB(57,51,51);
     position:relative;
}

このコードから、parentContainer div内にボックスがあり、ExamplePanelクラスを初期化するときに位置座標をボックスに渡す必要があります。例：

public ExamplePanel(String id) {
    super(id);
    add(new Label("someText", "hello"));
    // add some code for css positioning of box div
    // $('#div').css({position:'relative',top:'5px',left='29px'}) for example
}

助言がありますか？

4

2 に答える 2

7

ExamplePanelは、 renderHead（IHeaderResponse）メソッドを提供するIHeaderContributorを実装する必要があります。このメソッドから、response.renderString（）を呼び出して、適用するスタイルを渡すことができます。あなたの場合、あなたはスタイルを追加していません、あなたはいくつかのスタイルを追加するJS呼び出しを追加しています。これを行うと、レンダリングする文字列の一部としてを作成する必要がなく、response.renderJavascript（）...を呼び出すだけでよいため、Java呼び出しが少し簡単になります。

public class ExamplePanel implements IHeaderContributor {
    public ExamplePanel(String id) {
        super(id);

        add(new Label("someText", "hello"));
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        // use this if you want to add only the styles
        response.renderString("<style>#div {position:'relative'; top:'5px'; left='29px';}</style>");

        // or, use this if you still want the JS selector
        // the uniqueId should not be null if you want Wicket to check if the script has already been rendered
        response.renderJavascript("$('#div').css({position:'relative',top:'5px',left='29px'})", null);
    }
}

IHeaderContributorインターフェースは、JavaScriptやCSSなどのリソースの追加を容易にすることを目的としています。

于 2012-07-20T19:32:14.473 に答える
1

SimpleAttributeModifierまたはAttributeAppenderを使用して、ウィケット内からcss値またはクラスを設定できます。これを行う方法の説明は、ここにあります。

于 2012-07-23T07:30:05.167 に答える