2009-12-18 16:50

[HTML] 規劃延生屬性

之前在玩 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>

0 回應: