一、了解easyUI

??????? 1、easyUI介紹
???????????????? 基于jQuery的頁面組件集合，提供了豐富的組件的集合

??????? 2、優點

?????????????? 2.1、easyui是個完美支持HTML5網頁的完整框架

??????? ?????? 2.2、easyUI節省網頁開發的時間和規模

?????????????? 2.3、easyui很簡單但功能強大

二、搭建框架

演示軟件：eclipse

????????1、新建一個web項目

????????2、解決中文編碼的問題

????????找到widow-preferences

找到General里的workspace，other設置編碼語言utf-8

?然后找到web里的jspfile將encoding也設置為utf-8

?????????3.建包/導包和引入必要的js和css樣式文件

三、layout使用

1）引入JQuery（jquery.min.js）
2）引入EasyUI（jquery.easyui.min.js）
3）引入EasyUI的中文國際化js，讓EasyUI支持中文（locale/easyui-lang-zh_CN.js）
4）引入EasyUI的樣式文件（/themes/default/easyui.css）
5）引入EasyUI的圖標樣式文件（/themes/icon.css）

<script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.5.5.2/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/jquery-easyui-1.5.5.2/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5.5.2/themes/icon.css"/>

body部分我們可以直接在在電腦儲存js的地方的路徑并點擊demo打開layout找一個框架將其代碼copy進body區域

?效果就會出來了

如果效果不是自己理想的效果也可以自己適當做調整，例如不想要最上面那一行那么就可以刪除深藍色區域

刪除前后對比效果，如果想將里面的英文換成中文，可以找到代碼中對應的地方進行更改，比如我想更改中間的部分就找到代碼中對應的地方然后更改即可

其他部分也可調整根據自己需要酌情調整

四、框架優化

沒寫一次頁面都要copy一遍各類的js樣式之類的太過于繁瑣，所以為了方便運用，我們可以在項目的webcontent下建立一個文件夾然后將樣式們都放進去要用的時候調用即可

?為了防止一些路徑上會發生的錯誤，所以我們可以用上絕對路徑

即設置一個ctx變量以此來調用上下文（就可以在其他頁面用${ctx}來調用這個樣式）

然后將頁面的樣式用include調用寫的樣式類中

?這個效果跟優化前的效果時一樣的

有的時候在javascript里面也要用到那怎么辦呢？

直接在儲存樣式的那個類里寫一個script

?如果想在最底部加上東西? 寫上這一段就好了也可以自己再去調整高度什么的? 里面的內容也可以改掉

<div data-options="region:'south',split:true" style=" text-align:center;background: #E0ECFF" class="panel-title">
?? ??? ?Copyright@XXXX有限責任公司
??? </div>?

?

?

總結

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

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