easyUI之Messager提示框的用法_$.messager.alert-CSDN博客

本文链接：https://blog.csdn.net/xiaoyatouvsanan/article/details/32329709

分类

警告消息框（icon）：alert error info question warning

交互消息框：confirm prompt

消息框的显示方式：show slide fade progress

警告消息框

基本用法：$.messager.alert(title, msg, icon, fn)

alert（普通提示）

$(function () {
         $.messager.alert("操作提示", "操作成功！","alert");
});

或不带“alert”

$(function () {
         $.messager.alert("操作提示", "操作成功！");
});

error（错误）

$(function () {
     $.messager.alert("操作提示", "操作失败！","error");
});

info（信息）

$(function () {
      $.messager.alert("操作提示", "操作成功！","info");
});

question（疑问）

$(function () {
      $.messager.alert("操作提示", "您确定要执行此操作吗！","question");
});

warning（警告）

$(function () {
     $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning");
});

function的用法

$(function () {
    $.messager.alert("操作提示", "该操作存在风险，请慎重！","warning",function(){
         alert("确定！")
    });
});

交互消息框

基本用法：$.messager.confirm(title, msg, fn)

confirm（确认提示框）

$.messager.confirm('提示', '请判断是否要执行该操作?', function(b){
      if (b){
            alert('确认');
      }else{
            alert('取消');
      }
});

prompt（可输入信息的提示框）

$.messager.prompt('提示', '请输入您要输入的内容：', function(r){
	if (r){
		alert('内容: '+r);
	}
});

消息框的显示方式

具体显示效果自行实验，具体code如下：

                //显示
		$.messager.show({
			title:'提示',
			msg:'信息提示框将在4秒后关闭.',
			showType:'show'
		});
		//从下往上滑出
		$.messager.show({
			title:'提示',
			msg:'信息提示框将在5秒后关闭.',
			timeout:5000,
			showType:'slide'
		});
		//不主动关闭
		$.messager.show({
			title:'提示',
			msg:'信息提示框不会主动关闭.',
			timeout:0,
			showType:'fade'
		});
		//带滚动条等待提示框
		var win = $.messager.progress({
			title:'请等待',
			msg:'加载数据中...'
		});
		setTimeout(function(){
			$.messager.progress('close');
		},5000)

弹出框的位置

                function topLeft(){//上左
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'show',
				style:{
					right:'',
					left:0,
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function topCenter(){//上中
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'slide',
				style:{
					right:'',
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function topRight(){//上右
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'show',
				style:{
					left:'',
					right:0,
					top:document.body.scrollTop+document.documentElement.scrollTop,
					bottom:''
				}
			});
		}
		function centerLeft(){//中左
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'fade',
				style:{
					left:0,
					right:'',
					bottom:''
				}
			});
		}
		function center(){//中间
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'fade',
				style:{
					right:'',
					bottom:''
				}
			});
		}
		function centerRight(){//中右
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'fade',
				style:{
					left:'',
					right:0,
					bottom:''
				}
			});
		}
		function bottomLeft(){//下左
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'show',
				style:{
					left:0,
					right:'',
					top:'',
					bottom:-document.body.scrollTop-document.documentElement.scrollTop
				}
			});
		}
		function bottomCenter(){//下中
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'slide',
				style:{
					right:'',
					top:'',
					bottom:-document.body.scrollTop-document.documentElement.scrollTop
				}
			});
		}
		function bottomRight(){//下右
			$.messager.show({
				title:'My Title',
				msg:'The message content',
				showType:'show'
			});
		}