jQuery消息提示框插件Tipso


Posted in Javascript onMay 04, 2015

今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API。

jQuery消息提示框插件Tipso

<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');
  }
});

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

Javascript 相关文章推荐
用javascript实现给图片加链接
Aug 15 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
javascript白色简洁计算器
May 04 #Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
You might like
php 字符串替换的方法
2012/01/10 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
javascript闭包传参和事件的循环绑定示例探讨
2014/04/17 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
vue实现购物车小案例
2019/09/27 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
django框架自定义用户表操作示例
2018/08/07 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
python实现对输入的密文加密
2019/03/20 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python库安装速度过慢解决方案
2020/07/14 Python
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
2014年预算员工作总结
2014/12/05 职场文书
公司年夜饭通知
2015/04/25 职场文书
丧事主持词
2015/07/02 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
基于Go Int转string几种方式性能测试
2021/04/28 Golang
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技