jquery tools之tooltip

如tabs的学习,首先给出操作的html目标代码:

复制代码 代码如下:


<form>
<h3> Registration Form</h3>
<!-- username -->
<label for="username">Username</label>
<input />
<div>Must be at least 8 characters.</div><br/>
<!-- password -->
<label for="password">Password</label>
<input type="password" />
<div>Try to make it hard to guess.</div><br />
<!-- email -->
<label for="username">Email</label>
<input />
<div>We won't send you any marketing material.</div><br />
<!-- message -->
<label for="body">Message</label>
<textarea></textarea>
<div>What's on your mind?</div><br />
</form>


该功能是通过jqueryObject.tooltip()方法来实现的,其中tabs方法提供以下两种方式:
1. $("#myform :input").tooltip()//该方法能采用默认方法显示提示信息栏
2. $("#myform :input").tooltip({config object}) //该方法通过配置对象将来灵活组织提示信息栏的显示。
以下代码为第二种方式的配置参数实现(只需将该实现放于jquery的ready方法中即可):

复制代码 代码如下:


$("#myform :input").tooltip({
position:['center','right'],
offset:[-2,10],
effect:'fade',
fadeInSpeed:300//此属性只有在effect为fade时有效
delay:0,
opacity:1,
tip:"",
api:false,
onBeforeShow:function(){
//alert(this.getTip().html());//this在该回调函数代表即将显示的tooltip对象
//,关于该api对象的操作参见获取tolltip对象的方法
},
onShow:function(){
//alert(this.getTip().html());
},
onBeforeHide:function(){
//alert(this.getTip().html());
},
onHide:function(){
//alert(this.getTip().html());
}
});


下面就以上配置参数说明描述如下:

属性   默认值   描述  
effect   slideup'  

设置提示框出项和隐藏方式,系统提供提供三种effect:toggle,fade,slideup,当然用户也可以定制所需的effect。对于系统提供的三种effect,系统也提供了与其对应的配置参数,这里会在下面单独仔细描述。

 
delay   30   设置鼠标离开触发提示框的触发器后提示框显示时间  
offset   [0, 0]   精确的调整提示框的位置,该属性具体使用将在下面提示框位置说明中详细描述。  
opacity   1   设置提示框的透明度,取值为0-1,值越大表示提示框透明度越低,0为完全透明,此时提示框如同不显示,为1则提示框完全不透明如果背景图片设置为PNG24图形格式,则可以设置背景图片的透明度  
position   ['top', 'center']   初略的设置提示框位置,如需精确控制提示框位置,需配合offset使用,该属性具体使用将在下面提示框位置说明中详细描述。  
tip     设置存储提示框信息的页面元素,tip值格式为jquery选择器格式.默认情况下,提示框信息存放于触犯器元素的下一个紧邻的兄弟节点处,如果该处选择器选择的是页面元素id的话,那么该页面元素将成为所有触发器的提示信息;否则,如果选择器选择出多个结果,那么,每个触发器都会找到其后第一个符合的页面元素作为提示信息.如果没有的话,就从触发器父亲节点重新检索。  
api   FALSE   设置当前tooltip所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。  
onBeforeShow     提示信息出现之前调用该属性触发的函数,如果该回调函数返回false,那么就会阻止提示信息显示。  
onShow     提示信息显示后调用该属性触发的函数  
onBeforeHide     提示信息显示后调用该属性该属性触发的函数,如果该回调函数返回false,那么就会阻止提示信息隐藏  
onHide     提示信息隐藏后调用该属性该属性触发的函数  

提示框位置说明

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

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