今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件。效果图如下:

在线预览   源码下载

实现的代码:

  1. <div class="dowebok">
  2. <h2>
  3. 1、默认</h2>
  4. <div class="inner">
  5. <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
  6. </div>
  7. <div class="dowebok">
  8. <h2>
  9. 2、左边显示</h2>
  10. <div class="inner">
  11. <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
  12. </div>
  13. <div class="dowebok">
  14. <h2>
  15. 3、背景颜色</h2>
  16. <div class="inner">
  17. <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
  18. </div>
  19. <div class="dowebok">
  20. <h2>
  21. 4、使用title属性</h2>
  22. <div class="inner">
  23. <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
  24. </div>
  25. <div class="dowebok">
  26. <h2>
  27. 5、单击显示/隐藏</h2>
  28. <div class="inner">
  29. <span id="tip5" data-tipso="dowebok">Tipso</span>
  30. <p>
  31. <a id="btn5" href="javascript:">显示</a></p>
  32. </div>
  33. </div>
  34. <div class="dowebok">
  35. <h2>
  36. 6、更新内容</h2>
  37. <div class="inner">
  38. <span id="tip6" data-tipso="dowebok.com">Tipso</span>
  39. <p>
  40. <input type="text"><a id="btn6" href="javascript:">更新</a></p>
  41. </div>
  42. </div>
  43. <div class="dowebok">
  44. <h2>
  45. 7、在图片上使用</h2>
  46. <div class="inner">
  47. <img id="tip7" src="data:images/tipso.png" alt="" data-tipso="dowebok.com">
  48. </div>
  49. </div>
  50. <div class="dowebok">
  51. <h2>
  52. 8、回调函数</h2>
  53. <div class="inner">
  54. <span id="tip8" data-tipso="dowebok.com">Tipso</span>
  55. <p>
  56. 状态:<em id="status"></em></p>
  57. </div>
  58. </div>

js代码:

  1. $(function () {
  2. // 1
  3. $('#tip1').tipso({
  4. useTitle: false
  5. });
  6. // 2
  7. $('#tip2').tipso({
  8. useTitle: false,
  9. position: 'left'
  10. });
  11. // 3
  12. $('#tip3').tipso({
  13. useTitle: false,
  14. background: 'tomato'
  15. });
  16. // 4
  17. $('#tip4').tipso();
  18. // 5
  19. $('#tip5').tipso({
  20. useTitle: false
  21. });
  22. $('#btn5').on({
  23. click: function (e) {
  24. if ($(this).text() == '显示') {
  25. $(this).text('隐藏');
  26. $('#tip5').tipso('show');
  27. } else {
  28. $(this).text('显示');
  29. $('#tip5').tipso('hide');
  30. }
  31. e.preventDefault();
  32. }
  33. });
  34. // 6
  35. $('#tip6').tipso({
  36. useTitle: false
  37. });
  38. $('#btn6').on('click', function () {
  39. var $val = $(this).prev().val();
  40. if ($val) {
  41. $('#tip6').tipso('update', 'content', $val);
  42. }
  43. });
  44. // 7
  45. $('#tip7').tipso({
  46. useTitle: false
  47. });
  48. // 8
  49. $('#tip8').tipso({
  50. useTitle: false,
  51. onBeforeShow: function () {
  52. $('#status').html('beforeShow');
  53. },
  54. onShow: function () {
  55. $('#status').html('show');
  56. },
  57. onHide: function () {
  58. $('#status').html('hide');
  59. }
  60. });
  61. });

基于jQuery消息提示框插件Tipso的更多相关文章

  1. jQuery消息提示框插件Tipso

    在线演示 本地下载

  2. 基于jquery的提示框JavaScript 插件,类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  3. Flutter Toast消息提示框插件

    Flutter Toast消息提示框插件 在开发flutter项目中,想必大家肯定会用到toast消息提示,说到这里, 大家肯定会想到https://pub.dev/ 插件库, 但是插件市场上有太多类 ...

  4. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  5. jquery消息提示框

    用于ajax类型提示的,只显示一个. 只是给个思路而已,代码有很多不足. 4个参数,有2个是可选 调用 $.mTip('类型','显示内容',显示时间,回调函数) 类型: 0 为加载 1 为成功 2 ...

  6. TIPSO--基于JQUERY的消息提示框插件,用起来蛮顺手

    项目产品经理要求, 呵呵,关于描述,十个字以内的,直接显示,多于十个字的,用消息框提示: 相关模板及JS如下: $(function() { $('.tip').tipso({ useTitle: f ...

  7. jQuery 消息提示/通知插件

    常见消息提醒,类似于Chrome notification,易于使用,用户体验赞. // Simple $.sticky('hi, every body rock!'); // Advantage $ ...

  8. 强大的响应式jQuery消息通知框和信息提示框插件

    lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...

  9. [原]发布一个jQuery提示框插件,Github开源附主站,jquery.tooltips.js

    一个简单精致的jQuery带箭头提示框插件 插件写好快一年了,和一个 弹出框插件(点击查看) 一起写的,一直没有整理出来,昨天得功夫整理并放到了github上,源码和网站均可在线看或下载. CSS中的 ...

随机推荐

  1. redis学习-列表(list)常用命令

    redis学习-列表(list)常用命令   lpush:从列表左侧头部添加数据 rpush:从右侧尾部添加数据 lpop:从给左侧头部取出一个元素 rpop:从右侧尾部取出一个元素 lrange:取 ...

  2. JAVA主流日志梳理

    JAVA主流日志梳理 引入 历史故事 Log4j - JDK1.3及以前 JUL - JDK1.4 JCL - 日志门面commons-logging的出现 SLF4j - 可能是最好的日志框架 lo ...

  3. SpringCloud-分布式配置中心(基于SpringBoot2.X)

    一.配置中心的作用:可以将多种应用的配置进行集中式的管理,将这些配置统一存放到git或svn里面存储: 二.搭建SpringCloud-Config-Server 2.1如图后续步骤勾选Config ...

  4. mysql中加入海量数据

    delimiter // create procedure m() begin declare num int; set num=1; while num < 100000 insert int ...

  5. 2019/3/2周末 java集合学习(一)

    Java集合学习(一) ArraysList ArraysList集合就像C++中的vector容器,它可以不考虑其容器的长度,就像一个大染缸一 样,无穷无尽的丢进去也没问题.Java的数据结构和C有 ...

  6. hadoop2.7集群安装

    1. 按照官方文档对单节点的配置,将etc/hadoop/core-site.xml中的localhost改成node13. http://hadoop.apache.org/docs/r2.7.3/ ...

  7. vue图片上传

    之前花了两个月用vue做了一个建筑照片我的webApp,前端就我一人,负责用vue写页面对接接口,后台一个程序员负责写接口,嵌套个安卓ios的壳.搞的是风风火火,过程也是很心累,大多不在技术,在于所谓 ...

  8. python yield 关键字

    最近看代码看到python里面的yield关键字,和我之前接触的语言好像都没有来着,我就查了查它的含义,大概理解如下: >>> def createGenerator(): ... ...

  9. Photon自定义加载Resource之外的资源

    PhotonNetwork.cs 结尾添加如下代码: #region >>> Photon自定义异步加载GameObject public delegate void CustomL ...

  10. .net core DI 注册 Lazy<> 类型

    当我们在 .net core (2.1) 中运行如下代码注入 Lazy<T> 变量的时候: public AccountService(Lazy<IHttpContextAccess ...