基于jQuery的message插件实现右下角弹出消息框

2019-12-24,,,

1.$.messager.lays(width, height);


该方法主要用来定义弹出窗口的宽度和高度。


2.$.messager.anim(type,speed);


该方法主要定义窗口以什么样的方式和速度呈现。


$.messager.anim("fade",1000); //以fadeIn的动画方式显示


$.messager.anim("show",1000); //以show的动画方式显示


3.$.messager.show(title,text,time);


该方法主要定义窗口显示的内容,以及窗口显示多长时间后进行隐藏。


如果使用默认的标题,则将title设置为0,另外title和text还可以设置为html内容进行显示。如果希望用户点击弹窗的关闭按钮才关闭消息框,可将time设置为0。


$.messager.show(0, "这是一个提示框",5000);


$.messager.show("<font color='red'>提示信息</font>","<a href='http://www.cnblogs.com'>博客园欢迎你</a>",3000);


   在明白了message插件中每个方法的作用后,使用起来就很简单了,具体操作如下:


1.在页面引入jquery.js和jquery.messager.js文件。


2.在页面加载的时候调用message插件中的函数,设置窗口的大小,显示效果,以及显示内容。
复制代码 代码如下:
$(function () {
$.messager.lays(200, 200);
$.messager.anim('fade', 1000);
$.messager.show("提示信息", "<a href='//www.jb51.net'>北冥有鱼</a>",5000);
});

3.最后显示的效果如下图。
 
在线演示地址 http://demo.jb51.net/js/jquery.messager/index.html
插件下载:jquery.message.js打包下载地址 //www.jb51.net/jiaoben/22351.html

您可能感兴趣的文章:

  • JQuery的Alert消息框插件使用介绍
  • jquery插件jquery.confirm弹出确认消息
  • 基于JQuery 的消息提示框效果代码
  • jquery判断浏览器后退时候弹出消息的方法
  • 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码
  • Notify - 基于jquery的消息通知插件
  • jQuery实现鼠标移到元素上动态提示消息框效果
  • 基于jQuery的弹出消息插件 DivAlert之旅(一)
  • 让新消息在网页标题闪烁提示的jQuery代码
  • jquery自定义显示消息数量

《基于jQuery的message插件实现右下角弹出消息框.doc》

下载本文的Word格式文档,以方便收藏与打印。