| 前置知识 | 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实例对象).
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模块实例上面. |
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");
}
});