jquery tools之tooltip

2020-05-23 06:00:34易采站长站整理

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

<form id=”myform”>
<h3> Registration Form</h3>
<!– username –>
<label for=”username”>Username</label>
<input id=”username” />
<div class=”tooltip”>Must be at least 8 characters.</div><br/>
<!– password –>
<label for=”password”>Password</label>
<input id=”password” type=”password” />
<div class=”tooltip”>Try to make it hard to guess.</div><br />
<!– email –>
<label for=”username”>Email</label>
<input id=”email” />
<div class=”tooltip”>We won’t send you any marketing material.</div><br />
<!– message –>
<label for=”body”>Message</label>
<textarea id=”body”></textarea>
<div class=”tooltip”>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());
}
});


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


 













属性默认值描述
effectslideup’

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