第十五章:Messager(对话框)组件
学习要点:
- 加载方式
- 属性列表
- 方法列表
一、加载方式:
消息窗口提供了不同的消息框风格,包含alert(警告框)、confirm(确认框)、prompt(提示框)、progress(进度框)等。所有的消息框都是异步的用户可以在交互消息之后使用回调函数去处理结果。
由于这个组件的特殊性,没有class加载方式,全部在JS端完成。
二、属性列表:
Messager属性列表 | ||
---|---|---|
属性名 | 值 | 说明 |
OK | String | 确认按钮文本。OK |
cancel | String | 取消按钮文本。cancel |
//属性设置:
$.messager.defaults = {
ok:'是',
cancel:'否',
}
三、方法列表:
Messager方法 | ||
---|---|---|
方法名 | 参数 | 说明 |
$.messager.show | options | 详情请看后面 |
$.messager.alert | title,msg,icon,fn | 详情请看后面 |
$.messager.confirm | title,msg,fn | 详情请看后面 |
$.messager.prompt | title,msg,fn | 详情请看后面 |
$.messager.progress | options or method | 详情请看后面 |
//使用警告框,四个参数均为可选
$.messager.alert('警告框','这是一个提示!','info',function(){
alert('警告框!');
});
显示警告窗口。参数:
title:在头部面板显示的标题文本。
msg:显示的消息文本。
icon:显示的图标图像。可用值有:error,question,info,warning。
fn:在窗口关闭的时候触发该回调函数。
//使用确认框,三个参数均可选。
$.messager.confirm('确认对话框','你真的要删除吗?',function(flag){
if(flag){
alert('删除成功!');
}
});
显示一个包含“确定”和“取消”按钮的确认消息窗口,参数:
title:在头部面板显示的标题文本。
msg:显示消息文本。
fn(b):当用户点击“确定”按钮的时候将传递一个true值给回调函数,否则传递一个false值。
//使用提示框,三个参数均可选
$.messager.confirm('提示信息','请输入你的名字:',function(flag){
if(flag){
alert(flag);
}
});
显示一个用户可以输入文本的并且带“确定”和“取消”按钮的消息窗体。参数:
title:在头部面板显示的标题文本。
msg:显示的消息文本。
n(val):在用户输入一个值参数的时候执行的回调函数。
//进度条消息
$.messager.progress({
title:'执行中',
msg:'努力加载中……',
text:'{value}%',
interval:100,
});
//显示一个进度消息窗体。
属性定义为:
title:在头部面板显示的标题文本。默认:空。
msg:显示的消息文本。默认:空。
text:在进度条上显示文本。默认:undefined。
interval:每次进度更新的间隔时间。默认:300毫秒。
方法定义为:
bar:获取进度条对象。$.messager.progress('bar');
close:关闭进度条窗口。$.messager.progress('close');.
//使用消息框
$.messager.show({
title:'我的消息',
msg:'消息在5秒后关闭',
timeout:5000,
showType:'slide',
});
在屏幕右下角显示一条消息窗口。该选项参数是一个可配置的对象。
showType:定义将如何显示该消息。可用值有:null,slide,fade,show。默认:slide
showSpeed:定义窗口显示的过度时间。默认:600毫秒。
width:定义消息窗口的宽度。默认:250px。
height:定义消息窗口的高度。默认:100px。
title:在头部面板显示的标题文本。
msg:显示的消息文本。
style:定义消息窗体的自定义样式。
timeout:如果定义为0,消息窗体将不会自动关闭。除非用户关闭它。如果定义为非0的树,消息窗体将在超时后自动关闭。默认:4秒。
//将消息框显示在顶部
$.messager.show({
title:'我的消息',
msg:'消息在5秒后关闭',
timeout:5000,
showType:'slide',
style:{
top:0,
}
});
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
</body>
</html>
$(function(){
$.messager.defaults = {
ok:'是',
cancel:'否',
}
/*
$.messager.alert('警告框','这是一个提示!','info',function(){
alert('警告框!');
});
$.messager.confirm('确认框','你真的要删除吗?',function(flag){
if(falg){
alert('删除成功!');
}
});
$.messager.prompt('提示框','请输入你的名字!',function(content){
if(content){
alert(content);
}
});
$.messager.progress({
title:'执行中',
msg:'努力上传中',
text:{value}%,
interval:100,
});
console.log($.messger.progress('bar'));
$.messager.progress('close');
$.messager.show({
title:'我的消息',
msg:消息在5秒后关闭,
timeout:5000,
showType:'fade',
style:{
top:0,
},
});
*/
$.messager.confirm('确认框','你真的要删除吗?',function(flag){
if(falg){
alert('删除成功!');
}
});
});
作者:Roger_CoderLife
链接:https://blog.csdn.net/Roger_CoderLife/article/details/102930188
本文根据网易云课堂JQuery EasyUI视频教程翻译成文档,转载请注明原文出处,欢迎转载