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 相关文章推荐
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
如何抽象一个Vue公共组件
Oct 17 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
JS window对象简单操作完整示例
Jan 14 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作的文本留言本的例子(六)
2006/10/09 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
详解Vue.js 响应接口
2020/07/04 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python使用pymysql实现操作mysql
2016/09/13 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
兰兰过桥教学反思
2014/02/08 职场文书
毕业实习评语
2014/02/10 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
给校长的建议书400字
2014/05/15 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书