索引
ht.widget.Dialog是一个可灵活配置的模态对话框插件，可配置高度、宽度、内容，样式等，支持在一个页面中创建多个实例，
适合于创建：登录框，注册框，警告对话框等。
在正式使用API之前，您的页面里需要引入相关的js文件：
<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-cssanimation.js"></script> <!--依赖cssanimation插件-->
<script src="ht-form.js"></script> <!--依赖form插件-->
<script src="ht-dialog.js"></script>Dialog提供的API如下：
setConfig(config) 参数config是一个js对象，用于配置对话框的标题，尺寸，内容等。可配置的参数如下：title 对话框的标题closable 可选值为true/false，表示是否显示关闭按钮maximized 将对话框最大化maximizable 可选值为true/false，表示对话框是否可被最大化draggable 指定对话框是否可拖拽调整位置，可选值为true/falseminDragSize 指定对话框在超出父亲容器的最小可拖动区域大小，默认为 20dragMode 指定对话框拖拽模式，inside 表示对话框内容包含在父亲容器中，none 或 null 表示随意拖放，到达边界会留出最小 minDragSize 的可拖动区域 position 指定对话框的的位置，默认为字符串center，也可以通过一个对象格式指定x、y坐标：{x: 0, y: 0}resizeMode 鼠标移动到对话框右下角可改变对话框的大小，此参数控制resize模式：w表示只调整宽度，h表示只调整高度，wh表示宽高都可调整，none表示不可调整宽高content 指定对话框的内容，可以是html文本，或DOM对象，或HT组件对象（自动调用其invalidate）contentPadding 对话框内容区域的内边距width 指定对话框的宽度，如果为空，则取content的offsetWidth。由于HT组件对象没有自有宽度，所以必须指定width属性height 指定对话框的高度，如果为空，则取content的offsetHeight。由于HT组件对象没有自有高度，所以必须指定height属性borderWidth 对话框的边框宽度titleBackground 指定标题栏的背景色titleColor 指定标题栏文字的颜色titleIcon 标题栏图标titleAlign 标题文本对齐方式，可选值为left/right/centerbuttons 指定对话框按钮组内容。参数为一个数组，数组内的元素格式为{label: 'label', className: 'class', action: function(button, event) { }}，其中className指定按钮的样式名称，用于自定义按钮样式
，action为回调函数，当此按钮被当点击时，回调函数会执行buttonsAlign 指定对话框按钮的对齐方式，可选值为left/right/centeraction 全局回调函数，当点击按钮时，单个按钮的回调函数执行完成后再执行此全局回调函数，参数为函数，格式为：function(button, event) { }，button为点击的按钮，event为原生的事件对象(一般为MouseEvent)setSize(width, height) 设置对话框的宽度和高度isShowing() 返回此对话框是否显示maximize() 最大化对话框restore() 与maximize对应，恢复对话框show() 显示对话框hide() 隐藏对话框setTitle(newTitle) 设置新的对话框标题getView() 返回对话框的视图divonShown 回调函数，对话框显示以后回调onHidden 回调函数，对话框隐藏以后回调addEventListener(listener) 增加事件监听器，参数为监听函数，派发的事件种类可以查看简单示例中的DemoremoveEventListener(listener) 删除事件监听器，参数为监听函数adjustPosition(pos, viewSize, parentSize) 对话框位置回调函数，可重载，返回对话框最终位置信息，格式为：{ x: Number, y: Number }接下来看一个简单的例子：
dialog.setConfig({
itle: "title",
titleIcon: 'node_image', //ht内部注册的图片名
content: graph,
width: 250,
height: 250,
draggable: true,
closable: true,
maximizable: true,
resizeMode: "wh",
buttons: [{
label: "Close",
action: function(button, e) {
dialog.hide();
}
}],
buttonsAlign: "center",
action: function(item, e) {
console.log(item, e);
}
});除了概述章节里提到配置参数，面板还支持使用全局的htconfig对象配置整体风格，可配置的参数如下：
Color.titleIconBackground 指定HT所有组件的标题ICON的颜色，如面板，对话框，AccordionView等Color.titleBackground 指定HT所有组件的标题栏的背景色，如面板，对话框，AccordionView等Color.headerBackground 指定HT所有组件的header背景色，如表格表头、工具条等Default.dialogTitleLabelColor 指定对话框标题栏的文字颜色，默认为Default.labelSelectColorDefault.dialogTitleLabelFont 指定对话框标题栏的文字字体，默认为Default.labelFontDefault.dialogTitleBackground 指定对话框标题栏的背景色，默认为Color.titleBackgroundDefault.dialogHeaderBackground 指定对话框底部按钮栏的背景色，默认为Color.headerBackgroundDefault.dialogContentLabelFont 指定对话框内容区域的文字字体Default.dialogButtonBackground 指定对话框底部按钮的背景色Default.dialogButtonSelectBackground 指定对话框底部按钮被按下时的背景色Default.dialogButtonLabelColor 指定对话框底部按钮文本的颜色Default.widgetTitleHeight 指定对话框标题栏的高度<script>
htconfig = {
Color: {
titleBackground: '#076186',
titleIconBackground: 'white',
headerBackground: '#DAECF4'
},
Default: {
dialogButtonBackground: 'rgb(231, 76, 60)',
dialogButtonSelectBackground: 'rgb(196, 65, 51)',
dialogButtonLabelColor: '#fff'
}
};
</script>许多场景里，对话框不仅仅用来展示内容，有时也会放置表单收集用户输入的信息。我们可以利用浏览器提供的querySelector方法查询获得对话框中的DOM对象然后进行操作。
下面的例子演示这个交互过程：
实现原理可以查看示例的源代码。