摘要：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. #if __IPHONE_OS_VERSION_MAX_ALLOWED < __IPHONE_8_0

    头文件处理 #import <UIKit/UIKit.h> #if __IPHONE_OS_VERSION_MAX_ALLOWED < __IPHONE_8_0 #else #imp ...

  2. 使用Alcatraz来管理Xcode插件(转）

    转自唐巧的博客:http://blog.devtang.com/blog/2014/03/05/use-alcatraz-to-manage-xcode-plugins/ 简介 Alcatraz是一个 ...

  3. Thinkphp 模板中直接对数据处理 模板中使用函数 中文字符串截取

    1.Thinkphp 模板中直接对数据处理:{$data.name|substr=0,3} 2.中文字符串截取函数:mb_substr=0,14,'utf-8' 3.中文字符串统计:iconv_str ...

  4. asp.net MVC动态路由

    项目中遇到需要动态生成控制器和视图的. 于是就折腾半天,动态生成控制器文件和视图文件,但是动态生成控制器不编译是没法访问的. 找人研究后,得到要领: 1.放在App_Code文件夹内 2.不要命名空间 ...

  5. C语言动态内存分配

    考虑下面三段代码: 片段1 void GetMemory(char *p) { p = (); } void Test(void) { char *str = NULL; GetMemory(str) ...

  6. 【转载】Unity 合理安排增量更新（热更新）

    原帖地址:由于我看到的那个网站发的这篇帖子很大可能是盗贴的,我就暂时不贴地址了.避免伤害原作者 原版写的有点乱,我个人修改整理了下. --------------------------------- ...

  7. R语言 常见模型

    转自 雪晴网 [R]如何确定最适合数据集的机器学习算法 抽查(Spot checking)机器学习算法是指如何找出最适合于给定数据集的算法模型.本文中我将介绍八个常用于抽查的机器学习算法,文中还包括各 ...

  8. PHP基础Mysql扩展库

    mysql扩展库操作步骤如下: 1.连接数据库 2.选择数据库 3.设置操作编码 4.发送指令sql,并返回结果集     ddl:数据定义语句     dml:数据操作语句     dql:数据查询 ...

  9. C#之interface接口

    C#中接口与抽象类很相似,他们都无法实例化自己的对象,但是他们也有很重要的区别.Interface与Abstract class中,类不能多重继承,但是接口可以多重继承. 这段代码表明,声明接口的方法 ...

  10. OS X Framework Library not loaded: 'Image not found'的解决办法

    参考:OS X Framework Library not loaded: 'Image not found' 1.首先将相应的framework手动复制到/System/Library/Framew ...