JQueryEasyUI学习笔记（三）
欢迎大家转载，转载请注明出处！
希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！
今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！
昨天介绍了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>
今天就先写到这里，写的不是很详细，时间有限啊，真的很困了，见谅，十一点十分奔回宿舍，急急忙忙写完这篇笔记。
