js消息提示通知插件SmallPop

所属分类:UI-工具提示

 1328  33  查看评论 (0)
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 

相关插件-工具提示

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 10888  74

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 10334  36

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

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

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 7074  93

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

取消回复