歡迎大家轉載，轉載請注明出處！
希望這個筆記對自己和大家有用，但是本人水平有限，如果出錯的地方，希望大家指出，多多批評，謝謝！
今天出去跟哥們喝酒，回來的有些晚，急急忙忙寫完這篇筆記，如果有錯的地方還請大家多多指正，謝謝！
昨天介紹了easyui的基本使用與easyloader方式加載框架，今天來說說他們的原理以及panel框架的使用：
easyui可以直接html的方式，寫一個類，型如 class="easyui-dialog" 的方式，就可以直接加載出easyui的樣式，究其原因，是因為parser的存在，我們打開下的easyui代碼，里面有個plugins文件夾，里面有文件：jquery.parser.js ；這個JS文件里面就是以 class="easyui-dialog" 的方式加載各種sasyui框架樣式的，當然里面是循環渲染的；代碼如下：
1 $.parser = { auto: true, onComplete: function (_1) { 2 }, plugins: ["draggable", "droppable", "resizable", "pagination", "linkbutton", "menu", "menubutton", "splitbutton", "progressbar", "tree", "combobox", "combotree", "combogrid", "numberbox", "validatebox", "searchbox", "numberspinner", "timespinner", "calendar", "datebox", "datetimebox", "slider", "layout", "panel", "datagrid", "propertygrid", "treegrid", "tabs", "accordion", "window", "dialog"],
parse: function (_2) { 3 var aa = []; 4 for (var i = 0; i < $.parser.plugins.length; i++) { 5 var _3 = $.parser.plugins[i]; 6 var r = $(".easyui-" + _3, _2); 7 if (r.length) { 8 if (r[_3]) { 9 r[_3](); 10 } else { 11 aa.push({ name: _3, jq: r }); 12 } 13 } 14 }
再有就是easyloader的加載方式，在其easyloader.js文件中，有其加載各個框架組件的方法（以dialog為例）：
1 dialog: { 2 js: "jquery.dialog.js", //加載dialog的js文件 3 css: "dialog.css", //加載dialog的css樣式文件 4 dependencies: ["linkbutton", "window"]//因為dialog需要window和linkbutton樣式，所以這里關聯着這兩個框架組件 5 }
1 //最后調用parser的方法，使其可以直接以 class="easyui-dialog" 的方式顯示框架，也可以用easyloader獨有的方式加載 2 window.using = easyloader.load; 3 if (window.jQuery) { 4 jQuery(function () { 5 easyloader.load("parser", function () { 6 jQuery.parser.parse(); 7 }); 8 });
panel框架的用法：
1 <script type="text/javascript"> 2 $(function () { 3 $('#p').panel({ 4 width: 500, 5 height: 150, 6 title: 'My Panel', //控制面板名標題 7 iconCls: 'icon-add', //控制面板標題旁邊的圖片 由icon.css文件得來 8 tools: [{// 9 iconCls: 'icon-add', //右上角圖標及點擊觸發事件 10 handler: function () { alert('new') } 11 }, { 12 iconCls: 'icon-save', //右上角圖標及點擊觸發事件 13 handler: function () { alert('save') } 14 }] 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 <div id="p" style="padding: 10px;"> 21 <p> 22 panel content.</p> 23 <p> 24 panel content.</p> 25 </div> 26 </body>
今天就先寫到這里，寫的不是很詳細，時間有限啊，真的很困了，見諒，十一點十分奔回宿舍，急急忙忙寫完這篇筆記。