アドレスマスク計算(2)

先日の続き、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"));
で良い

結果、以下のような画面

f:id:posturan:20160313230945j:plain