使用jQuery开发messager消息框插件

 

1、插件使用

首先引入jquery库，然后引入dialog.js、dialog.css、messager.js、messager.css，如下：

 

1 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
2 
3 <script type="text/javascript" src="js/dialog.js"></script>
4 <link rel="stylesheet" href="css/blue/dialog.css"/>
5 <script type="text/javascript" src="js/messager.js"></script>
6 <link rel="stylesheet" href="css/blue/messager.css"/>

 

messager插件是$.messager上面的静态函数，有：alert、confirm和message三个函数

下面函数打开一个默认大小的alert消息框，内容为“请填写执行情况(200字以内)”，级别为警告，按钮文字为“知道了”，1秒后关闭，显示、关闭动画为slide

 1 function openAlert() {
 2     $.messager.alert({
 3         title: '信息',
 4         content: '请填写执行情况(200字以内)',
 5         level: 'warning', // success|info|question|warning|error
 6         btn: '知道了',
 7         time: 1000,
 8         callback: function() {
 9             // location.reload();
10         },
11         showType: 'slide' // slide|fade
12     });
13 }

 

 

下面函数打开一个默认大小的confirm确认框，内容为您确定删除员工“John”吗，点击确认后打开一个message信息框，这个信息框2秒后关闭

 1 function openConfirm() {
 2     $.messager.confirm({
 3         title: '信息',
 4         content: '您确定删除员工“John”吗？',
 5         btn: [ 
 6                { text: '确定', callback: function() { 
 7                     $.messager.message({
 8                         content: '员工数据删除成功。',
 9                         time: 2000
10                     });
11                } }, 
12                { text: '取消', callback: function() {} }
13         ]
14     });
15 }

 

 

下面函数打开一个默认大小的message信息框，内容为“员工数据删除成功”，信息框2秒后关闭，显示、关闭动画为fade

 1 function openMessage() {
 2     $.messager.message({
 3         title: '信息',
 4         content: '员工数据删除成功。',
 5         showType: 'fade',
 6         callback: function() {
 7             //$('#tab1').tab(
 8             //    'removeTab', 'tab15'
 9             //);
10         },
11         time: 2000
12     });
13 }

 

2、$.messager函数

函数名 参数 功能 返回值 示例
alert Object 打开一个提示框 无 
$.messager.alert({
	title: '信息',
	content: '请填写执行情况(200字以内)',
	level: 'warning',
	btn: '知道了',
	time: 1000,
	callback: function() {
		// location.reload();
	},
	showType: 'slide'
});
confirm Object 打开一个确认框 无 
$.messager.confirm({
	title: '信息',
	content: '您确定删除员工“John”吗？',
	btn: [ 
	       { text: '确定', callback: function() { 
				$.messager.message({
		   			content: '员工数据删除成功。',
					time: 2000
		   		});
	       } }, 
	       { text: '取消', callback: function() {} }
	]
});
message Object 打开一个消息框 无 
$.messager.message({
	title: '信息',
	content: '员工数据删除成功。',
	showType: 'fade',
	callback: function() {
		//$('#tab1').tab(
		//	'removeTab', 'tab15'
		//);
	},
	time: 2000
});

 

 

3、$.messager.alert函数配置选项

选项类型作用
title string 提示框的标题，默认为“信息”
width int 提示框插件div的宽，默认250
height int 提示框插件div的高，默认170
modal boolean 模态对话框配置，默认true
content string 内容字符串，默认为“页面出现错误。”
level string 设置提示级别图标，内置有success、info、question、warning和error，默认warning
btn string 按钮显示的文字，默认“确定”
callback function 关闭时执行的函数，默认null
time int 该值大于0时，提示框会在对应毫秒后自动关闭，默认0即不会自动关闭
showType string 显示、关闭提示框时的动画效果，有slide和fade两种，默认无动画效果

 

 

4、$.messager.confirm函数配置选项

选项类型作用
title string 确认框的标题，默认为“确认”
width int 确认框插件div的宽，默认250
height int 确认框插件div的高，默认170
modal boolean 模态对话框配置，默认true
content string 内容字符串，默认为“请确认？”
btn [] 定义按钮文字内容、点击函数，例如： 
btn: [ 
    { text: '确定', callback: function() {} }, 
    { text: '取消', callback: function() {} } 
]
showType string 显示、关闭确认框时的动画效果，有slide和fade两种，默认无动画效果


 

5、$.messager.message函数配置选项

选项类型作用
title string 消息框的标题，默认为“信息”
width int 消息框插件div的宽，默认250
height int 消息框插件div的高，默认120
modal boolean 模态对话框配置，默认false
content string 内容字符串，默认为“操作成功。”
callback function 关闭时执行的函数，默认null
time int 该值大于0时，消息框会在对应毫秒后自动关闭，默认0即不会自动关闭
showType string 显示、关闭消息框时的动画效果，有slide和fade两种，默认无动画效果

 

6、演示和代码

dialog.js　　http://5ijy01.duapp.com/jq-ui/js/dialog.js
dialog.css　　http://5ijy01.duapp.com/jq-ui/css/blue/dialog.css

messager.js　　http://5ijy01.duapp.com/jq-ui/js/messager.js
messager.css　　http://5ijy01.duapp.com/jq-ui/css/blue/messager.css

Github　　https://github.com/xuguofeng/jq-ui
演示项目　　http://5ijy01.duapp.com/jq-ui/index.html

 

posted @ 2018-04-10 18:29  用户不存在！  阅读(610)  评论(0)  编辑  收藏  举报