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>

JQueryEasyUI学习笔记(三)_第1张图片

今天就先写到这里,写的不是很详细,时间有限啊,真的很困了,见谅,十一点十分奔回宿舍,急急忙忙写完这篇笔记。


你可能感兴趣的:(JQueryEasyUI学习笔记(三))