js消息提示通知插件SmallPop

所属分类:UI-工具提示

 5797  85  查看评论 (3)
js消息提示通知插件SmallPop ie兼容9

SmallPop

一个轻量级的弹出提示通知插件没有依赖关系,使用这个JavaScript插件轻松创建通知。

使用方法

在页面中引入spop.css和spop.js文件。

<link rel="stylesheet" type="text/css" href="./css/spop.css">
<script type="text/javascript" src="./js/spop.js"></script>

初始化toast

该js toast消息提示插件最基本的使用方法如下:

spop('Default SmallPop');
spop('<h4 class="spop-title">Success</h4>I′m a success SmallPop', 'success');
spop('<strong>Warning pop</strong>', 'warning');
spop('<strong>Error Here!</strong>', 'error');

分组

可以对消息进行分组,分组后的消息每次只显示一条。

spop({
    template: 'All fields are required!',
    group: 'submit-satus',
    style: 'error'
});
spop({
    template: 'Your information has been submitted',
    group: 'submit-satus',
    style: 'success'
    autoclose: 2000
});

回调函数

在toast消息提示打开和关闭时都可以使用回调函数。

spop({
    template: 'Please, close me.',
    onOpen: function() {
        document.body.style.background = "#fff";
    },
    onClose: function() {
        document.body.style.background = "";
        spop({
            template: 'Thank you!',
            style: 'success',
            autoclose: 2000
        });
    }
});

配置参数

spop.js消息提示插件的可用配置参数如下:

spop({
	template  : null,// string required. Without it nothing happens!
	style     : 'info',// success, warning or error
	autoclose : false,// miliseconds
	position  : 'top-right',// top-left top-center bottom-left bottom-center bottom-right
	icon      : true,// or false
	group     : false,// string, add a id reference
	onOpen    : funtion() { },
	onClose   : funtion() { }
});
  • template:消息提示的模板。可以是一个字符串,或这是HTML代码。

  • style:toast消息提示的主题样式,可以是info,success, warning 或 error。

  • autoclose:是否自动关闭。

  • position:toast消息提示的位置。可以是:top-right,top-left,top-center,bottom-left,bottom-center或bottom-right。

  • icon:是否显示图标。

  • group:是否对消息进行分组。

  • onOpen:toast消息提示打开时的回调函数。

  • onClose:toast消息提示关闭时的回调函数spop.js 

相关插件-工具提示

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 15987  120

一款腾讯UED设计的提示插件

一款腾讯UED设计的提示插件
  工具提示
 16294  121

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 9264  51

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 16946  95

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    〓布衣〓 0
    2018/5/15 10:17:40
    我的 IE11下 用不了 不知道为什么 回复
    * 拨片 0
    2018/1/29 11:00:43

    关闭的时候 消息弹窗会闪一下  ,如何解决呢

        Drury0
        2018/5/8 0:10:11
        我也有有这个问题
    回复
取消回复