HT for Web 折叠组件手册

索引


概述

HT for Web提供了折叠组件类ht.widget.AccordionView,用于多组件的折叠展开效果, 提供水平和垂直两种布局方式,折叠组件以positionabsolute方式进行绝对定位。

折叠组件

折叠组件类ht.widget.AccordionView主要可配置属性和函数如下:

采用简写horizontalh简写形式设置成水平布局方式

leftAccordion.setOrientation('h');

重载getLabelFont函数根据getCurrentTitle()决定显示字体

leftAccordion.getLabelFont = function(title){
    return title === this.getCurrentTitle() ? 'bold 15px arial, sans-serif' : '13px arial, sans-serif';
};

通过setCollapseIconsetExpandIcon分别设置了两个矢量格式的合并和展开图标

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组件,设置其positionabsolute的绝对定位方式,并设置了矢量标题图标

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

欢迎交流 service@hightopo.com