基于jQuery Tipso插件实现消息提示框特效


Posted in Javascript onMarch 16, 2016

基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下

基于jQuery Tipso插件实现消息提示框特效

在线演示 源码下载

实现的代码:

<div class="dowebok">
  <h2>
   1、默认</h2>
  <div class="inner">
   <span id="tip1" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   2、左边显示</h2>
  <div class="inner">
   <span id="tip2" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   3、背景颜色</h2>
  <div class="inner">
   <span id="tip3" data-tipso="dowebok.com">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   4、使用title属性</h2>
  <div class="inner">
   <span id="tip4" title="内容来自 title 属性">Tipso</span></div>
 </div>
 <div class="dowebok">
  <h2>
   5、单击显示/隐藏</h2>
  <div class="inner">
   <span id="tip5" data-tipso="dowebok">Tipso</span>
   <p>
    <a id="btn5" href="javascript:">显示</a></p>
  </div>
 </div>
 <div class="dowebok">
  <h2>
   6、更新内容</h2>
  <div class="inner">
   <span id="tip6" data-tipso="dowebok.com">Tipso</span>
   <p>
    <input type="text"><a id="btn6" href="javascript:">更新</a></p>
  </div>
 </div>
 <div class="dowebok">
  <h2>
   7、在图片上使用</h2>
  <div class="inner">
   <img id="tip7" src="images/tipso.png" alt="" data-tipso="dowebok.com">
  </div>
 </div>
 <div class="dowebok">
  <h2>
   8、回调函数</h2>
  <div class="inner">
   <span id="tip8" data-tipso="dowebok.com">Tipso</span>
   <p>
    状态:<em id="status"></em></p>
  </div>
 </div>

js代码:

$(function () {
   // 1
   $('#tip1').tipso({
    useTitle: false
   });

   // 2
   $('#tip2').tipso({
    useTitle: false,
    position: 'left'
   });

   // 3
   $('#tip3').tipso({
    useTitle: false,
    background: 'tomato'
   });

   // 4
   $('#tip4').tipso();

   // 5
   $('#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();
    }
   });

   // 6
   $('#tip6').tipso({
    useTitle: false
   });
   $('#btn6').on('click', function () {
    var $val = $(this).prev().val();
    if ($val) {
     $('#tip6').tipso('update', 'content', $val);
    }
   });

   // 7
   $('#tip7').tipso({
    useTitle: false
   });

   // 8
   $('#tip8').tipso({
    useTitle: false,
    onBeforeShow: function () {
     $('#status').html('beforeShow');
    },
    onShow: function () {
     $('#status').html('show');
    },
    onHide: function () {
     $('#status').html('hide');
    }
   });
  });

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript编程起步(第七课)
Feb 27 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
javascript 函数调用规则
Aug 26 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
Jquery技巧(必须掌握)
Mar 16 #Javascript
Javascript的表单验证长度
Mar 16 #Javascript
Uploadify上传文件方法
Mar 16 #Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 #Javascript
原生JS实现平滑回到顶部组件
Mar 16 #Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 #Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 #Javascript
You might like
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
bootstrap table小案例
2016/10/21 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python机器学习之神经网络(三)
2017/12/20 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Python中生成ndarray实例讲解
2021/02/22 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
中学生寄语大全
2014/04/03 职场文书
12岁生日演讲稿
2014/05/14 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
保证书格式
2015/01/16 职场文书
跳高加油稿
2015/07/21 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Go语言怎么使用变长参数函数
2022/07/15 Golang