easyUI之Messager提示框的用法

分类

警告消息框(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'
			});
		}






  • 4
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值