先日の続き、Wicket AJAX でアドレスマスク計算のHTML と使用方法
IpmaskCalcPanel.html を以下のように Wicket Panel のHTMLとして用意する。
<wicket:panel>
<div wicket:id="feedback" id="feedback" class="feedback"></div>
<table class="ipmask">
<form wicket:id="ipmaskcalcform">
<tr>
<td align="right"><input wicket:id="sg1" type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="sg2" type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="sg3" type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="sg4" type="text" size="1" maxlength="3"/></td>
<td>/</td>
<td><input wicket:id="mask" type="text" size="1" maxlength="2"/></td>
</tr>
<tr>
<td wicket:id="sg1bin" class="bin">1111 0000</td>
<td wicket:id="sg2bin" class="bin">1111 0000</td>
<td wicket:id="sg3bin" class="bin">1111 0000</td>
<td wicket:id="sg4bin" class="bin">1111 0000</td>
<td colspan="2" rowspan="2" class="space"></td>
</tr>
<tr>
<td wicket:id="sg1hex" class="hex">A8</td>
<td wicket:id="sg2hex" class="hex">7F</td>
<td wicket:id="sg3hex" class="hex">C0</td>
<td wicket:id="sg4hex" class="hex">EF</td>
</tr>
<tr>
<td align="right"><input wicket:id="ip1"
type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="ip2" type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="ip3" type="text" size="1" maxlength="3"/></td>
<td>.<input wicket:id="ip4" type="text" size="1" maxlength="3"/></td>
<td colspan="2">
<input wicket:id="submit" type="submit" value=" 検 査 " />
</td>
</tr>
<tr>
<td wicket:id="ip1bin" class="bin">1111 0000</td>
<td wicket:id="ip2bin" class="bin">1111 0000</td>
<td wicket:id="ip3bin" class="bin">1111 0000</td>
<td wicket:id="ip4bin" class="bin">1111 0000</td>
<td wicket:id="result" colspan="2" rowspan="2" class="ng">reject</td>
</tr>
<tr>
<td wicket:id="ip1hex" class="hex">A8</td>
<td wicket:id="ip2hex" class="hex">7F</td>
<td wicket:id="ip3hex" class="hex">C0</td>
<td wicket:id="ip4hex" class="hex">EF</td>
</tr>
</form>
</table>
</wicket:panel>
そしてCSSは、、
@CHARSET "UTF-8";
div.feedback{ color: #ff0000; }
table.ipmask {
width: 320px;
border: 1px solid #000000;
border-collapse: collapse;
}
table.ipmask td{
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding-left: 2px; padding-right: 2px;
}
table.ipmask td.space{ border-left: 1px solid #000000; }
table.ipmask td.bin{ font-size: 10pt; white-space: nowrap; height: 20px; padding-left: 2px; padding-right: 2px; }
table.ipmask td.hex{ font-size: 10pt; text-align: center; height: 20px; padding-left: 2px; padding-right: 2px; }
table.ipmask td.ok{
border-left: 1px solid #000000;
font: 11pt bold;
color: #FFFFFF;
text-align: center;
background-color: #00FF00;
}
table.ipmask td.ng{
border-left: 1px solid #000000;
font: 11pt bold;
color: #FFFFFF;
text-align: center;
background-color: #FF0000;
}
table.ipmask td.reset{
border-left: 1px solid #000000;
color: #FFFFFF;
background-color: #FFFFFF;
}
このPanel を使用するHTMLは、
<div wicket:id="ipmaskcalcPanel"></div>
WebPageクラスで、、、
add(new IpmaskCalcPanel("ipmaskcalcPanel"));
で良い
結果、以下のような画面