章节

简介

章节（section）为一带有标题、用于展示具体内容的控件。点击标题，可以将内容面板打开或关闭。

使用方法

2.1 静态框架使用方法仅EAS7.5版本

<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>

2.2 JS动态创建 EAS8.0+

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);

2.3 通用DOM创建 EAS8.0+

<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);

2.4 方法&事件使用 EAS7.5+

//调用方法
waf("#id").wafSection('method', parameter...);
//eg:更改事件
waf("#id").wafSection("option","onchange",fn);

属性说明

id String 缺省值: null 不可以在运行期改变 EAS7.5+

定义section控件的id，若无定义将自动生成

tagClass String 缺省值:”” EAS7.5+

定义section控件的样式类

style String 缺省值:”” EAS7.5+

说明：定义section控件的样式

title String 缺省值:”” EAS7.5+

定义section控件的标题

openIconCls String 缺省值: ui-section-minus 不可以在运行期改变 EAS7.5+

定义section控件内容面板打开状态下的标题图标，默认值为’ui-section-minus’

closeIconCls String 缺省值: ui-section-plus 不可以在运行期改变 EAS7.5+

定义section控件内容面板关闭状态下的标题图标，默认值为’ui-section-plus’

autoOpen Boolean 缺省值: true 不可以在运行期改变 EAS7.5+

定义初始化section控件时内容面板是否自动打开，默认值为true

hidden Boolean 缺省值: false EAS7.5+

定义section控件的隐藏状态，默认值为false

summary String 缺省值:”” false EAS7.5+

章节关闭时显示摘要信息：
格式如下：”( 名称：{name1} | 编码：{name2} )”，其中name1,name2是章节上字段名。

方法说明

option 参数: (property[,value]) 返回值类型: (any) EAS7.5+

获得或设置section控件某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值

参数说明：
- property-必要参数，section控件的属性
- value-可选参数，section控件的属性值
返回值说明：
- 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

appendChildren 参数: (source,pos) 返回值类型: (无) EAS7.5+

往章节控件中增加内容。

参数说明：
- source-需要往section中增加的内容，可以是任意的HTML内容或者JQuery对象，一般为对应的具体控件，比如text，f7等。
- pos-追加到那个位置，可以不传递，如果不传递，默认追加到最后。
返回值说明：无

removeChildren 参数: (source) 返回值类型: (无) EAS7.5+

从章节中删除某个内容。

参数说明：
- source-可以是id字符串或者其对应的Jquery对象，一般为对应的具体控件，比如text，f7等。
返回值说明：无

addHeaderItem 参数: (source) 返回值类型: (无) EAS7.5+

往章节的标题栏中增加内容。

参数说明：
- source-任意的html或者Jquery对象，章节并不负责source的显示位置，需要source自己设置css来决定。因为追加的内容有可能显示在右边，也有可能显示在中间。
返回值说明：无

removeHeaderItem 参数: (无) 返回值类型: (无) EAS7.5+

删除章节标题栏中额外增加的内容。

getHeaderItem 参数: (无) 返回值类型: (无) EAS7.5+

返回章节标题栏中额外增加的内容，返回值为Jquery对象

事件说明

onopen 参数: (event) 返回值类型: (none) EAS7.5+

点击section控件标题，打开内容面板时触发onopen事件.[参考样例]

onclose 参数: (event) 返回值类型: (none) EAS7.5+

点击section控件标题，关闭内容面板时触发onclose事件.[参考样例]

样例集合

综合示例:
动态化:

章节

简介