首页 教程 API文档

创建ui模块

2015-09-10 16:40:11

属性


前置知识 Std.module, Std.events
复杂程度
使用频率
所属模块 Std.ui
成员类型 静态成员函数

描述


Std.ui.module模块是用于创建UI组件的模块,该模块使用方法与Std.module方法几乎相同,Std.ui.module在配置方面比Std.module要多了几个,这些将会在模块配置中列出.

通常情况下创建一个UI组件的时候,这个UI组件都是基于widget的,因为widget模块提供了大量的方法,参数,与默认设置.

当UI组件被实例化的时候,会自动增加一个成员变量objectName,如果在创建实例时候的参数选项中没有指定objectName的值,那么这个值就会随机生成.

同时,UI模块被实例化的时候,会自动根据配置中的nodeName的值创建一个DOM元素, 这个DOM元素会自动增加一个ui键,这个键值就是这个实例化的UI模块对象, 同时这个DOM元素会被成为一个Std.dom实例对象被保存到这个UI模块实例中成为一个公有的成员变量,键名为 0 , 访问时候可以通过 instance[0] 这种方式进行访问该DOM元素

当UI模块实例被创建之后,create事件将会被触发,如果创建时候的参数选项中包含有renderTo,那么成员函数renderTo将会被执行(主函数执行完毕之后才执行).

模块的main函数与Std.module创建的模块的main函数不一样,通过Std.module创建的模块的main函数可以自由的定义参数, 而通过Std.ui.module创建的模块只会有一个实际参数,这个实际参数为创建模块实例时候的参数选项. main方法有3个形式参数,第一个为当前模块的this对象,第二个参数为opts,被init_opts处理后的参数选项,第三个参数为这个widget的DOM对象(Std.dom实例对象).

提示: 你并不需要完全掌握Std.ui.module的用法,你只需要能够用来成功的创建一个UI模块就足够了.

语法



Object Std.ui.module(String name,Object config);
        

参数


名称 类型 描述
name String 要创建的UI模块的名称
config Object 要创建的UI模块的配置,也可以是一个函数,但是这个函数的返回值必须是这个模块的配置.

模块配置


Std.ui.module的模块配置和Std.module是一样的,可以参考Std.module文档,以下只列出Std.ui.module独有的配置.

名称 类型 描述
nodeName String UI模块被实例化时候要创建的DOM元素的元素名称,默认为div
namespaceURI String UI模块被实例化的时候要创建的DOM元素的命名空间URL地址,例如默认的DOM元素是一个svg元素,参考document.createElementNS
action Object UI组件相关外部行为函数的一个Object对象,例如children,content等.
events String,Array 当widget被on方法绑定事件的时候,指定的这些事件表示为允许被emit方法触发的, 例如实例对象如果使用on方法绑定了click事件,那么这个事件将会被绑定到这个widget的DOM元素上面, 但是如果events配置中指定了click事件,那么这个事件将会被绑定到这个UI模块实例上面.

返回值


被创建的模块实例,如果这个名称的模块不存在,创建失败,则会返回null

相关例子



Std.ui.module("Label",{
    /*[#module option:parent]*/
    parent:"widget",
    /*[#module option:nodeName]*/
    nodeName:"a",
    /*[#module option:events]*/
    events:"change",
    /*[#module option:action]*/
    action:{
        content:"value"
    },
    /*[#module option:option]*/
    option:{
        defaultClass:"StdUI_Label",
        level:1,
        bold:false,
        underline:false,
        wordwrap:false,
        wordnowrap:false,
        textAlign:null,
        color:null,
        fontSize:12,
        lineHeight:null,
        indent:0,
        href:null,
        target:null,
        value:"label",
        background:"",
        textFormat:"html"    //html,text
    },
    /*[#module option:public]*/
    public:{
        /*
         * text format
        */
        textFormat:function(type){
            return this.opt("textFormat",type);
        },
        /*
         * href
        */
        href:function(href){
            return this.opt("href",href,function(){
                this[0].attr("href",href);
            });
        },
        /*
         * target
        */
        target:function(href){
            return this.opt("target",href,function(){
                this[0].attr("target",href);
            });
        },
        /*
         * get or set wordwrap
        */
        wordwrap:function(state){
            var that = this;

            return that.opt("wordwrap",state,function(){
                that.toggleClass("Std_wordwrap",state);
            });
        },
        /*
         * get or set wordnowrap
        */
        wordnowrap:function(state){
            var that = this;

            return that.opt("wordnowrap",state,function(){
                that.toggleClass("Std_wordnowrap",state);
            });
        },
        /*
         * get or set label text
        */
        value:function(value){
            var that = this;

            return that.opt("value",value,function(){
                that[0][that.opts.textFormat](value);
            });
        },
        /*
         * font color
        */
        color:function(color){
            var that = this;

            if(color === undefined){
                return that[0].color();
            }
            that[0].color(color);
            return that;
        },
        /*
         * font size
        */
        fontSize:function(size){
            return this.opt("fontSize",size,function(){
                this[0].css("font-size",size + "px");
            });
        },
        /*
         * get or set line height
        */
        lineHeight:function(size){
            var that = this;

            if(size === undefined){
                return that[0].css("lineHeight");
            }
            return that[0].css("lineHeight",size);
        },
        /*
         * get or set font bold
        */
        bold:function(state){
            var that = this;

            return that.opt("state",state,function(){
                that[0].css("font-weight",state ? "bold" : "");
            });
        },
        /*
         * get or set font underline
        */
        underline:function(state){
            var that = this;

            return that.opt("underline",state,function(){
                that[0].css("text-decoration",state ? "underline" : "");
            });
        },
        /*
         * indent
        */
        indent:function(value){
            return this.opt("indent",value,function(){
                this[0].css("text-indent",value + "px");
            });
        },
        /*
         * background
        */
        background:function(value){
            return this.opt("background",value,function(){
                this[0].css("background",value);
            });
        },
        /*
         * text align
        */
        textAlign:function(value){
            return this.opt("textAlign",value,function(){
                this[0].css("text-align",value);
            });
        }
    },
    /*[#module option:main]*/
    main:function(that){
        that.call_opts({
            bold:false,
            indent:0,
            underline:false,
            background:""
        },true);

        that.call_opts(["fontSize","color","wordwrap","wordnowrap","lineHeight","textAlign","href","target"],true);
        that.call_opts("value");
    }
});