小贴士就是系统提示信息,范例中列举了五种类型的Tip使用技巧。
控件的tip属性
第一种比较简单,我们只要设置一个控件的tip属性就可以,如下图:
这样当这个控件显示在网页上的时候,我们只要将鼠标移动到这个控件的上面,就会自动出现提示信息:
dorado.TipManager.initTip
TipManager是一个用于动态定义Tip的工具类,基本方法如:
dorado.TipManager.initTip(dom, {text : "跟踪鼠标移动的Tip",closeable: true});
其中第一个为希望拥有tip特性的目标dom对象,如果是dorado控件我们可以通过控件的getDom()方法获得对应的dom对象。第二个参数是一个Tip属性声明的JSON对象,通过这段JSON创建一个Tip控件,如上例声明了Tip控件的text属性为"跟踪鼠标移动的Tip",closeable为true
更详细的说明请参考Client-API
Tip控件的trackMouse属性
tip控件提供trackMouse属性,如果设置为true,则具有如下的效果:
当鼠标移动到如下的红点出可以出现提示信息
这个时候如果将鼠标平行向右移动到右侧的红点处,可以看到提示信息会跟随鼠标的移动而移动
范例中在一个HTMLContainer控件的onReady事件中写入如下的代码实现上面的鼠标跟踪效果:
dorado.TipManager.initTip(self.getDom(), { text : "跟踪鼠标移动的Tip", icon: "QUESTION", trackMouse: true });
Tip控件的anchorToTarget属性
Tip控件也提供了anchorToTarget属性,如果设置anchorToTarget为true,则Tip就会出现指向所对应的Dom对象的一个箭头,如下图:
范例通过如下代码实现:
dorado.TipManager.initTip(self.getDom(), { caption: "提示信息", text : "这是控件的提示信息...", anchorToTarget: true, align: "center", vAlign: "bottom", arrowDirection: "top" });
Tip控件的content属性
复杂内容的Tip,如下图,鼠标移至红点处:
注意该Tip的中的内容有图片和Dorado超链接。
这是通过Tip控件的content内容定制实现的,如下代码:
dorado.TipManager.initTip(self.getDom(), { caption: "提示信息", content: [{ tagName: "IMG", src: $url(">images/dorado.jpg"), style: "border: 1px lightgray solid; width: 180px; height: 180px" }, { tagName: "DIV", content: "<a href='http://dorado.bstek.com' target='_blank'>Dorado</a>", style: "text-align: center" }], anchorToTarget: true, align: "right", vAlign: "center", arrowDirection: "left", autoHide: false, closeable: true });
直接使用Tip控件
如果在View中直接添加Tip控件:
则可以直接设置Tip控件的相关属性:
如上面设置了icon图标,text显示内容和width宽度,最终显示效果如下图:
Attachments:
image2012-6-18 17:10:39.png (image/png)
image2012-6-18 17:12:14.png (image/png)
image2012-6-18 17:13:10.png (image/png)
image2012-6-18 17:13:35.png (image/png)
image2012-6-18 17:15:58.png (image/png)
image2012-6-18 17:16:33.png (image/png)
image2012-6-18 17:23:31.png (image/png)
image2012-6-18 17:28:20.png (image/png)
image2012-6-18 17:29:26.png (image/png)
image2020-5-9 17:16:11.png (image/png)