NUI控件扩展

摘要：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>

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