www.qjdy.com-奇迹赌场 > 佳美特设计 > 今天我们用Tipso插件来演示八种不同提示效果

原标题:今天我们用Tipso插件来演示八种不同提示效果

浏览次数:60 时间:2019-07-19

前几日大家用Tipso插件来演示两种差别提醒意义,何况询问下Tipso API。

图片 1

<div class="dowebok"> 
  <h2>1、默认</h2> 
  <div class="inner"> 
  Tipso 
  </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');
  }
});

如上所述便是本文的全部内容了,希望大家能够欣赏。

您大概感兴趣的稿子:

  • qTip2 精致的依靠jQuery提示新闻插件
  • jQuery带箭头提示框tooltips插件集锦
  • 编辑本身的jQuery提醒框(Tip)插件
  • jquery-tips悬浮提醒插件分享
  • jquery.cvtooltip.js 基于jquery的血泡提示插件
  • jQuery插件Tooltipster落成优异的工具提醒
  • 属于你的jQuery提示框(Tip)插件
  • 基于jQuery Tipso插件达成新闻提醒框特效
  • poshytip 基于jquery的 插件 主要用以体现博客园人的图像和鼠标提醒等
  • jQuery tip提示插件(实例分享)

本文由www.qjdy.com-奇迹赌场发布于佳美特设计,转载请注明出处:今天我们用Tipso插件来演示八种不同提示效果

关键词:

上一篇:希望大家能够喜欢

下一篇:没有了