普元 EOS Platform 自定义NUI控件操作步骤

【解答】

扩展一个新的NUI控件，一共分为以下两步：

1、定义一个新的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');

2、使用，比如一个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>

空间快捷链接

页面树结构

【解答】