索引
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可以实现同样的功能。可配置的参数如下：
id 面板唯一标识，如果为空，面板内部会自动生成一个唯一标识。如果要获取面板的状态，如是否展开等，需要指定此参数title 面板标题titleBackground 标题栏的背景颜色separatorWidth 内部面板之间分割线的宽度separatorColor 内部面板之间分割线的颜色titleColor 标题文本的颜色borderWidth 边框宽度titleHeight 标题栏的高度titleIcon 面板icon，可以为url或base64字符titleIconSize 标题栏中图片的尺寸，包括展开/合并图标、最小化图标及titleIconrestoreIconSize 恢复图标的尺寸buttons 扩展标题栏中的按钮，此参数为一个数组，数组中元素可以是以下两个字符串：
minimize 最小化按钮toggle 展开/合并按钮independentSwitch 控制independent参数
也可以是js对象，表示自定义按钮，自定义按钮的参数如下：
name 名称，唯一标识，请使用英文字母icon 按钮图片，可以为url或base64字符toolTip 鼠标悬停时的提示文本action: function(paneConfig, panelView, e) 点击时的回调函数
minimizable 面板是否可最小化，为false时表示面板不可最小化，默认为空
minimize 已无效，请使用minimizedminimized 面板是否最小化，为true时表示将面板最小化，默认为空expand 已无效，请使用expandedexpanded 面板是否展开，为false时表示合并，否则展开，默认为空narrowWhenCollapse 如果为true合并面板时收缩宽度exclusive 此参数只在外层面板有效，表示是否只允许展开一个子面板，默认为falseindependent 此参数只在内层面板有效，表示外层面板只允许展开一个子面板时，自身是否独立，换句话说，如果此参数为true，此子面板不受外层面板exclusive参数影响toggleToolTip 展开/合并按钮的toolTiprestoreToolTip 恢复按钮的toolTipcontent 面板的内容，可以为HTML文本、DOM元素或HT组件width 指定面板的宽度，对于HTML文本或DOM元素可以不指定此参数，由HTML内容撑开面板;由于HT组件自身没有尺寸，所以如果content为HT组件，必须指定此参数contentHeight 指定面板内容的高度，对于HTML文本或DOM元素可以不指定此参数，由HTML内容撑开面板;由于HT组件自身没有尺寸，所以如果content为HT组件，必须指定此参数resizeMode 用户鼠标移动到面板右下角时可以resize面板，此参数控制resize模式：w表示只允许调整宽度，h表示只允许调整高度，wh表示宽高都允许调整，none表示不允许resizeitems 此参数为一个数组，数组中每个js对象都表示一个子面板，子面板的配置参数如上。flowLayout 如果为true表示使用流式布局，在此布局下无法使用最小化，拖拽位置、吸附等功能。面板上提供了一些API用于设置或获取面板状态：
setConfig(config) 配置面板参数getPanelConfig(id) 根据id获得面板配置，在配置中可获得width、contentHeight、expanded等状态，只可查询，不可修改getPanelView(id) 根据id获得面板的DIVsetInnerPanel(config) 传入一个指定配置参数的js对象，如果对象的id与面板中某个子面板id重复则更新那个子面板，否则新增一个子面板removeInnerPanel(id) 根据id删除子面板togglePanel(id) 根据id切换面板状态(展开或合并)dragContainment 由setDragContainment(value)和getDragContainment()操作，表示是否限制在父容器中拖拽，默认为parent，改为null可取消限制minimize() 最小化面板restore() 将面板从最小化状态恢复getView() 获得面板DIVsetPosition(x, y) 设置面板在父容器中的位置setPositionRelativeTo(relativeTo) 设置面板相对父容器哪个角落定位，参数枚举如下：
leftTop 默认值，面板的position相对于左上角定位leftBottom 面板的position相对于左下角定位rightTop 面板的position相对于右上角定位rightBottom 面板的position相对于右下角定位
如果希望一个面板始终固定在父容器的右下角，调用下面的API即可：
panel.setPositionRelativeTo('rightBottom');
panel.setPosition(0, 0);addEventListener: function (listener, scope, ahead) 增加事件监听，支持的事件类型：
beginRestore 开始恢复时触发endRestore 恢复结束后触发beginMinimize 开始最小化时触发endMinimize 最小化结束后触发beginToggle 开始合并或展开时触发endToggle 合并或展开结束后触发beginResize 开始resize时触发betweenResize 在resize过程中触发endResize resize结束后触发beginMove 开始移动时触发betweenMove 移动过程中触发endMove 移动结束后触发removeEventListener: function (listener, scope) 删除事件监听此插件还提供了ht.widget.PanelGroup类用于实现面板的角落吸附和自动布局功能，如果需要这些功能，首先要创建一个PanelGroup:
panelGroup= new ht.widget.PanelGroup({//在构造函数中指定吸附的面板之间的间隔
hGap: 10,
vGap: 10
}); 然后通过PanelGroup的API对面板进行分组：
add(panel) 将参数中的面板加到此组中，注意，如果两个面板的父容器不一致，不要加到同一个分组中setLeftTopPanels(panel1, panel2, ..., orientation) 将参数中的多个面板加到此分组中，吸附到左上角并按顺序排列，最后一个参数为字符串，表示排列的方向，枚举值如下：h 水平排列v 垂直排列setLeftBottomPanels(panel1, panel2, ..., orientation) 将参数中的多个面板加到此分组中，吸附到左下角并按顺序排列setRightTopPanels(panel1, panel2, ..., orientation) 将参数中的多个面板加到此分组中，吸附到右上角并按顺序排列setRightBottomPanels(panel1, panel2, ..., orientation) 将参数中的多个面板加到此分组中，吸附到右下角并按顺序排列remove(panel) 将参数中的面板从分组中移除接下来看一个例子：
在需要大量输入的页面中，将表单分组并合并隐藏某些表单可以大幅节省页面空间，使用面板的流式布局很容易实现这种效果：
除了概述章节里提到配置参数，面板还支持使用全局的htconfig对象配置整体风格，可配置的参数如下：
Color.titleIconBackground 指定HT所有组件的标题ICON的颜色，如面板，对话框，AccordionView等Color.titleBackground 指定HT所有组件的标题栏的背景色，如面板，对话框，AccordionView`等
Default.panelTitleLabelColor 指定面板标题栏的文字颜色，默认为Default.labelSelectColor
Default.panelTitleLabelFont 指定面板标题栏的文字字体，默认为Default.labelFontDefault.panelContentLabelFont 指定面板内容区域的文字字体，默认为Default.labelFontDefault.panelTitleBackground 指定面板标题栏的背景色，默认为Color.titleBackgroundDefault.panelSeparatorWidth 指定内部面板之间分割线的宽度，默认为1Default.panelSeparatorColor 指定内部面板之间分割线的颜色，默认为undefinedDefault.widgetTitleHeight 指定面板标题栏的高度当全局风格配置与面板API配置冲突时，以后者为准。
<script>
htconfig = {
Color: {
toolTipBackground: '#DAECF4',
titleBackground: '#076186',
titleIconBackground: 'white',
headerBackground: '#DAECF4',
highlight: '#4799BC',
}
};
</script>