Heim > Web-Frontend > js-Tutorial > 基于jQuery的message插件实现右下角弹出消息框_jquery

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

WBOY
Freigeben: 2016-05-16 18:12:25
Original
1274 Leute haben es durchsucht

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("提示信息","博客园欢迎你",3000);

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

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

2.在页面加载的时候调用message插件中的函数,设置窗口的大小,显示效果,以及显示内容。

复制代码 代码如下:

$(function () {
$.messager.lays(200, 200);
$.messager.anim('fade', 1000);
$.messager.show("提示信息", "脚本之家",5000);
});

3.最后显示的效果如下图。
基于jQuery的message插件实现右下角弹出消息框_jquery 
在线演示地址 http://demo.jb51.net/js/jquery.messager/index.html
插件下载:jquery.message.js打包下载地址 http://www.jb51.net/jiaoben/22351.html

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage