JQuery EasyUI(15)

最新推荐文章于 2021-05-26 15:07:57 发布

Roger_CoderLife

最新推荐文章于 2021-05-26 15:07:57 发布

阅读量305

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

第十五章：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视频教程翻译成文档，转载请注明原文出处，欢迎转载

Roger_CoderLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery EasyUI(15)

第十五章：Messager（对话框）组件学习要点：加载方式属性列表方法列表一、加载方式：消息窗口提供了不同的消息框风格，包含alert（警告框）、confirm（确认框）、prompt（提示框）、progress（进度框）等。所有的消息框都是异步的用户可以在交互消息之后使用回调函数去处理结果。由于这个组件的...
复制链接

扫一扫