使用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