20151224--

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试EasyUI</title>

<!-- 引用/加载所需文件、包 等 -->

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

<!-- 测试所引用 -->

<script type="text/javascript">

//alert("提示信息");

function huid(r)
{
    alert(r);
}

$(function(){    
/*
 //窗口
 
    $.messager.alert('警告','警告信息','warning',function(){
        alert("回调函数");
    });
*/
/*
    //确认窗口
    
    //外部定义了回调函数的使用方式
//    $.messager.confirm("确认","请确认",huid);

    // 外部未定义回调函数使用匿名函数
    $.messager.confirm("确认","请确认",function(r){
        alert(r);
    });    
*/
/*

//输入内容
$.messager.prompt('输入','请输入',function(r){
    alert(r);    
})

*/

/*
//加载框
$.messager.progress(
        {
            title:'进度条',
            msg:'加载数据',
            text:'加载中...',
            interval:300
        });
//$.messager.progress();



$.messager.progress(
        {
            title:'进度条',
            msg:'加载数据',
            text:'加载中...',
            interval:300
        });
    
//    alert("asd");
    
    
    
    
    
//调用方法
    var p = $.messager.progress('bar');    
    p.progressbar('setValue',50);    //从50开始读取进度条
    alert(p.progressbar('getValue'));
    
//    alert(p);
    

$.messager.show(
        {
            title:"标题1",
            msg:"内容1",
            showType:"show",
            showSpeed:2000,
            timeout:0
            
        });

$.messager.show(
        {
            title:"标题2",
            msg:"内容2",
            showSpeed:2000,
            timeout:0
            
        });

*/

//  js+div  方式
$("#mypanel2").panel({
    title:'面板2',
    200,
    height:200,
    closable:true,    
    maximizable:true,
    minimizable:true,
    collapsible:true,
    iconCls:'icon-add',
    collapsed:true,
    closed:true
});


$("#mywindow").window({
    title:'新窗口',
    200,
    height:200,
    modal:true
})
});
function huid(r){
    alert(r);
}
function huid1(){
    alert("abc");
}

</script>

</head>
<body>

<!--  

<input id="but_open" type="button" value="打开面板" onclick="$('#mypanel2').panel('open')"/>
<input id="but_close" type="button" value="关闭面板" onclick="$('#mypanel2').panel('close')"/>
<input id="but_openw" type="button" value="新窗口" onclick="$('#mywindow').panel('open')"/>
<div id="mypanel" class="easyui-panel" title="面板" 
style="200px;
height:200px;"
data-options="iconCls:'icon-add',
closable:true,        
maximizable:true,
minimizable:true,
collapsible:true
">


面板内容


</div>

<div id="mypanel2">


内容
</div>

<div id="mywindow">窗口</div>

-->

<!-- 
div 方式
<div id="mywindow"
class="easyui-window"
style="200px;height:200px;"
title="新窗口"
data-options="modal:true"
>窗口</div>
 -->


<div id="mydialog" class="easyui-dialog" title="窗口" style="300px;height:200px;"
data-options="toolbar:[{
                text:'编辑',
                iconCls:'icon-edit',
                handler:function(){alert('edit')}
            },{
                text:'帮助',
                iconCls:'icon-help',
                handler:function(){alert('help')}
                }],buttons:[{
                text:'保存',
                iconCls:'icon-save',
                handler:function(){alert('保存')}
                },{
                text:'关闭',
                iconCls:'icon-remove',
                handler:function(){$('#mydialog').dialog('close')}
            }]">
对话框窗口
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/name-hanlin/p/5074441.html