博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
对LigerUI控件库进行扩展,自定义extend和override,并扩展事件前与事件后
阅读量:7251 次
发布时间:2019-06-29

本文共 1270 字,大约阅读时间需要 4 分钟。

最近在项目中使用了LigerUI 1.1.9的UI控件库,使用过程中难免会需要对LigerUI本身进行功能扩展或修复一些BUG,

还好,LigerUI库基于jQuery且完全开源,控件的模块化做的还不错,plugins文件夹下面全是源码,很容易阅读,扩展和修改起来就容易很多,

只是LigerUI自身好像并没有提供类似extend、override、before、after这样的扩展示例,相关资料也没搜着,

所以继续发挥程序员的DIY精神,费话少说,上代码:

1 /* 2 * 代码说明:使用jQuery.extend对LigerUI进行功能扩展的示例 3 * 作者:海之星 日期:2012-11-21 4 */ 5 (function($) { 6     // 备份原$.ligerui.controls.Layout布局控件中的_render方法 7     $.ligerui.controls.Layout.prototype._renderEx = $.ligerui.controls.Layout.prototype._render; 8  9     $.extend($.ligerui.controls.Layout.prototype, {10         example: '扩展一个原有属性',        // 扩展一个新属性11         // 重写(override)原_render方法12         _render: function () {13             // 执行before,返回true的时候才执行LigerUI原有方法14             if (this._renderBefore()) {15                 this._renderEx();           // 执行上面备份的原方法16                 this._renderAfter();        // 执行after附加功能17             }18         },19         // 扩展一个新方法用于_render20         _renderBefore: function () {21             // your code here, do something22             return true;23         },24         // 扩展一个新方法用于_render25         _renderAfter: function () {26             // your code here, do something27         }28     });29 });

页面调用示例:

1 
2 3 4 5 6
7

这样一来,就可以在不改变LigerUI源码的情况下,完成对其的功能扩展和BUG修改了,多好:)

转载地址:http://dphbm.baihongyu.com/

你可能感兴趣的文章
设计模式之代理模式
查看>>
客服系统从Require.js到Webpack
查看>>
React 16 中的异常处理
查看>>
独家解析Javascript原型继承
查看>>
springboot集成mqtt
查看>>
重拾css(3)——学习css的思路
查看>>
SegmentFault 社区访谈 | 有位公子在奇舞
查看>>
jQuery源码分析之jQuery的定义
查看>>
一些经典面试题分析(上)
查看>>
[JS相关的记录01] 那什么来面对你,面向对象编程(__proto__,prototype,constructor以及原型链)...
查看>>
夏日葵电商:搭建一个商城系统,N+功能方案揭秘!
查看>>
Akka系列(一):Akka简介与Actor模型
查看>>
yii2获得从数据库获得数据的方法并处理
查看>>
Android开发百度地图(一)之初体验
查看>>
微服务指南走北(四):你不愿意做微服务架构的十个理由
查看>>
CSS代码重构与优化之路
查看>>
使用 sigprocmask 和 sigpending 在程序正文中捕获和处理信号
查看>>
Bodymovin插件的使用
查看>>
详细深入分析 Java ClassLoader 工作机制
查看>>
关于设计模式
查看>>