摘要：NUI组件是公司新一代的前端开发框架，它精致优雅的前端编程模型，是大家能够，或者想接受学习它的重要原因，在使用它的时候，一定不免会想增加自己的控件，让别人也能够如此优雅的使用。 其实NUI的扩展机制不是很复杂，下面说说如何扩展一个新的NUI控件

NUI组件是公司新一代的前端开发框架，它精致优雅的前端编程模型，是大家能够，或者想接受学习它的重要原因，在使用它的时候，一定不免会想增加自己的控件，让别人也能够如此优雅的使用。

其实NUI的扩展机制不是很复杂，下面说说如何扩展一个新的NUI控件，一共分为以下两步：

   定义一个新的js文件，比如叫XxxControlImpl.js，js文件内容如下：

    //定义XxxControl的构造方法

   nui.XxxControl= function () {

       nui.XxxControl.superclass.constructor.call(this);

   };

   //定义XxxControl的继承控件及其主体

   nui.extend(

       nui.XxxControl,

       nui.XxxControlSuper, //要继承的父控件

       //控件主体

       {

           uiCls: "nui-xxx", //注意：这个属性必须设置，否则调用nui.parse()方法不会正确解析此控件

           yyy : "", //新属性

    setYyy: function(value){

    this.yyy = value;

    },

    getYyy: function(){

    return this.yyy;

    },

           //属性解析赋值

           getAttrs: function (el) {

               var attrs = nui.XxxControl.superclass.getAttrs.call(this, el);

               var jq = jQuery(el);

               nui._ParseString(el, attrs,

                   ["yyy"]

               );

               return attrs;

           },

           //初始化此控件调用的方法

           _create: function () {

           nui.XxxControl.superclass._create.call(this);

               。。。。。。

           },

           //初始化事件调用的方法

           _initInputEvents: function () {

               nui.XxxControl.superclass._initInputEvents.call(this);

               this.on("buttonclick", this.__ZzzClick, this);

               。。。。。。

           }

   });

   //把定义XxxControl控件注册到NUI体系中

   nui.regClass(nui.XxxControl, 'xxx');

   使用，比如一个test.html中的内容如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

   <html>

   <head>

   <title>选择资源</title>

       <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

       <script src="common/nui/nui.js" type="text/javascript"></script>

       <script src="XxxControlImpl.js" type="text/javascript"></script>

   </head>

   <body>

       <input id="test" class="nui-xxx"/>

       <script type="text/javascript">

        nui.parse();

       </script>

   </body>

   </html>

通过上面两步，是不是很简单的就可以扩展出一个新的控件？

NUI控件扩展的更多相关文章

  1. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...

  2. WPF开源控件扩展库 - MaterialDesignExtensions

    Material Design Extensions 在WPF开源控件库 Material Design in XAML Toolkit(本站介绍:链接)的基础上进行了控件扩展和特性新增.本开源项目中 ...

  3. Silverlight中DataPager控件扩展

    大家一定遇到这样的情况,想改变一下SL的DataPager的显示信息,比如希望分页控件上显示数据的总数.那么就需要扩展一下DataPager控件即可. 其实扩展DataPager很简单,只要获取到Da ...

  4. cocos2dx - 控件扩展之pageview循环显示

    接上一节内容:cocos2dx - shader实现任意动画的残影效果 本节主要讲一下扩展PageView控件功能 在实际游戏应用中,经常会碰到用原来的控件难以实现的功能.这时候就需要根据需求,通过选 ...

  5. ASP.NET MVC显示UserControl控件(扩展篇)

    昨晚Insus.NET有怀旧一下<念念不忘,ASP.NET MVC显示WebForm网页或UserControl控件>http://www.cnblogs.com/insus/p/3641 ...

  6. sencha touch datepicker/datepickerfield(时间选择控件)扩展（废弃 仅参考）

    参考资料:https://market.sencha.com/extensions/datetimepicker 上面的扩展在2.2有些问题,参考源码重新写了一个 TimePicker: Ext.de ...

  7. openlayers2地图控件扩展：要素删除DeleteFeature

    实现要素删除控件,扩展OpenLayers.Control类,实现效果:选择DeleteFeature工具后,选择要素,按delete键删除要素(这里的删除只是将feature设置成delete状态, ...

  8. 玩转控件:扩展Dev中SimpleButton

    何为扩展,顾名思义,就是在原有控件属性.事件的基础上拓展自己需要或实用的属性.事件等等.或者可以理解为,现有的控件已经不能完全满足我(的需求)了.好的扩展会使控件更加完善,实用,好用.不好的扩展,说白 ...

  9. 玩转控件:对Dev的GridControl控件扩展

    缘由 一切实现来源于需求,目的在于不盲目造轮子,有小伙伴儿在看了<玩转控件:对Dev中GridControl控件的封装和扩展>文章后,私信作者说,因公司业务逻辑比较复杂,展示字段比较多,尤 ...

随机推荐

  1. Array subscript is not an integer

    字典的字母写成大写了,也不能查成出来,没有报没有这个字典,反而报这个错……找了好久

  2. web前端工程师校园招聘要求

    小燕子对紫薇说:“这辈子也别想着进皇宫了”.可后来她们不但进了宫,还都当上了格格.你在想什么?走呗! 1.去哪了网 前端开发工程师 工作地点:北京 工作职责: 负责去哪儿网各产品线Web前端研发: 负 ...

  3. mysql优化--触发器和auto_increment

    1.触发器: 触发器的好处:做数据回收站或者做数据关联删除 触发器的坏处:给数据库增加压力,增删改变慢,不利与mysql移到其他数据库会出问题. 触发器建立:只能增删改,查不能建立. 例子1:创建一个 ...

  4. 关于MarshalByRefObject的解释

    http://www.cnblogs.com/webfpc/archive/2010/03/10/1667101.html 首先了解一下不同应用程序域中的对象的通信方式有两种: 一种是跨应用程序域边界 ...

  5. [FMX] Android APP 启动黑屏优化补丁

    使用说明 *************************************************** Android APP 启动黑屏优化补丁 作者: Swish, YangYxd 201 ...

  6. Linux下删除命令

    linux删除目录很简单 使用rm -rf命令即可.直接rm就可以了,不过要加两个参数-rf 即:rm -rf 目录名字(警告:不作任何提示,且不可恢复,不要说没提醒哦!严重警告!!!)-r 就是向下 ...

  7. C-指针

    //格式:变量类型 *变量名//定义了一个指针变量p//指针变量只能存储地址//指针就一个作用:能够根据一个地址值,访问对应的存储空间//指针变量p前面的int:指针变量p只能指向int类型的数据in ...

  8. 真正理解linux的inode?

    linux 在整个架构上可以看作是三层: 1.底层代码, (引导层strip) 跟硬件沟通的那一层的代码(可能是汇编+c), 驱动底层的; strain: n./v. 拉紧, 张力, 气质, 风格, ...

  9. recording just for inquiry in the future

    auditd审计 相关命令有: auditd, auditctl, ausearch, aureport 相关文件: /etc/audit/auditd.conf, /etc/audit/audit. ...

  10. CF459B Pashmak and Flowers （水

    Pashmak and Flowers Codeforces Round #261 (Div. 2) B. Pashmak and Flowers time limit per test 1 seco ...