基于jQuery的js无阻塞消息提示插件--toastr

插件资源 2015-09-25 1969阅读 0评论 0收藏 收藏本文

notification toastr是一款无阻塞的Javascript消息提示插件,它依赖jQuery(即在使用toastr之前得先引入jQuery库)。toastr的存在是为了提供一个可以自定义和扩展的简单的核心消息提示库。 toastr安装非常简单,你可以使用以下三种方式的任意一种来安装:

NuGet Gallery

Install-Package toastr

Bower

bower install toastr

npm

npm install --save toastr
在安装好之后,我们只需要将相关的js和css文件引入到文件中,涉及到的js和css文件有:  
  • 引用jQuery库
  • 引用toastr.css <link href="toastr.css" rel="stylesheet"/>
  • 引用toastr.js <script src="toastr.js"></script>
  接下来,就可以欢快地使用toastr来弹出各种样式的提示消息了,如:
toastr.info('这是使用toastr实现的无阻塞提示消息,很酷吧?')
toastr-simple-info 其他样式及配置选项:
// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')

// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')

// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')

// Immediately remove current toasts without using animation
toastr.remove()

// Remove current toasts using animation
toastr.clear()

// Override global options
toastr.success('We do have the Kapua suite available.', 'Turtle Bay Resort', {timeOut: 5000})
toastr-simple-error toastr-simple-success toastr-simple-warning toastr还支持: HTML消息内容:
toastr.options.escapeHtml = true;
关闭按钮:
toastr.options.closeButton = true;
//或者自定义关闭按钮样式
toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';
设置最新消息的位置(默认在顶端):
toastr.options.newestOnTop = false;
支持回调函数:
toastr.options.onShown = function() { console.log('hello'); }
toastr.options.onHidden = function() { console.log('goodbye'); }
支持各种过渡及动画:
toastr.options.showEasing = 'swing';
toastr.options.hideEasing = 'linear';
toastr.options.closeEasing = 'linear';

toastr.options.showMethod = 'slideDown';
toastr.options.hideMethod = 'slideUp';
toastr.options.closeMethod = 'slideUp';
自定义toastr自动隐藏时间:
toastr.options.timeOut = 30; // How long the toast will display without user interaction
toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it
在toastr中配置是否显示进度条:
toastr.options.progressBar = true;
以上是对toastr无阻塞消息提示插件的概述,如需查看演示效果,请转至toastr的官方演示:http://codeseven.github.io/toastr/demo.html 希望对你的UI开发有所帮助!!! 如果觉得为你推荐的toastr插件还不错,请点一下在本文下方的“喜欢”按钮吧!!!

转载请注明:图享网 » 基于jQuery的js无阻塞消息提示插件--toastr

文章评论

获取验证码