首页 > 编程 > JavaScript > 正文

jQuery消息提示框插件Tipso

2019-11-20 12:33:31
字体:
来源:转载
供稿:网友

今天我们用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');  }});

以上所述就是本文的全部内容了,希望大家能够喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表