jquery tools之tooltip(2)

       提示框位置通过config配置对象的positionoffset属性来设置实现。这两个属性都是用js数组进行值存放的。

       Position属性用来设置提示信息相对于它的触发元素位置。比如说,如果该属性值为[‘bottom','center'],那么提示信息将会出现在其触发元素的正下方(垂直位置为下方,水平位置为中间)。下图能很好的描述触发元素与提示信息的位置关系:

jquery tools之tooltip - gaoyusi - My code life

offset属性用来进一步精确的调整提示框的位置。比如:[10,-20]表示提示信息向下10px并向左偏移20px。数组的前一个值用于描述提示框距其上边框向下偏移的值;数组的后一个值 用于描述提示框距其左边框向右偏移的值。

系统内置effect描述

系统内置的三种effect及其参数设置说明:

toggle:一种简单的显示/隐藏效果,这里tooltip没有提供与之对应的配置参数

fade:一种逐渐显示/逐渐隐藏的效果,这里tooltip提供了两个与其对应的配置参数:

fadeInSpeed——默认值为200ms,用于设置提示信息逐渐显示的速度。

fadeUotSpeed——默认值为200ms,用于设置提示信息逐渐隐藏的速度。

slideup:一种逐渐向上/下滑动的效果,这里tooltip提供了三个与其对应的配置参数:

slideOffset——默认值为10,用于描述提示信息在垂直方向上滑动到距触发元素的距离,如果为正值,那么就是向上滑动,否则为向下滑动。

slideInSpeed——默认值为200ms。用于设置提示信息滑动显示的速度(时间)

slideOutSpeed——默认值为200ms。用于设置提示信息滑动消失的速度(时间)

此外,tooltip还提供了一系列获取tooltip对象的方法,具体实现描述如下:

复制代码 代码如下:


var tooltip=$("#myform input").tooltip(2);//取第3个tooltip对象
tooltip.show();
tooltip.hide();
//alert(tooltip.isShown());
//alert(tooltip.getTip().html());
//alert(tooltip.getTrigger().next().html());
//alert(tooltip.getConf().effect);
tooltip.onBeforeShow=function()
//alert(this.getTip().html());
}

tooltip.onShow=function(){
alert(this.getTip().html());
}

tooltip.onBeforeHide=function(){
alert(this.getTip().html());
}

tooltip.onHide=function(){
alert(this.getTip().html());
}


下面就以上获取tooltip对象的方法说明描述如下:

方法名   返回值   描述  
show()   API   显示提示信息,如果取到多个tooltip对象,默认显示第一个tooltip对象提示信息  
hide()   API   隐藏提示信息  
isShown()   boolean   该tooltip对象的提示信息是否处于显示状态  
getTip()   jQuery   将当前tooltip对象转换为jquery对象  
getTrigger()   jQuery   将当前tooltip的触发器对象转换为jquery对象  
getConf()   Object   getConf()获取当前触发器器配置对象,对于对象内的每个属性调用只需直接取属性名即可  
onBeforeShow   API   同Config参数配置对象中的onBeforeShow  
onShow   API   同Config参数配置对象中的onShow  
onBeforeHide   API   同Config参数配置对象中的onBeforeHide  
onHide   API   同Config参数配置对象中的onHide  

最后,以jquery tools上几个demo的截图为结尾:

jquery tools之tooltip - gaoyusi - My code life

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwyxf.html