私のプロジェクトでは、
ウィケットで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
}
助言がありますか?