|
|
欢迎大家转载，转载请注明出处！希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！昨天介绍了easyui的基本使用与easyloader方式加载框架，今天来说说他们的原理以及panel框架的使用：easyui可以直接html的方式，写一个类，型如 class="easyui-dialog" 的方式，就可以直接加载出easyui的样式，究其原因，是因为parser的存在，我们打开下的easyui代码，里面有个plugins文件夹，里面有文件：jquery.parser.js ；这个JS文件里面就是以 class="easyui-dialog" 的方式加载各种sasyui框架样式的，当然里面是循环渲染的；代码如下：
[code=Java width=600px] 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;
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 }[/code]
再有就是easyloader的加载方式，在其easyloader.js文件中，有其加载各个框架组件的方法（以dialog为例）：
[code=Css width=600px]1 dialog: {
2 js: "jquery.dialog.js", //加载dialog的js文件
3 css: "dialog.css", //加载dialog的css样式文件
4 dependencies: ["linkbutton", "window"]//因为dialog需要window和linkbutton样式，所以这里关联着这两个框架组件
5 }[/code]
1 //最后调用parser的方法，使其可以直接以 class="easyui-dialog" 的方式显示框架，也可以用easyloader独有的方式加载[code=Css width=600px]2 window.using = easyloader.load;
3 if (window.jQuery) {
4 jQuery(function () {
5 easyloader.load("parser", function () {
6 jQuery.parser.parse();
7 });
8 });[/code]
panel框架的用法：
1 [code=Java width=600px]<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>[/code]
今天就先写到这里，写的不是很详细，时间有限啊，真的很困了，见谅，十一点十分奔回宿舍，急急忙忙写完这篇笔记。
|
|
/1 
|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛
( 豫ICP备2022021143号-1 )
发表于 2013-3-27 17:32:23
置顶卡
变色卡
千斤顶