easyui包詳解:
文件夾:
demo——該目錄下存放的是 EasyUI PC 版各插件的示例示例。如果不想在官網上查看演示,可以在該目錄下找到相應的演示示例
demo-mobile——該目錄下存放的是 EasyUI 移動版各插件的示例
locale——本地化文件,即語言庫。主要用於如 DataGrid 這類有提示信息文本顯的插件本地化。需要使用哪種語言加載相應的語言庫就行。
plugins——EasyUI 的插件庫,不過一般我們只使用 EasyUI 的主文件jquery.easyui.min.js 就行,主文件已包含所有插件,無需單獨加載
src——EasyUI 的源文件,因為部分功能 EasyUI 不開源,所以該目錄下不是全部的源碼文件
源碼文件
themes——主題包。包含主題 style 及相應的資源文件(圖標等)。該目標下共包含 5 個主題可供使用(需要更換主題的話只需要在導入包的時候導入相應主題下的easyui就可以了)
文件:
changelog.txt——更新日志
easyloader.js——加載器,可以動態的加載項目用到的 EasyUI 插件
jquery.easyui.min.js——EasyUI PC版主文件
jquery.easyui.mobile.js—— EasyUI 移動版主文件
jquery.min.js——EasyUI 所依賴的 jQuery 主文件
licence_gpl.txt——許可協議
readme.txt——版本說明文件
meta:
<!--用以說明主頁制作所使用的文字以及語言;又如英文是ISO-8859-1字符集,還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="utf-8">
<!--如果支持Google Chrome Frame:GCF,則使用GCF渲染;如果系統安裝ie8或以上版本,則使用最高版本ie渲染;否則,這個設定可以忽略。-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--若頁面需默認用極速核,增加標簽:-->
<meta name="renderer" content="webkit">
<!-- width:可視區域的寬度,值可為數字或關鍵詞device-width,height:同width;intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放 maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。user-scalable:是否可對頁面進行縮放,no 禁止縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
js文件:只需要導入jquery.min.js和jquery.easyui.min.js即可,這兩個是必備的js包,其他插件后期會根據需要進行導入;
css:把themes導入然后刪除沒用的主題(一般只用icon.css,然后icons一些圖標的文件和default主題包)然后導入demo中的demo.css;
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easyui.min.js" type="text/javascript"></script>
布局:
data-options:"collapsible:false";不可折疊
split:boolean 邊框是否固定