[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>