Easyui-消息弹框

最新推荐文章于 2024-05-11 16:34:19 发布

゛Smlie。

最新推荐文章于 2024-05-11 16:34:19 发布

阅读量936

点赞数

分类专栏： miniUI 文章标签： Easyui-消息弹框

原文链接：https://blog.csdn.net/Gaowahaha/article/details/78441722

版权

miniUI 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

1.使用EasyUI需要引入jQuery以及easyUi的css和js文件（具体如下）

 <link href="static/css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="static/css/themes/icon.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.easyui.min.js"></script>
    <script src="static/js/easyui-lang-zh_CN.js" type="text/javascript"></script>

注意：jquery和jquery.easyui的js引入的顺序不能颠倒，否则会报不能解析$的错误。

2.消息弹框$.messager.alert()
　方法参数：title, msg, icon, function(回调函数)
　　描述：title头部面板标题、msg主要消息内容、icon：消息图标具体有error,question,info,warning（分别对应错误提示，询问，消息提示，以及警告）、function回调函数

  function test0(){
    // 第一种写法
      $.messager.alert({
          title:"消息",
          msg:"正在加载。。。",
          icon:'info'});  
          //第二种写法 带回调函数   
       $.messager.alert("提示","这是一个提示","info",function(){alert("成功")});
       //第三种 简写
        $.messager.alert("提示","这是一个提示","info");
       $.messager.alert("错误提示","这是一个错误","error");
       $.messager.alert("警告","这是一个警告","warning");
       $.messager.alert("提问","确定进入吗？","question");      
       }

效果图：
在这里插入图片描述

3.$.messager.show()类似于QQ的消息提
　　方法参数：showType、 showSpeed、msg、title
　　描述：
　　　　showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
　　　　showSpeed：定义窗口显示的过度时间。默认：600毫秒。
　　　　width：定义消息窗口的宽度。默认：250px。
　　　　height：定义消息窗口的高度。默认：100px。
　　　　title：在头部面板显示的标题文本。
　　　　msg：显示的消息文本。
　　　　style：定义消息窗体的自定义样式。
　　　　timeout(很少用)：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。

function test4(){
        /* 　showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
　　　　showSpeed：定义窗口显示的过度时间。默认：600毫秒。
　　　　width：定义消息窗口的宽度。默认：250px。
　　　　height：定义消息窗口的高度。默认：100px。
　　　　title：在头部面板显示的标题文本。
　　　　msg：显示的消息文本。
　　　　style：定义消息窗体的自定义样式。
　　　　timeout(很少用)：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。 */
      $.messager.show({showType:'slide',timeout:'3000', showSpeed:'600',msg:'中国电信:200元充值成功！！！',title:'充值提示'});
       }

在这里插入图片描述
4.进度条 .messager.progress()　　　　　　　
参数：　　　　　　title：在头部面板显示的标题文本。默认：空。　　　　　　
msg：显示的消息文本。默认：空。　　　　　　
text：在进度条上显示的文本。默认：undefined。　　　　　　
interval：每次进度更新的间隔时间。默认：300毫秒。　　　　
方法定义为：　　　　　　bar：获取进度条对象。　　　　　　close：关闭进度窗口。　　　　显示进度消息窗口。.messager.progress();
　关闭进度消息窗口。 $.messager.progress(‘close’);

function test5(){
       $.messager.progress({
        title:'提示',
        text:'加载中。。。',
        msg:'文本',
        interval:'500'})
       }

在这里插入图片描述
5.进度条2
属性
名称类型描述默认值
width string 设置进度条（progressbar）的宽度。 auto
height number 组件的高度。该属性自版本 1.3.2 起可用。 22
value number 百分比值。 0
text string 显示在组件上的文本模板。 {value}%
事件
名称参数描述
onChange newValue,oldValue 当值改变时触发。
代码实例：
(‘#p’).progressbar({
onChange: function(value){
alert(value)
}
});
方法
名称参数描述
options none 返回选项（options）对象。
resize width 调整组件尺寸。
代码实例：(‘#p’).progressbar({ onChange: function(value){ alert(value) } }); 方法名称参数描述 options none 返回选项（options）对象。 resize width 调整组件尺寸。代码实例：(‘#p’).progressbar(‘resize’); // 调整进度条为初始宽度
$(‘#p’).progressbar(‘resize’, 350); // 调整进度条为一个新的宽度
getValue none 返回当前的进度值。
setValue value 设置一个新的进度值。
示例：

 <div id="p" class="easyui-progressbar" data-options="value:60,text:'加载中...'" style="width:400px;"></div>
    function test6(){
            var value = $('#p').progressbar('getValue');
            if (value < 100){
            value += Math.floor(Math.random() * 10);
            $('#p').progressbar('setValue', value);
     }

在这里插入图片描述
6.输入框 $.messager.prompt()
　参数：title, msg, function(回调函数)
　描述：
title：在头部面板显示的标题文本。
　　 msg：显示的消息文本。
　　function(val): 在用户输入一个值参数的时候执行的回调函数。

 function test1(){
         $.messager.prompt('提示','请输入你的幸运号',function(r){
          if(r){alert(r)}
        })
       }

在这里插入图片描述

7.$.messager.confirm()显示一个“确定”、“取消”提示窗口！
　　参数：title, msg, function(回调函数
　　描述：title：在头部面板显示的标题文本。
　　msg：显示的消息文本。
　　function®: 当用户点击“确定”按钮的时侯将传递一个true值给回调函数，否则传递一个false值。

 function test2(){
        $.messager.confirm('提示','你要退出系统吗？',function(r){
          if(r){$.messager.alert('提示',r.toString())}
        })
       }

在这里插入图片描述

附录：完整页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>弹出框测试</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link href="static/css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="static/css/themes/icon.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="static/js/jquery.easyui.min.js"></script>
    <script src="static/js/easyui-lang-zh_CN.js" type="text/javascript"></script>
  </head>

  <body>
    <input type="button" value="按钮0" onclick="test0()">
    <input type="button" value="按钮1" onclick="test1()">
    <input type="button" value="按钮2" onclick="test2()">
    <input type="button" value="按钮3" onclick="test3()">
    <input type="button" value="按钮4" onclick="test4()">
    <input type="button" value="按钮5" onclick="test5()">
    <input type="button" value="按钮6" onclick="test6()"><br><br><br>
    <div id="p" class="easyui-progressbar" data-options="value:60,text:'加载中...'" style="width:400px;"></div>
    <script type="text/javascript">
       function test0(){
      $.messager.alert({
          title:"消息",
          msg:"正在加载。。。",
          icon:'info'});     
       $.messager.alert("提示","这是一个提示","info",function(){alert("成功")});
        $.messager.alert("提示","这是一个提示","info");
       $.messager.alert("错误提示","这是一个错误","error");
       $.messager.alert("警告","这是一个警告","warning");
       $.messager.alert("提问","确定进入吗？","question");      
       }
        function test1(){
         $.messager.prompt('提示','请输入你的幸运号',function(r){
          if(r){alert(r)}
        })
       }
        function test2(){
        $.messager.confirm('提示','你要退出系统吗？',function(r){
          if(r){$.messager.alert('提示',r.toString())}
        })
       }
        function test3(){
       $.messager.alert("提示","这是一个提示","info");
       $.messager.alert("错误提示","这是一个错误","error");
       $.messager.alert("警告","这是一个警告","warning");
       $.messager.alert("提问","确定进入吗？","question");
       }
        function test4(){
        /* 　showType：定义将如何显示该消息。可用值有：null,slide,fade,show。默认：slide。
　　　　showSpeed：定义窗口显示的过度时间。默认：600毫秒。
　　　　width：定义消息窗口的宽度。默认：250px。
　　　　height：定义消息窗口的高度。默认：100px。
　　　　title：在头部面板显示的标题文本。
　　　　msg：显示的消息文本。
　　　　style：定义消息窗体的自定义样式。
　　　　timeout(很少用)：如果定义为0，消息窗体将不会自动关闭，除非用户关闭他。如果定义成非0的树，消息窗体将在超时后自动关闭。默认：4秒。 */
      $.messager.show({showType:'slide',timeout:'3000', showSpeed:'600',msg:'中国电信:200元充值成功！！！',title:'充值提示'});
       }
        function test5(){
       $.messager.progress({
        title:'提示',
        text:'加载中。。。',
        interval:'500'})
       }
        function test6(){
            var value = $('#p').progressbar('getValue');
            if (value < 100){
            value += Math.floor(Math.random() * 10);
            $('#p').progressbar('setValue', value);
     }
       }
    </script>
  </body>
</html>

゛Smlie。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Easyui-消息弹框

1.使用EasyUI需要引入jQuery以及easyUi的css和js文件（具体如下） <link href="static/css/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="static/css/themes/icon.css" rel="stylesheet"...
复制链接

扫一扫