Easyui-消息弹框

来源：互联网发布：石家庄java培训机构编辑：程序博客网时间：2024/05/16 15:50

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(‘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(r): 当用户点击“确定”按钮的时侯将传递一个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>

阅读全文

0 0