手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery消息提示框插件Tipso
jQuery消息提示框插件Tipso
摘要:今天我们用Tipso插件来演示八种不同提示效果,并且了解下TipsoAPI。1、默认Tipso演示一:默认效果$('#tip1').tips...

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

jQuery消息提示框插件Tipso1

<div> <h2>1、默认</h2> <div> <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'); } });

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

【jQuery消息提示框插件Tipso】相关文章:

JQuery插件ajaxfileupload.js异步上传文件实例

jQuery+ajax实现无刷新级联菜单示例

jQuery实现控制文字内容溢出用省略号(…)表示的方法

jQuery计算文本框字数及限制文本框字数的方法

jQuery封装的tab选项卡插件分享

MSN消息提示类

jQuery替换textarea中换行的方法

jQuery插件支持同一页面被多次调用

jQuery插件jRumble实现网页元素抖动

jQuery的基本概念与高级编程

精品推荐
分类导航