easyUI是jquery的一個插件，是民間的插件。easyUI使用起來很方便，里面有網頁制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式。我們在導入easyUI庫后，可以直接復制粘貼里面的代碼，從而簡單輕便地初步設置網頁。
首先導入easyUI函數庫：
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
項目代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>歡迎來到后台管理界面</title> <link rel="stylesheet" type="text/css" href="plugin/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css" /> </head> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <script type="text/javascript" src="plugin/easyloader.js"></script> <script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { $('#tt').tabs('add', { title: '查看', content: 'Tab Body', closable: true, tools: [{ iconCls: 'icon - mini - refresh', handler: function() { alert('refresh'); } }] }); }); </script> <body class="easyui-layout"> <div data-options="region:'north',split:true" style="height:100px;"> <div> <h1>拓勝公司后台管理系統</h1></div> </div> <div data-options="region:'south',split:true" style="height:60px;"> <div style="margin: auto; width: 400px ; padding: 20px; font-size: 20px;">Copyright ©拓勝公司 版權所有</div> </div> <div data-options="region:'west',title:'系統管理',split:true" style="width:240px;"> <!-- 作者：xingcheng_yuan@163.com 時間：2015-09-08 描述：手風琴效果 --> <div id="aa" class="easyui-accordion"> <div title="管理員管理" style="padding: 10px;"> <ul> <li><a href="#">添加</a></li> <li><a href="#">查看</a></li> <li><a href="#">修改</a></li> <li><a href="#">刪除</a></li> </ul> </div> </div> </div> <div data-options="region:'center',title:'編輯區 '" style="padding:5px;background:#eee;"> <div id="tt" class="easyui-tabs" "> <div title="添加 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; "> tab1 </div> <div title="刪除 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; "> tab2 </div> </div> </div> </body> </html>
上面代碼沒有任何的問題，但是卻出現如下錯誤：
發生的錯誤：easyUImini.js庫出現了問題，但是函數庫是別人寫好了，測試過的，里面理論下是不可能會有錯誤的。
通過種種的嘗試，發現加入alert(11)后，瀏覽器就不報錯了，javascript代碼也能順利的執行：
<script type="text/javascript"> $(function() { alert(11); $('#tt').tabs('add', { title: '查看', content: 'Tab Body', closable: true, tools: [{ iconCls: 'icon - mini - refresh', handler: function() { alert('refresh'); } }] }); }); </script>
而我們把jQuery代碼改為window.onload()后，代碼依然正常運行：
<script type="text/javascript"> window.onload=function(){ $('#tt').tabs('add', { title: '查看', content: 'Tab Body', closable: true, tools: [{ iconCls: 'icon - mini - refresh', handler: function() { alert('refresh'); } }] }); } </script>
總結為：
1、window.onload()和$(function(){})的區別
A)window.onload()是等到頁面所有元素加載完畢后（包括dom和javascript），再執行里面的函數代碼
B)$(function(){})是等到頁面的dom元素加載完畢后，再執行里面的函數代碼
2、因為我們是用easyUI來開發，事先導入了javascript代碼，但是利用$(function(){})后，javascript還沒加載完畢，所以jquery.easyui.min.js庫就會報錯了。所以在我們利用 easyUI開發項目的時候記得不要使用$(function(){})，而建議去使用window.onload()。