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学习笔记(三)

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

你可能感兴趣的:(jquery)