Dorado 9 : 小贴士(sample-center)

小贴士就是系统提示信息,范例中列举了五种类型的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宽度,最终显示效果如下图: