天天看點

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

1.常用的前端架構

EasyUI架構,Jquery架構,Vue架構

2.EasyUI的介紹

介紹

EasyUI是一個前端開發的架構,其将常用的頁面開發使用的元件進行了封裝,前端開發人員隻需将EasyUI的資源導入項目後使用即可,快速提升開發效率。

使用

① 導入EasyUI的資源

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

學習:

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

② EasyUI的布局

3.EasyUI的常用元件

資源的介紹:

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

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

② 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來調用元件提供的方法,根據使用者在網頁中的行為動作對元件

作出對應的操作。

效果圖:

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

2. easyui的元件使用流程

① 在jsp中引入EasyUI的資源

② 在jsp頁面使用HTML方式或者js方式建立元件

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

④ 使用元件的方法實作元件和使用者互動的效果

  1. easyui-textbox元件

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

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

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

4. easyui-passwordbox元件

作用

在頁面中顯示一個密碼框

使用

HTML标簽方式或者js方式,參照API文檔

效果示例

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

5. easyui-combobox下拉框元件

作用

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

使用

使用HTML标簽方式或者js方式完成建立和初始化設定,參照API

效果:

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

6. easyui-datebox 日期框

作用

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

使用

使用HTML标簽建立和初始化或者使用js方式建立和初始化

效果圖:

EasyUI前端架構1.常用的前端架構2.EasyUI的介紹3.EasyUI的常用元件4.元件的使用

具體資訊看API

繼續閱讀