章节(section)为一带有标题、用于展示具体内容的控件。点击标题,可以将内容面板打开或关闭。
<wafctrl:section title="详细信息" style="background-color:#ffdead" onopen="open" onclose="close" autoOpen="false">
<div style="padding-left: 5px;height: 150px;">
<wafctrl:labelContainer id='lc3' caption="描述:" labelAlign='left'>
<wafctrl:textarea id="txt_name3" name="name3" height="50px" width="230px"></wafctrl:textarea>
</wafctrl:labelContainer>
</div>
</wafctrl:section>
var options = {
title:'section' ,id:'section',name:"section",style:"margin:5px;",
openIconCls:'ui-section-minus',
closeIconCls:'ui-section-plus',
autoOpen:true,
summary : "sectionSummary"
};
var testDom = waf.createDOM("section", options);
waf.appendDOM(waf("body"), testDom);
waf.initComponent("section", options, testDom);
<div class="ui-section" id="section1" ctrlrole="section" data-domcreated="true" aria-disabled="false">
<div class="sheader">
<span class="arrow ui-section-arrow-open">
<i></i>
</span>
<span class="title ui-section-minus">测试Title</span>
</div>
<div class="content" id="section1_content">
</div>
</div>
<!--DOM创建好之后,使用js初始化控件-->
$("#id").wafSection(options);
//调用方法
waf("#id").wafSection('method', parameter...);
//eg:更改事件
waf("#id").wafSection("option","onchange",fn);
定义section控件的id,若无定义将自动生成
定义section控件的样式类
说明:定义section控件的样式
定义section控件的标题
定义section控件内容面板打开状态下的标题图标,默认值为’ui-section-minus’
定义section控件内容面板关闭状态下的标题图标,默认值为’ui-section-plus’
定义初始化section控件时内容面板是否自动打开,默认值为true
定义section控件的隐藏状态,默认值为false
章节关闭时显示摘要信息:
格式如下:”( 名称:{name1} | 编码:{name2} )”,其中name1,name2是章节上字段名。
获得或设置section控件某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值
往章节控件中增加内容。
从章节中删除某个内容。
往章节的标题栏中增加内容。
删除章节标题栏中额外增加的内容。
返回章节标题栏中额外增加的内容,返回值为Jquery对象
点击section控件标题,打开内容面板时触发onopen事件.[参考样例]
点击section控件标题,关闭内容面板时触发onclose事件.[参考样例]