章节

简介

章节(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事件.[参考样例]


样例集合

  1. 综合示例:
  2. 动态化: