本篇重點介紹EasyUI框架下的表單和表單元素使用。

在開始使用EasyUI之前，要認清楚一個原則，因為EasyUI是封裝的CSS及JS庫，所以在修改EasyUI元件的樣式和功能時，最好是採用EasyUI封裝後的CSS樣式和JS方法，而不是自己去寫CSS和JS，這樣不容易引起衝突，樣式統一性也得到了保證。別忘了，如果我們自己再去寫很多樣式和方法，還要用前端框架幹啥？

那麼我們怎麼知道啥時候用前端框架提供的樣式和方法，什麼時候沒有提供這樣的樣式和方法，需要我們自己去寫呢，這個就是經驗了，需要我們去學習，當然對於計算機程式設計來說，最好的學習辦法莫過於多寫多練了。

好的，先來看一個表單的示例：

程式碼如下，先結合圖片看下程式碼，有個整體的印象，之後會詳細解釋程式碼是如何實現的。




  
formDemo.jsp

OK，解釋如下：

1，首先注意，這是一個.jsp檔案，所以第一行有，注意中文環境，貓哥建議使用utf-8編碼。還是那句話，不管是網頁、後端、資料庫，統一編碼是非常有必要的。

2，表單的樣式為class=main_form，在上面的樣式編輯區對應.main_form選擇器。再提醒一下，#main_form表示選擇id=main_form的網頁元素，.main_form表示選擇class=main_form的網頁元素，那直接寫的比如body，表示原則網頁中

標籤。

此處對應的樣式程式碼為：margin:32px auto;width:480px;，表示寬度居中，有點上下邊距，左右邊距是自動，所以實現了整個form部分的寬度控制和居中顯示。

3，現在需要一個標題欄了，提示使用者現在的頁面是用於登入的。此時有一個非常好用且常用的EasyUI元件，也是我們學習的第一個EasyUI元件，我們可以稱之為panel，意思是皮膚。前面示意圖中使用者註冊四個字所在的標題欄加上外面的一圈邊框，就是我們使用的panel，仔細觀察程式碼會發現其實本身就是一個

 那麼如何讓一個普通的div或者其他網頁元素變成EasyUI元件呢，很簡單，透過class就能實現。只要給網頁元素加上class="easyui-xxx"，這個元素就按easyui設定好的樣式顯示了。此處程式碼為：
，easyui-panel將div的樣式設定成了皮膚，然後title使用者註冊將皮膚的標題設定為了使用者註冊，最後還補充了style樣式屬性，設定了內邊距。此處需要注意的是，如果一個網頁元素應用了class=easyui-xxx，如果還想改變其樣式，比如改變內邊距，那就直接在style屬性裡面修改，不要去改動easyui-xxx的樣式，因為那都是EasyUI框架封裝好的，不要動。 4，有了皮膚之後，貓哥想往皮膚裡面依次新增使用者名稱、密碼等輸入框，為了使皮膚裡面的輸入框有固定的下邊距，更加美觀，在每個輸入框外面設定了div，並編輯樣式為：margin-bottom:32px;，這個比較簡單，不再詳述。
 5，然後就是文字輸入框了，使用easyui-textbox樣式即可。需要重點注意data-options，該屬性往往是補充了EasyUI元件的功能，裡面的內容是以逗號分割的鍵值對。例如data-options="prompt:'請輸入使用者名稱',iconCls:'icon-man'"，意思就是文字框提示為請輸入使用者名稱，使用圖示是icon-man。
 6，要明白圖示是怎麼來的，很簡單，在head區域我們引用了，此時我們開啟icon.css程式碼，發現：
 .icon-man{
    background:url('icons/man.png') no-repeat center center;
}
 這下，你應該懂得如果要自定義圖示，該往哪個目錄新增圖片，又該如何定義class的名字跟圖片產生關聯了吧。
 7，注意data-options的功能還是挺強的，比如validType:'email'，直接就驗證了郵箱輸入框格式是否正確，不正確的話還會自動提示，贊一個。
 8，最後，，就很好理解了，easyui-linkbutton表示連結按鈕，iconCls表示圖示。
 9，如果圖示設計的好看而優雅，更換掉easyui預設圖示後，最後出來的網頁還是蠻有個性的。
 最後總結下，學習EasyUI，在具備了較好的CSS和Javascript與jQuery基礎後，其實就是記憶一些元件的名字easyui-xxx，然後記憶一些具體的屬性設定就好了。

使用EasyUI開發銀行業績統計系統[4]-EasyUI表單

相關文章