基于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 css float属性的特殊写法
Nov 13 Javascript
XENON基于JSON变种
Jul 27 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
js中getter和setter用法实例分析
2018/08/14 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
详解Vue的ref特性的使用
2020/01/24 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
详解python进行mp3格式判断
2016/12/23 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
基于python实现对文件进行切分行
2020/04/26 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
外贸业务员岗位职责
2013/11/24 职场文书
银行业务授权委托书
2014/10/10 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android