jQuery消息提示框插件Tipso_jquery
程序员文章站
2022-05-06 10:16:16
...
今天我们用Tipso插件来演示八种不同提示效果,并且了解下Tipso API。
1、默认
Tipso
演示一:默认效果
$('#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'); } });
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇: JS对URL字符串进行编码/解码分析
下一篇: js中三级联动的实现
推荐阅读
-
编写自己的jQuery提示框(Tip)插件
-
分享一个基于jQuery,backbone.js和underscore.js的消息提示框架 - Backbone.Notifier
-
JQuery信息提示框插件jquery.toast.js
-
基于jquery的提示框JavaScript 插件,类Bootstrap
-
jquery简易版xwPop.js弹出消息对话框插件
-
jquery插件制作 提示框插件实现代码
-
编写自己的jQuery提示框(Tip)插件
-
基于jQuery的message插件实现右下角弹出消息框_jquery
-
基于JQuery 的消息提示框效果代码_jquery
-
Jquery 能够自动消失的消息提示框