之前在玩 Firefox 的外掛時，在
XUL 的定義中學到其他屬性設定，當中有些定義還蠻常用到的
如：empty, emptytext, max, min...等
這裡我只是要說明一個簡化開發的 solution，並沒有完整的應用規劃，為了瞭解這個 solution 可以先看看一個簡單的
範例 html_extension.zip。
其實最近看到
HTML5 已經將很多常見的介面應用加入定義中，但還是可以將系統架構中常用的功能做成延伸屬性，在
HTML5 普及之前這是一個很好的 solution。
在之前的專案中，我做了一下的規劃：
- element [延伸屬性]{所有元素共用}
- removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}
pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}
- input,textarea [延伸屬性]
- emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}
- form > tr [延伸樣式]
- class="NotNull" {檢查區塊內的元素是否有選項值}
- form > input [延伸屬性]
- format="" {表單送出前的格式檢查,但不會檢查是否為空}
- 'tel':電話
- 'mobile':行動電話
- 'email':電子信箱
- 'url':網路連結
- jtype="" {資料輸入時的輔助}
(基本格式輸入)
- 'uint':無符號整數
- 'int':整數
- 'float':浮點數
- 'id':帳號格式
- 'alnum':保留字母和数字及底線
(輔助日期輸入)
- 'date':選擇日期
- 'start_date':選擇起始日期
- 'end_date':選擇結束日期
(輔助時間輸入)
- 'time':選擇時間
- 'start_time':選擇起始時間
- 'end_time':選擇結束時間
在下面的 HTML 中可以看到程式碼都便得很簡單
<!--動態效果-->
<div pulsate="4">4秒閃爍</div>
<div removeDelay="10">10秒後消失</div>
<div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div>
<!--表單-->
<form class="FormWidget" method="post" action="">
<table class="FormList" border="0">
<caption>輸入限制</caption>
<tr class="NotNull">
<th><label for="data_1">無符號整數 :</label></th>
<td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td>
</tr>
<tr class="NotNull">
<th><label for="data_2">整數 :</label></th>
<td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td>
</tr>
<tr class="NotNull">
<th><label for="data_3">浮點數 :</label></th>
<td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td>
</tr>
<tr>
<th><label for="data_4">帳號格式 :</label></th>
<td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td>
</tr>
<tr class="NotNull">
<th><label for="data_5">英數及底線 :</label></th>
<td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td>
</tr>
</table>
<table class="FormList" border="0">
<caption>時間 & 日期</caption>
<tr>
<th><label for="data_6">日期 :</label></th>
<td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td>
</tr>
<tr>
<th><label>日期區間 :</label></th>
<td>
<div class="OptionBar">
<label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label>
-
<label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label>
</div>
</td>
</tr>
<tr>
<th><label for="data_7">時間 :</label></th>
<td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td>
</tr>
<tr>
<th><label>時間區間 :</label></th>
<td>
<div class="OptionBar">
<label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label>
-
<label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label>
</div>
</td>
</tr>
</table>
<table class="FormList" border="0">
<caption>格式檢查</caption>
<tr>
<th><label for="data_8">電話格式 :</label></th>
<td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td>
</tr>
<tr class="NotNull">
<th><label for="data_9">行動電話格式 :</label></th>
<td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td>
</tr>
<tr class="NotNull">
<th><label for="data_10">E-mail 格式 :</label></th>
<td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td>
</tr>
<tr>
<th><label for="data_11">連結格式 :</label></th>
<td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td>
</tr>
</table>
<div class="Buttons">
<input type="submit" class="Button" value="儲存"/>
</div>
</form>
