HT 面板手册

索引


概述

ht.widget.Panel面板是一种容器组件,面板内部可以放置HTML文本、DOM元素或HT组件,面板自身实现了子面板、拖拽位置、resize、吸附、成组,展开/合并、 最小化/恢复、流式布局等功能。

注意:此插件依赖CSS动画插件

在正式使用API之前,您的页面里应该引入相关的js

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-cssanimation.js"></script>
<script src="ht-panel.js"></script>

面板的使用方法很简单,只需要创建出一个面板对象,在构造函数中传入一个js对象指定面板的配置参数,如标题、宽度、高度、内容等;也可以不在构造函数中指定, 面板创建完成后,调用setConfig可以实现同样的功能。可配置的参数如下:

面板上提供了一些API用于设置或获取面板状态:

此插件还提供了ht.widget.PanelGroup类用于实现面板的角落吸附和自动布局功能,如果需要这些功能,首先要创建一个PanelGroup:

panelGroup= new ht.widget.PanelGroup({//在构造函数中指定吸附的面板之间的间隔
    hGap: 10,
    vGap: 10
});

然后通过PanelGroupAPI对面板进行分组:

示例

接下来看一个例子:

流式布局

在需要大量输入的页面中,将表单分组并合并隐藏某些表单可以大幅节省页面空间,使用面板的流式布局很容易实现这种效果:

自定义样式

除了概述章节里提到配置参数,面板还支持使用全局的htconfig对象配置整体风格,可配置的参数如下:

当全局风格配置与面板API配置冲突时,以后者为准。

<script>
    htconfig = {
        Color: {
            toolTipBackground: '#DAECF4',
            titleBackground: '#076186',
            titleIconBackground: 'white',
            headerBackground: '#DAECF4',
            highlight: '#4799BC',
        }
    };
</script>

欢迎交流 service@hightopo.com