摘要：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. Redis学习——SDS字符串源码分析

    0. 前言 这里对Redis底层字符串的实现分析,但是看完其实现还没有完整的一个概念,即不太清楚作者为什么要这样子设计,只能窥知一点,需要看完redis如何使用再回头来体会,有不足之处还望告知. 涉及 ...

  2. Bootstrap学习------Tabel

    Bootstrap的表格和Html表格大同小异,只是封装了一些css供我们使用 <table>标签必须引用class="table"基类样式,我们可以根据需求赛选需要的 ...

  3. iOS开发 关于SEL的简单总结

    SEL就是对方法的一种包装.包装的SEL类型数据它对应相应的方法地址,找到方法地址就可以调用方法.在内存中每个类的方法都存储在类对象中,每个方法都有一个与之对应的SEL类型的数据,根据一个SEL数据就 ...

  4. Block 及注意事项

    block 概念 block 是 C 语言的 是一种数据类型,可以当作参数传递 是一组预先准备好的代码,在需要的时候执行 block 的注意事项 (1)block 在实现时就会对它引用到的它所在方法中 ...

  5. [c#基础]AutoResetEvent

    摘要 AutoResetEvent:msdn的描述是通知正在等待的线程已发生事件.此类不能被继承.也就是说它有那么一个时间点,会通知正在等待的线程可以做其它的事情了. AutoResetEvent 该 ...

  6. 看见了就转来了， 涉及到UBOOT 地址的一个问题.

    addr = (_bss_end + (PAGE_SIZE - 1)) & ~(PAGE_SIZE - 1);什么意思? 这是UBOOT 中的一个分配视频帧缓冲区地址的函数,我想问的是:加一个 ...

  7. NOIP2010 引水入城 题解

    http://www.rqnoj.cn/problem/601 今天发现最小区间覆盖竟然是贪心,不用DP!于是我又找到这题出来撸了一发. 要找到最上面每个城市分别能覆盖最下面哪些城市,如果最下面有城市 ...

  8. ios如何普安短图片类型

    很多时候需要知道服务器返回的图片是.png还是.jpg或者是.git, 两种方式 1,获取扩展名 //图片    NSString *image = @"4351141241.GIT&quo ...

  9. 第一个C++例子

    #include <iostream> using namespace std; class Time { private: int hour; int minute; int secon ...

  10. Hadoop 面试题 之Hive

    1.Hive 有哪些方式保存元数据,各有哪些特点. 15. Hive内部表和外部表的区别 23.hive底层与数据库交互原理Hive的Hql语句掌握情况? 36.使用Hive或自定义mr实现如下逻辑: ...