找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2868|回复: 0

[分享] 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]


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


发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-3-29 15:29 , Processed in 0.054655 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表