摘要：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>
通过上面两步，是不是很简单的就可以扩展出一个新的控件？