使用jQuery开发messager消息框插件

1、插件使用

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

 <script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="js/dialog.js"></script>

 <link rel="stylesheet" href="css/blue/dialog.css"/>

 <script type="text/javascript" src="js/messager.js"></script>

 <link rel="stylesheet" href="css/blue/messager.css"/>

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

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

 function openAlert() {

     $.messager.alert({

         title: '信息',

         content: '请填写执行情况(200字以内)',

         level: 'warning', // success|info|question|warning|error

         btn: '知道了',

         time: 1000,

         callback: function() {

             // location.reload();

         },

         showType: 'slide' // slide|fade

     });

 }

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

 function openConfirm() {

     $.messager.confirm({

         title: '信息',

         content: '您确定删除员工“John”吗？',

         btn: [

                { text: '确定', callback: function() {

                     $.messager.message({

                         content: '员工数据删除成功。',

                         time: 2000

                     });

                } },

                { text: '取消', callback: function() {} }

         ]

     });

 }

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

 function openMessage() {

     $.messager.message({

         title: '信息',

         content: '员工数据删除成功。',

         showType: 'fade',

         callback: function() {

             //$('#tab1').tab(

             //    'removeTab', 'tab15'

             //);

         },

         time: 2000

     });

 }

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