【EasyUI篇】Dialog对话框组件

微信公众号:程序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'));
});

效果图

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值