学习要点:
1.调用 tooltip()方法
2.修改 tooltip()样式
3.tooltip()方法的属性
4.tooltip()方法的事件
5.tooltip()中使用 on()
工具提示(tooltip),是一个非常实用的 UI。它彻底扩展了 HTML 中的 title 属性,让提示更加丰富,更加可控制,全面提升了用户体验。
一.调用 tooltip()方法
在调用 tooltip()方法之前,首先需要针对元素设置相应 title 属性。
<input type="text" name="user" class="text" id="user" title="请输入帐号, 不小于 2 位! " />
$('#user').tooltip();
二.修改 tooltip()样式
在弹出的 tooltip 提示框后,在火狐浏览器中打开 Firebug 或者右击->查看元素。这样,我们可以看看 tooltip 的样式,根据样式进行修改。
//无须修改 ui 里的 CSS,直接用 style.css 替代掉
.ui-tooltip {
color:red;
}
注意:其他修改方案类似。
三.tooltip()方法的属性
对话框方法有两种形式:1.tooltip(options),options 是以对象键值对的形式传参,每个键值对表示一个选项;2.tooltip('action', param),action 是操作对话框方法的字符串,param则是 options 的某个选项。
$('[title]').tooltip({
disabled : false,
content : '改变文字',
items : 'input',
tooltipClass : 'reg_tooltip'
});
$('#user').tooltip({
position : {
my : 'left center',
at : 'right+5 center'
}
});
$('#user').tooltip({
show : false,
hide : false,
});
注意:设置 true 后,默认为淡入淡出,如果想使用别的特效,可以使用以下表格中的字符串参数。
$('#user').tooltip({
show : 'blind',
hide : 'blind',
});
$('#user').tooltip({
track : true,
});
四.tooltip()方法的事件
除了属性设置外,tooltip()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。 这些回调函数中的 this 值等于对话框内容的div 对象, 不是整个对话框的 div。
//当创建工具提示时
$('#user').tooltip({
create : function () {
alert('创建触发!');
}
});
//当工具提示关闭时
$('#user').tooltip({
close : function () {
alert('关闭触发');
}
});
//当工具提示打开时
$('#user').tooltip({
open : function () {
alert('打开触发');
}
});
//打开工具提示
$('#user').tooltip('open');
//关闭工具提示
$('#user').tooltip('close');
//禁用工具提示
$('#user').tooltip('disable');
//启用工具提示
$('#user').tooltip('enable');
//删除工具提示
$('#user').tooltip('destroy');
//获取工具提示 jQuery 对象
$('#user').tooltip('widget');
//获取某个 options 的 param 选项的值
var title = $('#user').tooltip('option', 'content');
alert(title);
//设置某个 options 的 param 选项的值
$('#reg').dialog('option', 'content', '提示内容');
五.tooltip()中使用 on()
在 tooltip 的事件中,提供了使用 on()方法处理的事件方法。
$('#reg').on('tooltipopen', function () {
alert('打开时触发!');
});