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 select下拉框操作的一些说明
Apr 02 Javascript
js更优雅的兼容
Aug 12 Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
原生js生成图片验证码
Oct 11 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数据库类
2009/05/27 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
javascript调试说明
2010/06/07 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
python 生成器需注意的小问题
2020/09/29 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
有针对性的求职自荐信
2013/11/14 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
导师评语大全
2014/04/26 职场文书
网络编辑求职信
2014/04/30 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL