当前位置: 首页 > 编程笔记 >

jQuery消息提示框插件Tipso

屠嘉
2023-03-14
本文向大家介绍jQuery消息提示框插件Tipso,包括了jQuery消息提示框插件Tipso的使用技巧和注意事项,需要的朋友参考一下

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

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

 类似资料:
  • 本文向大家介绍基于jQuery Tipso插件实现消息提示框特效,包括了基于jQuery Tipso插件实现消息提示框特效的使用技巧和注意事项,需要的朋友参考一下 基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: js代

  • pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.messager.defaults 重写默认的 defaults。 消息框(messager)提供不同样式的消息框,包括警示(alert)、确认(confirm)、提示(prompt)、进展(progress)等等。所有的消息框都是异步的。用户可以在与消息框交互后使用回调函数来完成一些动作。

  • pre { white-space: pre-wrap; } jQuery EasyUI 插件 通过 $.fn.tooltip.defaults 重写默认的 defaults。 当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。 用法 创建提示框(Tooltip) 1、从标记创建提示框(Tooltip),添

  • 本文向大家介绍属于你的jQuery提示框(Tip)插件,包括了属于你的jQuery提示框(Tip)插件的使用技巧和注意事项,需要的朋友参考一下 插件可以满足常用的提示显示,支持12个方向,支持边框、背景色、文本颜色自定义,支持位置微调、层级微调、宽度间距等参数调整。 先看看效果: tips:提示信息组件 参数: msg:'asdf',内容 dire:2,方向 w:250,宽度 _x:0,横向偏移

  • 本文向大家介绍flutter Toast实现消息提示框,包括了flutter Toast实现消息提示框的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了flutter Toast实现消息提示框的具体代码,供大家参考,具体内容如下 使用方法 Toast 源码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍编写自己的jQuery提示框(Tip)插件,包括了编写自己的jQuery提示框(Tip)插件的使用技巧和注意事项,需要的朋友参考一下 对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求。但是这毕竟不是长久之道,古人云:“授之以鱼,不如授之以渔”。 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧。 其

  • 本文向大家介绍jQuery带箭头提示框tooltips插件集锦,包括了jQuery带箭头提示框tooltips插件集锦的使用技巧和注意事项,需要的朋友参考一下 摘要:   之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框。 qtip qTip是一种先进的提示插件,基于jQuery框架。以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语

  • 本文向大家介绍jquery SweetAlert插件实现响应式提示框,包括了jquery SweetAlert插件实现响应式提示框的使用技巧和注意事项,需要的朋友参考一下 jquery弹出层插件,支持消息提示、错误提示、确认框提示等。交互体验度非常好,大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴,很符合大众的jquery插件使用方法。 先