JQueryEasyUI学习笔记（三）

猫性男孩 · 发表于 2013-3-27 17:32:23

欢迎大家转载，转载请注明出处！希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！昨天介绍了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]

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

		自动登录	找回密码
密码			立即注册

[分享] JQueryEasyUI学习笔记（三）

站长推荐 /1