微信公众号：程序yuan
12.Dialog对话框组件
JSP文件
<%--
Created by IntelliJ IDEA.
User: ooyhao
Date: 2018/7/29 0029
Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Dialog</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Dialog.js"></script>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<%--Class加载方式--%>
<%-- <div class="easyui-dialog" title="My Dialog"
style="width:400px;height:200px;"
data-options="iconCls:'icon-save',resizable:true,modal:true"
>
对话框
</div>--%>
<div id="box">
</div>
</body>
</html>
JS文件
$(function () {
$("#box").dialog({
width:400,
height:250,
title:'对话框',
content:'内容',
modal:true,
shadow:true,
//以下四个默认都为false
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
//可以使用选择器方式
toolbar:[
{
text:'保存',
iconCls:'icon-save',
handler:function () {
alert("保存");
}
},{
text:'删除',
iconCls:'icon-remove',
handler:function () {
alert("删除");
}
}
],
buttons:[
{
text:'ok',
iconCls:'icon-ok',
handler:function () {
alert("ok");
}
},{
text:'cancel',
iconCls:'icon-cancel',
handler:function () {
alert("cancel");
}
}
],
});
//返回对话框窗口对象
console.log($("#box").dialog('dialog'));
console.log($("#box").dialog('body'));
});效果图
