如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());
}
});
下面就以上配置参数说明描述如下:










