JQueryEasyUI学习笔记（三）

backspace

浏览: 137122 次

最近访客更多访客>>

cwlcl105816

zkbucciarati

lliioo

byamao1

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (107)

社区版块

存档分类

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！

昨天介绍了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>

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

分享到：

easyUI与选择WebUI | 50个在网站中经常使用的酷感的slider滑块

2013-06-13 19:59
浏览 609
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQueryEasyUI学习笔记（三）

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！

昨天介绍了easyui的基本使用与easyloader方式加载框架，今天来说说他们的原理以及panel框架的使用：

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQueryEasyUI学习笔记（三）

欢迎大家转载，转载请注明出处！

希望这个笔记对自己和大家有用，但是本人水平有限，如果出错的地方，希望大家指出，多多批评，谢谢！

今天出去跟哥们喝酒，回来的有些晚，急急忙忙写完这篇笔记，如果有错的地方还请大家多多指正，谢谢！

昨天介绍了easyui的基本使用与easyloader方式加载框架，今天来说说他们的原理以及panel框架的使用：

评论

发表评论

相关推荐

最近访客更多访客>>