javascript代码实例教程-JQueryEasyUI学习笔记（三）
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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 <p id="p" style="padding: 10px;">
21 <p>
22 panel content.</p>
23 <p>
24 panel content.</p>
25 </p>
26 </body>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的javascript代码实例教程-JQueryEasyUI学习笔记（三）全部内容，希望文章能够帮你解决javascript代码实例教程-JQueryEasyUI学习笔记（三）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 前端学java系列（1）——搭建环境 2019-11-04
- JavaScript教程- JavaScript 语句 2018-11-21
- JavaScript教程- JavaScript 语法 2018-11-20
- JavaScript教程- JavaScript 输出 2018-11-20
- JavaScript教程- JavaScript 用法 2018-11-20
- JavaScript教程- JavaScript 简介 2018-11-20
- 重温java基础 2018-11-20
- 了解JavaScript中的Spread运算符 2018-11-17
- js数组操作常用方法超级完整版本值得收藏 2018-11-16
- 谷歌JavaScript风格指南中值得注意的13点 2018-11-11
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件
- javascript代码实例教程-Extjs4――实现动态的grid（即实现数据库表数据的显示）
- 前端学java系列（1）——搭建环境
- 【myeclipse】——Java 内存溢出（java.lang.OutOfMemoryError）
- dun ru jiang hu
- C语言基础知识补充
- vue项目优化--服务端渲染优化
- javascript代码实例教程-Dom 学习总结及其实例
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“字面量和对应类型...
- javascript代码实例教程-Javascript：必须知道的Javascript知识点之“this指针”
- javascript代码实例教程-javascript中encodeURI和decodeURI方法
- javascript代码实例教程-EXTJs 表单控件