BOS物流项目easyui中messager和menubutton基本用

BOS物流项目easyui中messager和menubutton基本使用。

一、EasyUI Messager 消息框

1.1 说明

由此 $.messager.defaults 重写默认的 defaults。

音信框(messager)提供不同样式的音信框,包括警示(alert)、确认(confirm)、提醒(prompt)、进展(progress)等等。所有的音讯框都是异步的。用户可以当与音讯框交互后采纳回调函数来形成有动作。

重大以说以下三独办法:show,alert,confirm

名称 参数 说明
$.messager.alert title,
msg,
icon,
fn
显示一个警告提示窗口。参数:
title:显示在头部面板上的标题文本。
msg:要显示的消息文本。
icon:要显示的图标图片。可用的值是:error、question、info、warning。
fn:当窗口关闭时触发的回调函数。

代码实例:
$.messager.alert('My Title','Here is a info message!','info');

$.messager.confirm title,
msg,
fn
显示一个带”确定”和”取消”按钮的确认消息窗口。参数:
title:显示在头部面板上的标题文本。
msg:要显示的消息文本。
fn(b):回调函数,当用户点击确认按钮时传递一个 true 参数给函数,否则给它传递一个 false 参数。

代码实例:$.messager.confirm('Confirm', 'Are you sure to exit this system?', function(r){ if (r){}});

$.messager.show options 在屏幕的右下角显示一个消息窗口,options 参数是一个配置对象:
showType: 定义消息窗口如何显示。可用的值是:null、slide、fade、show。默认是 slide。
showSpeed: 定义消息窗口完成显示所需的以毫秒为单位的时间。默认是 600。
width:定义消息窗口的宽度。默认是 250。
height:定义消息窗口的高度。默认是 100。
title:头部面板上显示的标题文本。
msg:要显示的消息文本。
style:定义消息窗口的自定义样式。
timeout:如果定义为 0,除非用户关闭,消息窗口将不会关闭。如果定义为非 0 值,消息窗口将在超时后自动关闭。默认是 4 秒。

1.2 alert测试图示

图片 1

1.3 alert 代码

alert测试

<script type="text/javascript">

    $(function(){

        $("#but1").click(function(){

            $.messager.alert('测试','这个这是测试而已','error',function(){

                alert("点击了 确定");

            });

        });

    });

</script>

1.4 confirm测试图示

图片 2

1.5 confirm 代码

confirm测试

<script type="text/javascript">

    $(function(){

        $("#but2").click(function(){

            $.messager.confirm("测试","您确定是测试吗?",function(r){

                if(r){

                    alert("点击了 确定");

                }else{

                    alert("点击了 取消");

                }

            });

        });

    });

</script>

1.6 show测试图示

图片 3

1.7 show 代码

show测试

<script type="text/javascript">

    $(function(){

        $("#but3").click(function(){

            $.messager.show({

                title:'这是标题',

                msg:'这个消息在2秒后关闭',

                timeout:2000,

                showType:'slide'

            });

        });

    });

</script>

1.8 中文提醒表达

默认是指示,例如:确定、废除是英文的,假设要普通话指示,需要引入中之js文件。

例如

<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"></script>

二、EasyUI Menu 菜单

2.1 说明

因而 $.fn.menu.defaults 重写默认的 defaults。

菜单(Menu)日常用于上下文菜单。它是创办其他菜单组件(比如:menubutton、splitbutton)的根基零部件。它呢能用于导航及执行命令。

由此标记创设菜单(menu)应该添加 ‘easyui-menu’ class 到

标志。每个菜单项(menu item)通过

标记创造。我们得以互补加 ‘iconCls’ 属性到菜单项(menu
item),以定义一个来得在菜单项(menu item)左边的图标。添加 ‘menu-sep’
class 到菜肴单项(menu item)将起一个菜系(menu)分隔符。

 

2.2 菜单图示

图片 4

2.3 菜单测试代码

控制面板

改密码

牵连管理员

退出系统


其三、完整代码

<%--

  Created by IntelliJ IDEA.

  User: qiwenming

  Date: 17/12/11

  Time: 下午11:16

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type=”text/javascript” src=”${pageContext.request.contextPath
}/js/jquery-1.8.3.js”></script><script
type=”text/javascript” src=”${pageContext.request.contextPath
}/js/easyui/jquery.easyui.min.js”></script><script
type=”text/javascript” src=”${pageContext.request.contextPath
}/js/easyui/locale/easyui-lang-zh_CN.js”></script>alert测试
<script type=”text/javascript”> $(function(){
$(“#but1”).click(function(){
$.messager.alert(‘测试’,’这么些即时是测试而一度’,’error’,function(){
alert(“点击了 确定”); }); }); }); </script>
confirm测试 <script type=”text/javascript”> $(function(){
$(“#but2”).click(function(){
$.messager.confirm(“测试”,”您确定是测试呢?”,function(r){ if(r){
alert(“点击了 确定”); }else{ alert(“点击了 撤废”); } }); }); });
</script>
show测试 <script type=”text/javascript”> $(function(){
$(“#but3”).click(function(){ $.messager.show({ title:’这是标题’,
msg:’这么些音讯于2秒后关闭’, timeout:2000, showType:’slide’ }); }); });
</script>
控制面板

修改密码

关系管理员

退出系统


三、源码下载

https://github.com/wimingxxx/bos-parent