Skip to end of metadata
Go to start of metadata

基本特性说明

Dialog继承自FloatPanel,其基本特性和使用请参考:FloatPanel(DCUG)

其他特性说明

默认的className为:d-dialog

支持拖拽

Dialog控件支持鼠标的拖拽移动,但是其父类FloatPanel默认是不支持的,除非你设置FlaotPanel的dragable为true.

支持dragOutside特性

默认情况下浏览器中的Dialog拖拽到窗口边上的时候就无法再向外拖动了:

如果设置Dialog的dragOutside为true:

那么上面场景下Dialog还可以被拖动到Window窗口区域之外:

提供最小化功能

Dialgo提供了最小化功能,使用时只要将其minimizeable属性设置为true:

最小化按钮单击时默认执行的就是Dialog的hide()方法。就是隐藏这个Dialog.

可以通过鼠标的拖拽操作改变Dialog的尺寸

通过鼠标拖拽Dialog的边角可以动态调整其尺寸,效果如下:

拖拽的时候会有一个虚线框,表示你实际拖拽的大小。

如果你不喜欢这个功能,可以通过Dialog的resizeable属性设置为false来屏蔽Dialog动态改变尺寸的功能:

提供最小高度和最小宽度设定

Dialog提供了动态改变尺寸的功能,但是如果Dialog的尺寸变的特别小,会导致Dialog的可用性和友好性下降,如下图:

如上图的Dialog,如果我们不把Dialog的尺寸调整到一定大小就根本不知道这个Dialog的内部究竟有什么功能。

但是可以通过minHeight和minWidth属性设置一个下限:

这样无论用户怎么改变Dialog的大小,都有一个下限设定,效果如:

这样在任何情况下我们都能知道这个Dialog的功能。

Dialog默认约定minHeight为100,minWidth为200.因此大多数情况下,你可以不用关心这个功能。

但在特殊场景下,你可以通过这两个属性调整他们的默认值。

关闭系统按钮默认可见

Panel默认情况下关闭按钮是不可见的,Dialog默认情况下关闭按钮是可见的。

支持最大化目标对象设定

提供maximizeTarget属性,用以支持最大化目标对象设定功能,默认情况下如果我们单击Dialog的最大化按钮,他会自动的在本Dialog所在的Window对象下,充满整个window,如下图:

但在某些情况下,我们还希望在Dialog最大化之后,window中的部分元素还可见,这种情况下我们就可以通过maximizeTarget属性解决这个问题了,maximizeTarget属性可以是一个Dorado的控件对象,也可以是dom对象或dom对象的jQuery选择符。

例如,如下的页面:

我们希望Dialog最大化后上面的说明信息依然可见,Dialog只填满下面的这个区域,如下面区域包含了一个Container控件(id为container2),则我们可以设置Dialog的

那么页面中我们去单击最大化按钮,Dialog最大化之后的效果,就是填充container2的所有区域,如下:

Labels
  • No labels