索引
HT for Web
提供了折叠组件类ht.widget.AccordionView
,用于多组件的折叠展开效果,
提供水平和垂直两种布局方式,折叠组件以position
为absolute
方式进行绝对定位。
折叠组件类ht.widget.AccordionView
主要可配置属性和函数如下:
isDisabled()
和setDisabled(true/false, iconURL)
获取和设置整个组件处于不可用状态getExpandIcon()
和setExpandIcon(icon)
获取和设置展开图标getCollapseIcon()
和setCollapseIcon(icon)
获取和设置合并图标getTitleHeight()
和setTitleHeight(24)
获取和设置标题高度。 getTitleBackground()
和setTitleBackground(color)
获取和设置标题背景色getSelectBackground()
和setSelectBackground(color)
获取和设置标题选中背景色getSeparatorColor()
和setSeparatorColor(color)
获取和设置分割线颜色getOrientation()
和setOrientation(v/h)
布局方向,默认为vertical
或v
,可设置为horizontal
或h
add(title, content, expanded, icon)
添加组件:title
组件的标题文字信息,不同组件不得相同content
组件内容,可为HT
框架提供的组件对象,也可为原生HTML
元素expanded
组件是否展开,默认为false
icon
组件标题显示的图标remove(title)
删除指定标题组件clear()
清除所有标题组件。 getLabelColor(title)
和setLabelColor(color)
获取标题文字颜色getLabelFont(title)
获取标题字体,可重载自定义getTitles()
获取所有标题的ht.List
列表对象 getCurrentTitle()
获取当前展开标题组件isExpanded(title)
判断标题组件是否展开expand(title)
展开标题组件 onExpanded(title)
展开标题时调用,可重载做后续处理collapse()
合并当前展开标题onCollapsed(title)
合并标题时调用,可重载做后续处理drawTitle(g, title, width, height, info)
绘制标题内容,可重载自定义采用简写horizontal
的h
简写形式设置成水平布局方式
leftAccordion.setOrientation('h');
重载getLabelFont
函数根据getCurrentTitle()
决定显示字体
leftAccordion.getLabelFont = function(title){
return title === this.getCurrentTitle() ? 'bold 15px arial, sans-serif' : '13px arial, sans-serif';
};
通过setCollapseIcon
和setExpandIcon
分别设置了两个矢量格式的合并和展开图标
leftAccordion.setCollapseIcon({
width: 14,
height: 14,
comps: [
{
type: 'shape',
points: [0, 7, 14, 7, 7, 0, 7, 14],
segments: [1, 2, 1, 2],
borderWidth: 1,
borderColor: '#303030'
}
]
});
leftAccordion.setExpandIcon({
width: 16,
height: 16,
comps: [
{
type: 'shape',
points: [0, 8, 16, 8],
segments: [1, 2],
borderWidth: 1,
borderColor: '#303030'
}
]
});
构建了div
组件,设置其position
为absolute
的绝对定位方式,并设置了矢量标题图标
function addView(accordionView, shape, color, expand){
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.background = color;
accordionView.add(shape, div, expand, {
width: 16,
height: 16,
comps: [
{
type: shape,
rect: [0, 0, 16, 16],
background: color,
gradient: gradient
}
]
});
}