歡迎大家轉載，轉載請注明出處！
希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！
今天說說EasyUI的基本使用以及easyloader的使用：
EasyUI的基本使用
View Code
1 <head> 2 <title>EasyUI的基本使用</title> 3 <link href="jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /> 4 <!--easyui最全的樣式包也可單獨引用你想使用的樣式包--> 5 <link href="jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" /> 6 <!--easyui自帶圖片樣式包，也可自行添加--> 7 <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script> 8 <!--我使用的是easyui 1.3.2，基於jquery-1.8.0--> 9 <script src="jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script> 10 <!--easyui的js包--> 11 <script src="jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> 12 <!--easyui的中文語言包，默認是英文--> 13 <script type="text/javascript"> 14 $(function () { 15 //第二種使用方法： 16 //使用js方式，使用JQuery選擇器選擇到要操作的div，然后添加各種樣式等等 17 $("#dd").dialog({ 18 width: 400, 19 height: 200, 20 modal: true, 21 title: "我的第二個Dialog！", 22 iconCls: 'icon-save'//easyui圖片樣式 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <!--第二種使用方式：--> 29 <div id="dd"> 30 我的第一個Dialog。 31 </div> 32 <!--第一種基本使用方式（以Dialog為例）： 直接觀看在官網下載的包，里面的Demo，最新的EasyUI都是這種直接在Html標簽中進行操作，想使用哪種樣式的EasyUI就直接 33 class="easyui-dialog" easyui + ‘-’ + 框架名稱，data-options中寫你要選擇的屬性，屬性在EasyUI的API中講解的很詳細，比如 34 model：true 是模式化，我就不一一說明了；--> 35 <div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 200px;" 36 data-options="iconCls:'icon-save',resizable:true,modal:true"> 37 我的第一個Dialog。 38 </div> 39 </body> 40 </html>
easyloader的使用
View Code
1 <head> 2 <title>EasyLoader使用方法</title> 3 <script src="jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script> 4 <script src="jquery-easyui-1.3.2/easyloader.js" type="text/javascript"></script> 5 <script type="text/javascript"> 6 $(function () { 7 // EasyLoader第二種使用方式： 還是加載延遲 8 easyloader.load('dialog', function () { 9 $("#Div1").dialog({ 10 width: 400, 11 height: 200, 12 modal: true, 13 title: "我的第二個Dialog！", 14 iconCls: 'icon-save'//easyui圖片樣式 15 }); 16 }); 17 18 // EasyLoader第三種使用方式： 還是加載延遲 19 using('dialog', function () { 20 $("#Div1").dialog({ 21 width: 400, 22 height: 200, 23 modal: true, 24 title: "我的第二個Dialog！", 25 iconCls: 'icon-save'//easyui圖片樣式 26 }); 27 }); 28 29 // EasyLoader第四種使用方式： 加載延遲更為嚴重了 30 // 定義多個框架，以數組形式添加 31 easyloader.load(['dialog', 'messager'], function () { 32 $("#Div1").dialog({ 33 width: 400, 34 height: 200, 35 modal: true, 36 title: "我的第二個Dialog！", 37 iconCls: 'icon-save'//easyui圖片樣式 38 }); 39 $.messager.alert('Title', 'load ok'); 40 }); 41 }); 42 </script> 43 </head> 44 <body> 45 <!--EasyLoader第一種使用方式： 46 直接引入JQuery包和easyloader的js包；有人說這種方式很方便，流量少，但是我使用時發現有些許延遲；--> 47 <div id="dd" class="easyui-dialog" title="我的第三個Dialog" style="width: 400px; height: 200px;" 48 data-options="iconCls:'icon-save',resizable:true,modal:true"> 49 我的第一個Dialog。 50 </div> 51 <div id="Div1"> 52 我的第一個Dialog。 53 </div> 54 </body> 55 </html>