最近在项目中使用了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 // 扩展一个新方法用于_render 20 _renderBefore: function () { 21 // your code here, do something 22 return true; 23 }, 24 // 扩展一个新方法用于_render 25 _renderAfter: function () { 26 // your code here, do something 27 } 28 }); 29 });
页面调用示例:
1 <!--jQuery和ligerUI文件--> 2 <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 3 <script src="/Scripts/LigerUI/js/core/base.js" type="text/javascript"></script> 4 <script src="/Scripts/LigerUI/js/ligerui.min.js" type="text/javascript"></script> 5 6 <!--自定义ligerUI扩展文件--> 7 <script src="/Scripts/LigerUI/js/ligerui.override.js" type="text/javascript"></script>
这样一来,就可以在不改变LigerUI源码的情况下,完成对其的功能扩展和BUG修改了,多好:)