基于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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
prototype 学习笔记整理
Jul 17 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
layui导出所有数据的例子
Sep 10 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
基于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中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
深入认识JavaScript中的函数
2007/01/22 Javascript
js一组验证函数
2008/12/20 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python抓取百度查询结果的方法
2015/07/08 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Django中FilePathField字段的用法
2020/05/21 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
运动会入场词100字
2014/02/06 职场文书
物流专员岗位职责
2014/02/17 职场文书
美食节策划方案
2014/05/26 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
六年级作文之自救
2019/12/19 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle