摘要：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. yourphp 遇见问题及解决办法

    1.前台页面提交出现 __NOLAYOUT__ 解决把法: 在Public 文件下找到 success.html,error.html,exception.html 头部去掉就可以

  2. 数据库实现多站点共享Session

    数据库实现多站点共享Session 多站点共享Session有很多方法,多站点共享Session常见的做法有: 使用.net自动的状态服务(Asp.net State Service); 使用.net ...

  3. UnExpected Error, Quitting

    UnExpected Error, Quitting VB在win7 环境安装后,启动vb6.0弹出以上英文提示,目前解决方法: 下载动态库,放置于C:\ProgramFiles\Common Fil ...

  4. python模块time&datetime&json & picle&14.logging等

    本节大纲: 模块介绍 time &datetime模块 random os sys shutil json & picle shelve xml处理 yaml处理 configpars ...

  5. C# 正则分组捕获

    分组语法 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp) (?:exp ...

  6. VS2015新建asp.net core站点

    摘要 电脑上安装了vs2015,今天就尝尝鲜,新建一个项目试试. BBS 使用vs2015新建一个解决方案,然后新建项目,此时你会发现没有asp.net core项目,这就需要先安装asp.net c ...

  7. asp.net mvc中在使用async的时候HttpContext为null的问题

    摘要 HttpContext上下文并不是无处不在的.详情可以看下Fish Li的文章,解释的比较清楚. HttpContext.Current并非无处不在 问题复现 public async Task ...

  8. SQL Server2008 表旋转(pivot)技术

    参考资料: http://www.cnblogs.com/xiashengwang/p/3503554.html

  9. Eclipse常用开发插件

    以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML         介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...

  10. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...