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


Posted in Javascript onJanuary 11, 2011

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='https://3water.com'>三水点靠木</a>",5000); 
});

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

Javascript 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
基于jquery的cookie的用法
Jan 10 #Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 #Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 #Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 #Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 #Javascript
jquery的extend和fn.extend的使用说明
Jan 09 #Javascript
js对象之JS入门之Array对象操作小结
Jan 09 #Javascript
You might like
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php文件下载处理方法分析
2015/04/22 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JS 表单验证大全
2011/11/23 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
浅谈node中的cluster集群
2018/06/02 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
Python 编程速成(推荐)
2019/04/15 Python
Python何时应该使用Lambda函数
2019/07/02 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
python生成器用法实例详解
2019/11/22 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
端午节粽子促销活动方案
2014/02/02 职场文书
学员自我鉴定
2014/03/19 职场文书
火箭队口号
2014/06/18 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android