摘要：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. JS中的 公有变量、私有变量 !

    公有变量.私有变量 ! 初学者的见解,算是记录学习过程,也算是分享以便共同成长,如有不正确的地方,还请不吝赐教! 先看代码1: function car(){ var wheel = 3; //私有变 ...

  2. curl 或 file_get_contents 获取需要授权页面的方法

    原文:http://blog.csdn.net/fdipzone/article/details/44475801 红色字体部分是加上自己的注释,整理了一下. 今天因工作需要,需要用 curl / f ...

  3. jexus jws 安装

    cd /tmp wget linuxdot.net/down/jexus--x64.tar.gz tar -zxvf jexus--x64.tar.gz mv jexus /usr rm -rf /t ...

  4. SSLv3 Poodle攻击漏洞检测工具

    漏洞编号:CVE-2014-3566 POC如下: import ssl,socket,sys SSL_VERSION={    'SSLv2':ssl.PROTOCOL_SSLv2,    'SSL ...

  5. C- 流程控制（顺序结构，选择结构，循环结构）

    一.选择结构 1.if 特点: 同一时刻,只有一个大括号里面的代码会被执行 2,switch 特点 默认情况下,只有一个case后面的代码会被执行 如果一个case后面没有break,而且这个case ...

  6. VisualStudio基本使用(2)-使用VS2013来编译C语言程序

    切换到C语言程序所有目录,执行cl test.c

  7. django book

    一.安装配置 1.下载地址: https://www.djangoproject.com/download/ 2.安装: tar zxvf Django-1.6.1.tar.gz && ...

  8. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  9. R-处理数据对象的实用函数

  10. 笔记之Python网络数据采集

    笔记之Python网络数据采集 非原创即采集 一念清净, 烈焰成池, 一念觉醒, 方登彼岸 网络数据采集, 无非就是写一个自动化程序向网络服务器请求数据, 再对数据进行解析, 提取需要的信息 通常, ...