1.作为其他简单控件(如输入框、日期框、单选框、多选框、下拉框、F7等)的容器,容器内部左侧(或上方)显示文字,右侧是其他控件。 2.在内部简单控件的最右侧提供“帮助图标”的设置和鼠标悬停图标上浮动出帮助信息的功能。鼠标点击帮助图标和信息以外的区域,信息框自动消失。提供帮助信息内容的属性。 3.提供文字显示在控件上方还是左侧的属性,默认在左侧。 4.如果内部简单控件设置了“必填”属性,则在容器的最左侧显示红色“*”。
<wafctrl:labelContainer id="id" name="name" />
var options = {id:"labelContainer",style:"height:50px"};
var dom = waf.createDOM("labelContainer", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("labelContainer", options, dom);
<div id="lc1" class="ui-lablecontainer" ctrlrole="labelContainer" aria-disabled="false" labelposition="left" style="border:none" data-domcreated="true">
<label id="lc1_label" class="label leftPosition leftalign" role="label" style="width: 100px;">
<span role="required" class="requiredspan requiredDisplay"></span>
<span role="label" class="inner-label" style="width: 89px;">名称:</span></label>
<span id="lc1_ctrl" class="userinput" role="lc-userinput"><input type="text" value="示例input"></span>
<span id="lc1_img" class="help" data-original-title="" title=""> </span>
</div>
<!--DOM创建好之后,使用js初始化控件-->
waf("#linkButton").wafLabelContainer(options);
//调用方法
waf("#id").wafLabelContainer('method', parameter...);
//eg:获取和设置值
waf("#id").wafLabelContainer("getValue");
waf("#id").wafLabelContainer("setValue");
//eg:更改事件
waf("#id").wafLabelContainer("option","onchange",fn);
定义标签容器的id,是标签容器的唯一标识.如:id=’wafLabelContainer-1’
定义标签容器中label内显示的文字.如:caption=’年龄:’
定义标签容器中文字相对于内部控件的显示位置,只提供’left’和’top’两种选择.若不设置此属性,默认是’left’如:labelPosition=’top’
定义标签容器的样式类,可以添加一个或多个;注意’ui-helper-clearfixui-lablecontainer’是默认样式,tagClass的设置只是在它后面增加自定义的样式类。如:tagClass=’myClassName’
定义标签容器的样式.如:style=’top:1px;text-align:left;’
定义标签容器的宽度.如:width=’200’
定义label的宽度(文字区域的宽度).如:labelWidth=’200’
定义文本(caption)的水平对齐方式,可选值有:left、right。如:labelAlign=’right’
定义标签容器的操作提示信息
定义标签容器的隐藏状态,默认值为false
获得或设置标签容器控件某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值.[参考样例]