1.常用的前端框架

EasyUI框架，Jquery框架，Vue框架

2.EasyUI的介紹

介紹

EasyUI是一個前端開發的框架，其將常用的頁面開發使用的組件進行了封裝，前端開發人員只需將EasyUI的資源導入項目后使用即可，快速提升開發效率。

使用

①　導入EasyUI的資源

②　查閱API文檔使用EasyUI的組件完成頁面開發

學習:

① EasyUI提供的組件及其使用方式(API)

② EasyUI的布局

3.EasyUI的常用組件

資源的介紹：

①　將從官網上下載的EasyUI的資源壓縮包解壓

②　demo文件夾:EasyUI官方提供的每個組件的使用示例效果代碼。

③　locale文件夾:組件中顯示的數據語言的js文件

④　plugins文件夾:是EasyUI提供的組件對應的js文件

⑤　src文件夾:源碼文件夾

⑥　themes文件夾：EasyUI官方提供的整套的樣式

⑦　jquery.min.js文件:依賴的jquery文件，建議使用官方提供的jquery文件不要自 己隨便更換版本，可能會造成版本不兼容。

⑧　jquery.easyui.min.js：封裝了所有組件的js文件

EasyUI的常用組件

①　基礎組件：常用的比較小的功能組件，不是每個網頁中都會用到

②　布局組件: 很重要，每個網頁都會使用，完成網頁的布局的。

③　菜單與按鈕組件:很重要，每個網頁都會使用，在網頁中完成菜單和按鈕的效果

④　表單組件:很重要，搜集用戶數據，封裝了常用的數據校驗，并支持自定義校驗

⑤　窗口組件:在當前頁面中顯示子窗口效果，對頁面中的功能進行完善。

⑥　數據網格和樹組件:很重要，非常之重要。在網頁中顯示表格以及樹狀數據

4.組件的使用

1. easyui-panel 面板

作用

在網頁中顯示一個面板效果，可以在面板中顯示網頁中的數據

使用

①　在jsp頁面中引入EasyUI的資源

②　在頁面創建一個div標簽，并設置其class屬性，屬性值為‘easyui-panel’

③　在div標簽上使用屬性data-options設置面板的初始化效果，設置組件的屬性和

事件，以鍵值對的形式設置，不同的鍵值對使用逗號隔開。

④　可以使用jquery來調用組件提供的方法，根據用戶在網頁中的行為動作對組件

作出對應的操作。

效果圖：

2. easyui的組件使用流程

①　在jsp中引入EasyUI的資源

②　在jsp頁面使用HTML方式或者js方式創建組件

③　使用組件的屬性和事件來初始化設置組件的效果

④　使用組件的方法實現組件和用戶交互的效果

easyui-textbox組件

①　聲明一個普通的input文本標簽

②　通過js代碼的方式完成textbox組件初始化效果

元素標簽.組件名({屬性:值，屬性:值,…,事件名:函數…})

4. easyui-passwordbox組件

作用

在頁面中顯示一個密碼框

使用

HTML標簽方式或者js方式，參照API文檔

效果示例

5. easyui-combobox下拉框組件

作用

在頁面中顯示一個下拉框效果，提供了豐富的屬性和事件可以讓我們根據需求來設 置自己想要的組件效果。

使用

使用HTML標簽方式或者js方式完成創建和初始化設置，參照API

效果：

6. easyui-datebox 日期框

作用

在頁面中顯示一個可以選擇日期的文本框

使用

使用HTML標簽創建和初始化或者使用js方式創建和初始化

效果圖：

具體信息看API

總結

以上是生活随笔為你收集整理的EasyUI前端框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。