jQuery消息提示框插件Tipso
编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门
Tipso是一款基于jQuery的Tooltip提示框插件，他提供了众多参数，如显示动画持续时间、背景颜色、文本颜色、显示位置、加载ajax内容、回调函数等等。
今天我们用Tipso插件来演示八种不同提示效果，并且了解下Tipso API。
<div class="dowebok"> <h2>1、默认</h2> <div class="inner"> <span id="tip1" data-tipso="dowebok.com">Tipso</span> </div> </div>
演示一：默认效果
$('#tip1').tipso({
useTitle: false
});
演示二：左侧显示
$('#tip2').tipso({
useTitle: false,
position: 'left'
});
演示三：背景颜色
$('#tip3').tipso({
useTitle: false,
background: 'tomato'
});
演示四：使用title属性
$('#tip4').tipso();
演示五：单击显示/隐藏
$('#tip5').tipso({
useTitle: false
});
$('#btn5').on({
click: function(e) {
if ($(this).text() == '显示') {
$(this).text('隐藏');
$('#tip5').tipso('show');
} else {
$(this).text('显示');
$('#tip5').tipso('hide');
}
e.preventDefault();
}
});
演示六：更新内容
$('#tip6').tipso({
useTitle: false
});
$('#btn6').on('click', function() {
var $val = $(this).prev().val();
if ($val) {
$('#tip6').tipso('update', 'content', $val);
}
});
演示七：在图片上使用
$('#tip7').tipso({
useTitle: false
});
演示八：回调函数
$('#tip8').tipso({
useTitle: false,
onBeforeShow: function() {
$('#status').html('beforeShow');
},
onShow: function() {
$('#status').html('show');
},
onHide: function() {
$('#status').html('hide');
}
});
以上所述就是本文的全部内容了，希望大家能够喜欢。