學習Ajax架構之dojo：第十節——Dojo的 Form Widget （附原始碼）

在前面第八節學習了Dojo的layout widget，今天，我們學習Dojo widget的另一種類型——Form Widget。

Form Widget是Dojo提供的一組用於表單處理的widget，包括的widget如下：

1. Editor：Dojo的可視化富文字編輯器

2. Checkbox：複選框

3. CiviCrmDateTimePicker：日期、時間選擇

4. ColorPalette：調色盤

5. ComboBox：下拉式清單

6. DatePicker：日曆

7. TimePicker：時間選擇

8. Validation：表單驗證

上面列舉出了八種常用的form widget，如何使用它們呢？下面，就讓我們開始本節的重點吧！

 

第一部分，Editor的用法

1. 引入editor包
     dojo.require("dojo.widget.Editor");

2. 頁面使用Editor，主要屬性的使用

<div dojoType="Editor" items="formatblock;|;insertunorderedlist;insertorderedlist;|;bold;italic;underline;strikethrough;|;createLink;">
     <p>this is my resume.</p>

</div>

3.

 

說明：對選擇的文本資訊進行相應的功能操作，功能如，加列表符號、字型加粗、字型傾斜、字型加底線、加超連結等。

 

第二部分，Checkbox的用法

1. 引入Checkbox包
     dojo.require("dojo.widget.Checkbox");

2. 頁面使用Checkbox，主要屬性的使用

   <div>
        <span>Skills</span>
   </div>

   <div>
        <input type="checkbox" name="cb1" id="cb1" dojoType="Checkbox" /> <label for="cb1">IT</label><br />
        <input type="checkbox" name="cb2" id="cb2" dojoType="Checkbox" /> <label for="cb2">Marketing</label><br />
        <input type="checkbox" name="cb3" id="cb3" dojoType="Checkbox" /> <label for="cb3">Business</label><br />
   </div>

3.

 

說明：類似於html中的checkbox，使用方法一致。

 

 

第三部分，CiviCrmDateTimePicker的用法

1. 引入CiviCrmDateTimePicker包
     dojo.require("dojo.widget.CiviCrmDateTimePicker");

2. 頁面使用CiviCrmDateTimePicker

  <form onsubmit="return false;">
       <dt>
             <label for="qf_369447">  Date and Time
                <span class="marker">*</span>
             </label>
       </dt>
       <dd dojoType="CiviCrmDatePicker" idPrefix="scheduled_date_time">
             <select name="scheduled_date_time[M]">
              <option value="">-month-</option>
              <option value="1">Jan</option>
              <option value="2">Feb</option>
              <option value="3">Mar</option>
              <option value="4">Apr</option>
              <option value="5">May</option>
              <option value="6">Jun</option>
              <option value="7">Jul</option>
              <option value="8">Aug</option>
              <option value="9" selected="selected">Sep</option>
              <option value="10">Oct</option>
              <option value="11">Nov</option>
              <option value="12">Dec</option>
        </select>&nbsp;
        <select name="scheduled_date_time[d]">
              <option value="">-day-</option>
              <option value="1" selected="selected">01</option>
              <option value="2">02</option>
              <option value="3">03</option>
              <option value="4">04</option>
              <option value="5">05</option>
              <option value="6">06</option>
              <option value="7">07</option>
              <option value="8">08</option>
              <option value="9">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
        </select>&nbsp;
        <select name="scheduled_date_time[Y]">
              <option value="">-year-</option>
              <option value="2005" selected="selected">2005</option>
              <option value="2006">2006</option>
              <option value="2007">2007</option>
              <option value="2008">2008</option>
        </select>,&nbsp;
        <select name="scheduled_date_time[h]">
              <option value="">-hour-</option>
              <option value="1">01</option>
              <option value="2">02</option>
              <option value="3">03</option>
              <option value="4">04</option>
              <option value="5">05</option>
              <option value="6">06</option>
              <option value="7">07</option>
              <option value="8">08</option>
              <option value="9">09</option>
              <option value="10">10</option>
              <option value="11" selected="selected">11</option>
              <option value="12">12</option>
        </select>&nbsp;:&nbsp;
        <select name="scheduled_date_time[i]">
              <option value="">-min-</option>
              <option value="0">00</option>
              <option value="15">15</option>
              <option value="30" selected="selected">30</option>
              <option value="45">45</option>
        </select>&nbsp;
        <select name="scheduled_date_time[A]">
              <option value="">-AM/PM-</option>
              <option value="AM" selected="selected">AM</option>
              <option value="PM">PM</option>
        </select>
       </dd>
       <input type="submit" value="foo!"></input>
  </form>

3.

                                       

            頁面載入後的                            選擇日期和時間，點擊button後的

 

說明：使用表單，提交使用者選擇的結果。它將TimePicker 和DatePicker聯合在一起使用。

 

 

第四部分，ColorPalette的用法

1. 引入ColorPalette包
     dojo.require("dojo.widget.ColorPalette");

2. 頁面使用ColorPalette，主要屬性的使用

<p>Default color palette (7x10):</p>
<div dojoType="ColorPalette"></div>

3.

說明：為頁面載入後的效果

 

 

第五部分，ComboBox的用法

1. 引入ComboBox包
     dojo.require("dojo.widget.ComboBox");

2. 頁面使用ComboBox，主要屬性的使用

<select dojoType="ComboBox" value="this should never be seen - it is replaced!"
 dataUrl="http://www.cnblogs.com/tests/widget/comboBoxData.js" style="width: 300px;" name="foo.bar1" maxListLength="15">
</select>

3.

說明：當在空白下拉式清單方塊內輸入a時，自動產生以a開頭的下拉式清單。

 

 

第六部分，DatePicker的用法

1. 引入DatePicker包
      dojo.require("dojo.widget.html.DatePicker");
      dojo.require("dojo.widget.DropdownDatePicker");

2. 頁面使用DatePicker

情況一：將DatePicker直接載入到頁面

<div dojoType="datepicker" widgetId="foo"></div>

情況二：點擊“標識”，調用DatePicker，選擇相應的日期，日期以09/16/2008格式輸出到文字框中

      <form action="" onsubmit="return false;">
           <h4>Dropdown:</h4>
           <div dojoType="dropdowndatepicker"></div>
      </form>

3.

情況一，頁面載入後的：

情況二，點擊“標識”後的：

情況二，選擇日期之後的：

 

 

第七部分，TimePicker的用法

1. 引入TimePicker包

<script type="text/javascript">
      var djConfig = {isDebug: true, debugAtAllCosts: true};
      djConfig = {isDebug: true};
</script>
     dojo.require("dojo.widget.TimePicker");

2. 頁面使用TimePicker，主要屬性的使用

<div dojoType="timepicker"></div>

3.

 

第八部分，Validation的用法

1. 引入Validation包
     dojo.require("dojo.widget.validate");

2. 頁面使用Validation，主要屬性的使用

情況一，輸入框，必要欄位，首字母大寫

<input type="text" name="address" dojoType="ValidationTextBox" trim="true" ucfirst="true" />

情況二，輸入框，必要欄位，首字母大寫，刪除多餘空白字元

<input type="text" name="city" dojoType="ValidationTextBox" trim="true" required="true" ucfirst="true" />

情況三，郵編輸入框

<input type="text" name="zip" dojoType="UsZipTextbox" trim="true" required="true" invalidMessage="Invalid US Zip Code." />

 

小結：本文詳細的介紹了Form Widget的八種widget的引入方法和頁面如何使用它們，並附有。通過對每一種widget的使用方法有了具體瞭解，掌握它們、熟練的運用它們應該是一件很容易的事情了。