摘要：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> 通過上面兩步，是不是很簡單的就可以擴展出一個新的控件？