1.常用的前端框架

EasyUI框架，Jquery框架，Vue框架

2.EasyUI的介紹

介紹

EasyUI是一個(gè)前端開發(fā)的框架，其將常用的頁面開發(fā)使用的組件進(jìn)行了封裝，前端開發(fā)人員只需將EasyUI的資源導(dǎo)入項(xiàng)目后使用即可，快速提升開發(fā)效率。

使用

①　導(dǎo)入EasyUI的資源

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

學(xué)習(xí):

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

② EasyUI的布局

3.EasyUI的常用組件

資源的介紹：

①　將從官網(wǎng)上下載的EasyUI的資源壓縮包解壓

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

③　locale文件夾:組件中顯示的數(shù)據(jù)語言的js文件

④　plugins文件夾:是EasyUI提供的組件對應(yīng)的js文件

⑤　src文件夾:源碼文件夾

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

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

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

EasyUI的常用組件

①　基礎(chǔ)組件：常用的比較小的功能組件，不是每個(gè)網(wǎng)頁中都會(huì)用到

②　布局組件: 很重要，每個(gè)網(wǎng)頁都會(huì)使用，完成網(wǎng)頁的布局的。

③　菜單與按鈕組件:很重要，每個(gè)網(wǎng)頁都會(huì)使用，在網(wǎng)頁中完成菜單和按鈕的效果

④　表單組件:很重要，搜集用戶數(shù)據(jù)，封裝了常用的數(shù)據(jù)校驗(yàn)，并支持自定義校驗(yàn)

⑤　窗口組件:在當(dāng)前頁面中顯示子窗口效果，對頁面中的功能進(jìn)行完善。

⑥　數(shù)據(jù)網(wǎng)格和樹組件:很重要，非常之重要。在網(wǎng)頁中顯示表格以及樹狀數(shù)據(jù)

4.組件的使用

1. easyui-panel 面板

作用

在網(wǎng)頁中顯示一個(gè)面板效果，可以在面板中顯示網(wǎng)頁中的數(shù)據(jù)

使用

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

②　在頁面創(chuàng)建一個(gè)div標(biāo)簽，并設(shè)置其class屬性，屬性值為‘easyui-panel’

③　在div標(biāo)簽上使用屬性data-options設(shè)置面板的初始化效果，設(shè)置組件的屬性和

事件，以鍵值對的形式設(shè)置，不同的鍵值對使用逗號(hào)隔開。

④　可以使用jquery來調(diào)用組件提供的方法，根據(jù)用戶在網(wǎng)頁中的行為動(dòng)作對組件

作出對應(yīng)的操作。

效果圖：

2. easyui的組件使用流程

①　在jsp中引入EasyUI的資源

②　在jsp頁面使用HTML方式或者js方式創(chuàng)建組件

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

④　使用組件的方法實(shí)現(xiàn)組件和用戶交互的效果

easyui-textbox組件

①　聲明一個(gè)普通的input文本標(biāo)簽

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

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

4. easyui-passwordbox組件

作用

在頁面中顯示一個(gè)密碼框

使用

HTML標(biāo)簽方式或者js方式，參照API文檔

效果示例

5. easyui-combobox下拉框組件

作用

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

使用

使用HTML標(biāo)簽方式或者js方式完成創(chuàng)建和初始化設(shè)置，參照API

效果：

6. easyui-datebox 日期框

作用

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

使用

使用HTML標(biāo)簽創(chuàng)建和初始化或者使用js方式創(chuàng)建和初始化

效果圖：

具體信息看API

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。