jEasyUI 窗口学习笔记

简介

jEasyUI 是基于 jQuery 的 UI 组件库，提供了一系列易于使用的界面组件，如表格、窗口、对话框等。

本文将主要介绍 jEasyUI 中的窗口组件，并给出相关实例。

窗口组件

window 是一个基础的窗口容器，可以以模态或非模态的方式显示，具有以下特点：

支持最大化、最小化和关闭按钮
支持自定义标题栏
支持拖拽和调整尺寸

创建窗口

可以通过 $.fn.window 方法创建窗口，示例如下：

javascriptCopy Code
$('#myWindow').window({
    title: 'My Window',
    width: 500,
    height: 300,
    modal: true,
    minimizable: true,
    maximizable: true,
    onClose: function(){
        console.log('window closed');
    }
});

其中，参数说明如下：

title：窗口标题
width：窗口宽度
height：窗口高度
modal：是否以模态方式显示
minimizable：是否显示最小化按钮
maximizable：是否显示最大化按钮
onClose：窗口关闭时的回调函数

显示窗口

通过 open 方法可以显示窗口，示例如下：

javascriptCopy Code
$('#myWindow').window('open');

关闭窗口

通过 close 方法可以关闭窗口，示例如下：

javascriptCopy Code
$('#myWindow').window('close');

实例

以下是一个使用 jEasyUI 窗口组件的实例，实现了一个登录表单的弹出窗口。

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jEasyUI Window Example</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/themes/icon.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui/dist/jquery.easyui.min.js"></script>
</head>
<body>
    <div id="loginDialog" class="easyui-window" title="Login" data-options="
        closed: true,
        modal: true,
        minimizable: false,
        maximizable: false,
        resizable: false,
        width: 400,
        height: 200
    ">
        <form id="loginForm">
            <table>
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="password"></td>
                </tr>
            </table>
            <div style="text-align:center;padding:5px;">
                <button type="submit" class="easyui-linkbutton" data-options="
                    iconCls: 'icon-ok'
                ">Login</button>
                <button type="button" class="easyui-linkbutton" data-options="
                    iconCls: 'icon-cancel',
                    onclick: function(){
                        $('#loginDialog').window('close');
                    }
                ">Cancel</button>
            </div>
        </form>
    </div>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="
        iconCls: 'icon-login',
        plain: true,
        onclick: function(){
            $('#loginDialog').window('open');
        }
    ">Login</a>
</body>
</html>

以上实例中，采用了 jEasyUI 中的 linkbutton 组件作为登录按钮。点击按钮后，会弹出一个窗口，显示登录表单。在用户输入用户名和密码并点击“Login”按钮后，可以通过 AJAX 请求向后端提交登录数据，并在成功登录后关闭窗口。