[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 中可以看到程式碼都便得很簡單

原始碼

1. <!--動態效果--> 
2. <div pulsate="4">4秒閃爍</div> 
3. <div removeDelay="10">10秒後消失</div> 
4. <div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div> 
5.  
6.  
7. <!--表單--> 
8. <form class="FormWidget" method="post" action=""> 
9. <table class="FormList" border="0"> 
10.  <caption>輸入限制</caption> 
11.  
12.  <tr class="NotNull"> 
13.    <th><label for="data_1">無符號整數 :</label></th> 
14.    <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td> 
15.  </tr> 
16.  
17.  <tr class="NotNull"> 
18.    <th><label for="data_2">整數 :</label></th> 
19.    <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td> 
20.  </tr> 
21.  
22.  <tr class="NotNull"> 
23.    <th><label for="data_3">浮點數 :</label></th> 
24.    <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td> 
25.  </tr> 
26.  
27.  <tr> 
28.    <th><label for="data_4">帳號格式 :</label></th> 
29.    <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td> 
30.  </tr> 
31.  
32.  <tr class="NotNull"> 
33.    <th><label for="data_5">英數及底線 :</label></th> 
34.    <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td> 
35.  </tr> 
36. </table> 
37.  
38.  
39. <table class="FormList" border="0"> 
40.  <caption>時間 & 日期</caption> 
41.  
42.  <tr> 
43.    <th><label for="data_6">日期 :</label></th> 
44.    <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td> 
45.  </tr> 
46.  
47.  <tr> 
48.    <th><label>日期區間 :</label></th> 
49.    <td> 
50.      <div class="OptionBar"> 
51.        <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label> 
52.        - 
53.        <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label> 
54.      </div> 
55.    </td> 
56.  </tr> 
57.  
58.  <tr> 
59.    <th><label for="data_7">時間 :</label></th> 
60.    <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td> 
61.  </tr> 
62.  
63.  <tr> 
64.    <th><label>時間區間 :</label></th> 
65.    <td> 
66.      <div class="OptionBar"> 
67.        <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label> 
68.        - 
69.        <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label> 
70.      </div> 
71.    </td> 
72.  </tr> 
73. </table> 
74.  
75.  
76. <table class="FormList" border="0"> 
77.  <caption>格式檢查</caption> 
78.  
79.  <tr> 
80.    <th><label for="data_8">電話格式 :</label></th> 
81.    <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td> 
82.  </tr> 
83.  
84.  <tr class="NotNull"> 
85.    <th><label for="data_9">行動電話格式 :</label></th> 
86.    <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td> 
87.  </tr> 
88.  
89.  <tr class="NotNull"> 
90.    <th><label for="data_10">E-mail 格式 :</label></th> 
91.    <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td> 
92.  </tr> 
93.  
94.  <tr> 
95.    <th><label for="data_11">連結格式 :</label></th> 
96.    <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td> 
97.  </tr> 
98. </table> 
99.  
100. <div class="Buttons"> 
101.  <input type="submit" class="Button" value="儲存"/> 
102. </div> 
103. </form> 

<!--動態效果-->
<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>