FloatControl是一个抽象类，但是Dorado中很多控件都是基于FloatControl技术实现的，比如说：FloatPanel, Dialog, Tip, Menu。

因此花点时间了解一下FloatControl，就会有利于你快速掌握FloatPanel, Dialog, Tip, Menu这些控件的基本特性和用法。

浮动控件是一种比较特殊的可视化控件。例如：菜单、下拉框、对话框等控件。

初始情况下这些控件是不可见的，直到其render()方法被调用。

一般而言，浮动控件在渲染时不受布局管理器的约束。除非我们显式的为其指定布局条件。

相关特性说明

禁止浮动效果，参与布局

可以通过设置控件的floating属性为false禁止默认的浮动效果，并可以根据默认的布局管理器的布局设置控件本身的布局方式，如Menu我们设置floating为false后：

再设置其布局设定为left:

这样最终的运行效果就如下：

具有自动计算浮动位置的功能

默认情况下会根据外部条件自动计算浮动位置，并在相关位置展现浮动控件，如本例中的菜单，我们将它绑定到备注编辑框中，当我们在编辑框的居中位置右键单击的时候，浮动菜单自动将位置调整到鼠标单击处的右下方显示：

而当我们将鼠标移动到编辑框最右端的时候，如果Menu直接显示在鼠标的右下方将会导致Menu越界，可能的效果如下：

这个时候我们希望Menu可以只能化一些，可以根据当前鼠标的位置以及页面布局的实际情况动态的调整显示位置的话，只要将Menu的autoAdjustPosition属性设置为true,这样上面情况下菜单的显示位置就会调整，效果如下：

不过默认情况下autoAdjustPosition属性都为true，我们无需关注。只在特殊情况下如果你想关闭这个功能的时候可以设置autoAdjustPosition为false.

多种浮动动画效果的支持

通过Menu的showAnimateType和hideAnimateType可以分别设置显示菜单项和隐藏菜单项的动画效果，可选择的有：

值	效果说明	是否默认值
zoom	使用一个灰色的html element的放大或者缩小来展示组件的显示或者隐藏。目前被Dialog使用。	是
slide	通过四个方向(从上到下，从下到上，从左到右，从右到左)四个方向展示组件的显示与隐藏，目前被Menu的showAnimateType使用。
safeSlide	在非IE浏览器下，如果组件内部包含IFrame组件时，使用slide类型的动画，会导致IFrame重新加载，在这种情况下，应该使用safeSlide类型的动画替换之。另外，如果想保留组件中某些组件的滚动条，也需要使用safeSlide替换slide类型的动画。
fade	通过改变组件的html element的透明度来展示组件的显示或者隐藏，目前被Tip使用。
none	不使用动画，直接显示或者隐藏。

IDE设计视图：

animateType属性说明：一般情况下如果控件没有设置showAnimateType与hideAnimateType属性的时候，其动画效果由animateType决定，但是showAnimateType与hideAnimateType的优先级高于animateType

zoom动画效果下支持动画开始源设置

如果我们将showAnimateType设置为zoom时，这个时候就可以做动画开始源的效果。例如我们在页面上添加了一个按钮，我们希望动画从这个按钮开始，则在刚才范例中我们设置Menu的onReady事件中加入如下的代码：

self.set("animateTarget", view.get("#button1"));

页面执行效果：

这种动画效果给你一种感觉，这个菜单是从按钮中飞出来的。同样如果你将hideAnimateType的值也设置为zoom,则上面的范例隐藏按钮就是一个相反的动画效果，似乎是这个菜单被按钮收起来了。

支持浮动控件模态处理

以菜单为例，如果我们将modal属性设置为true,就表示打开了Menu的模态功能，所谓浮动控件的模态是指当你打开浮动控件后，你无法对浮动控件背后的其他控件做任何操作，就一个起一个屏蔽操作的效果。

模态的页面风格有两种展现效果，一种是将背景色置黑，如下：

如果不喜欢带背景的风格也可以采用transparent风格(没有背景色，但是也无法操作浮动控件下方的其他控件)：

要配置和设定这两种风格，可以通过modalType属性设定(modal为true情况下才有意义):

支持浮动目标位置设定

参考范例：

// @Bind #menu.onReady
!function(self)
self.set({
	"anchorTarget":view.get("#button1"),
	"offsetLeft":2,
	"offsetTop":2,
	"align":"left",
	"vAlign":"top"
});

通过上面的代码，我们将Menu右键弹出的位置锚定的目标设置为button1控件，并设置了锚定的align，vAlign等详细属性。

页面效果图：

居中显示

通过设置其center属性为true，可以使得FloatControl控件自动在容器的中间浮动显示：

显示效果：

相关事件说明

beforeShow和onShow事件

beforeShow是在FloatControl控件显示之前触发的事件，onShow是FloatControl显示之后触发的事件。应用范例介绍：

// @Bind #dialogEmployee.beforeShow
!function(self, dsCondition) {
	var entity = dsCondition.get("entity");
	if (entity && entity.get("prop1")=="type1"){
		arg.processDefault = false;//利用arg.processDefault禁止Dialog显示
		dorado.MessageBox.alert("prop1属性值为type1,不允许显示Dialog");
	}
}

// @Bind #dialogEmployee.onShow
!function(self) {
	var editor = view.get("editor1");
	editor.setFocus();//显示Dialog后,自动将光标定位在editor1上
}

beforeHide和onHide事件

beforeHide是在FloatControl控件隐藏之前触发的事件，onHide是FloatControl隐藏之后触发的事件。应用范例介绍：

// @Bind #dialogEmployee.beforeHide
!function(self, actionUpdate) {
	var hasUpdateData = actionUpdate.get("hasUpdateData");
	if (hasUpdateData){
		arg.processDefault = false;//利用arg.processDefault禁止Dialog隐藏
		dorado.MessageBox.alert("员工信息未保存，请先保存再关闭!");
	}
}

// @Bind #dialogEmployee.onHide
!function(self) {
	var editor = view.get("editorQueryId");
	editor.setFocus();//关闭Dialog后,自动将光标定位在查询表单的工号编辑框上
}

Dorado 9 : FloatControl(DCUG)