源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery消息提示框插件Tipso

  • 时间:2021-01-01 14:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery消息提示框插件Tipso
今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API。 [img]http://files.jb51.net/file_images/article/201505/201554163434426.jpg?201544163450[/img]
<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');
  }
});
以上所述就是本文的全部内容了,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部