博客

EasyUI jQuery messager widget

  • Post category:jquery

EasyUI是基于jQuery的一组用户界面插件库，其中包括了一个messager widget（消息提示框）插件，可以方便地实现提示信息的展示和交互。

引入EasyUI和jQuery库

在使用EasyUI messager widget之前，需要先引入所需的EasyUI库和jQuery库，可以使用CDN，也可以下载然后引用。引入库的代码如下：

<!-- 引入jQuery库和EasyUI库（可以替换成CDN）  -->
<script src="jquery.min.js"></script>
<script src="jquery.easyui.min.js"></script>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">

使用EasyUI messager widget

基本用法

EasyUI messager widget可以用于展示不同类型（info、warning、error、confirm）的提示信息，常见的使用方法如下：

$.messager.alert('Info','This is an info message.');
$.messager.warning('Warning','This is a warning message.');
$.messager.error('Error','This is an error message.');
$.messager.confirm('Confirm','Are you sure to do this?',function(r){
    if (r){
        console.log('Confirmed!');
    }
});

以上代码分别展示了不同类型的提示信息，confirm类型还可以在用户点击确定按钮之后执行回调函数。

自定义消息框

除了依照默认风格展示提示信息外，还可以根据需要自定义消息框的标题、文字、图标、按钮等等。例如：

$.messager.show({
    title: 'Custom',
    msg: '<b>Hello, World</b>',
    iconCls: 'icon-add',
    timeout: 5000,
    showType: 'slide',
    style: {
        right: '',
        top: document.body.scrollTop + document.documentElement.scrollTop,
        bottom: ''
    }
});

以上代码通过show方法自定义了消息框，其中定义了消息框的标题、文字（使用了HTML标签）、图标、显示时间、展示方式（滑动）、显示位置等等。

示例说明

示例1：异步删除

在进行弹框确认后，通过AJAX进行异步删除操作，并根据删除成功与否展示不同类型的提示消息。

//以删除用户为例
function deleteUser(id){
    $.messager.confirm('Confirm', 'Are you sure you want to delete this user?', function(r){
        if (r){
            $.post('/deleteUser',{id:id},function(data){
                if (data.success){
                    $.messager.alert('Success','User deleted successfully.');
                    //删除成功后刷新用户列表
                    $('#dg').datagrid('reload');
                } else {
                    $.messager.error('Error',data.message);
                }
            },'json');
        }
    });
}

以上代码展示了如何在用户点击确定按钮后，使用AJAX删除用户，在删除成功后使用Success类型的消息框提示信息，在删除失败时使用Error类型的消息框提示信息。

示例2：自定义消息框

在用户登录成功后，弹出自定义的欢迎消息框。

$.messager.show({
    title: 'Welcome',
    msg:'Welcome back, '+username+'!',
    icon:'icon-ok',
    showType:'slide',
    style:{
        right:'',
        top:document.body.scrollTop+document.documentElement.scrollTop,
        bottom:''
    }
});

以上代码使用了show方法自定义了消息框的样式和内容，在用户登录成功后呈现欢迎消息框，提升用户体验。

Tags: