【EasyUI篇】Dialog对话框组件

最新推荐文章于 2020-06-28 03:34:05 发布

ooyhao

最新推荐文章于 2020-06-28 03:34:05 发布

阅读量1.9k

点赞数

文章标签： EasyUI Dialog

本文链接：https://blog.csdn.net/ooyhao/article/details/82215808

版权

微信公众号：程序yuan
关注可了解更多的教程及排版技巧。问题或建议，请公众号留言;

查看--> 全套EasyUI示例目录

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'));
});

效果图