Index

• Overview
• AccrodionView Component

Overview

The HT for Web provides a accordion component class ht.widget.AccordionView for multiple-component folding and expansion effect, providing both horizontal and vertical layouts, and the accordion component that are absolutely positioned by setting the position to absolute.

AccordionView Component

Accordion component class ht.widget.AccordionView main configurable properties and functions are as follows:

• isDisabled() and setDisabled(true/false, iconURL) Gets and sets the entire component in an unusable state
• getExpandIcon() and setExpandIcon(icon) Gets and sets expand icons
• getCollapseIcon() and setCollapseIcon(icon) Gets and sets merge icons
• getTitleHeight() and setTitleHeight(24) Gets and sets title height
• getTitleBackground() and setTitleBackground(color) Gets and sets title background color
• getSelectBackground() and setSelectBackground(color) Gets and sets the selected title background color
• getSeparatorColor() and setSeparatorColor(color) Gets and sets the separator line color
• getOrientation() and setOrientation(v/h) Layout direction, the default is vertical or v, can be set to horizontal or h
• add(title, content, expanded, icon) add component:
  • title The title information of the component, different components may not be the same
  • content The content of the component, which can be component objects provide by HT framework or native HTML elements
  • expanded Whether to expand the component, the default is false
  • icon The icon that displayed in the title of component
• remove(title) Delete the specified title component
• clear() Clear all the title components
• getLabelColor(title) and setLabelColor(color) Gets the color of the title
• getLabelFont(title) Gets the font of the title, which can be overloaded with custom
• getTitles() Gets ht.List objects of all title
• getCurrentTitle() Gets the current expanded title component
• isExpanded(title) Whether to expanded the title component
• expand(title) Expands the title component
• onExpanded(title) Called when expanding the title, which can be overloaded with custom
• collapse() Merge the current expanded title
• onCollapsed(title) Called when merging title, can be overloaded for subsequent processing
• drawTitle(g, title, width, height, info) Draw the content of the title, can be overloaded with custom

Use the shorthand of horizontal h set to the horizontal layout

leftAccordion.setOrientation('h');

Overloaded the getLabelFont function and getCurrentTitle() determines the display font

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

Using setCollapseIcon and setExpandIcon to set two vector-format merge and expand icons respectively

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

Built the div component, set its position to absolute, and set the vector title icon

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