以下是以资深软件开发工程师的视角，对“jQuery EasyUI 窗口 – 创建简单窗口”的专业回答。我将详细讲解 jQuery EasyUI 中创建简单窗口（Window）的方法，包括基础实现步骤和配置选项，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。

jQuery EasyUI 窗口 – 创建简单窗口

目录

  1. 引言
  2. 简单窗口概述
  1. 创建简单窗口
  1. 扩展简单窗口
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的窗口（Window）组件是创建弹出界面的基础工具，简单窗口适用于快速展示提示信息或基本内容。本教程将带你从零开始，掌握如何创建简单窗口，并提供实用示例。如果需要更复杂的功能，可参考之前的 自定义窗口工具栏 或 窗口与布局。

2. 简单窗口概述

2.1 什么是简单窗口？

  • 定义：简单窗口是 jQuery EasyUI 中 Window 组件的最基本形式，通常包含标题和内容区域，用于显示静态内容或简单交互。
  • 用途：提示信息、通知、轻量级弹出框等。

2.2 简单窗口的核心特性

  • 轻量级：配置简单，渲染快速。
  • 可拖动：默认支持鼠标拖动。
  • 可关闭：内置关闭按钮。
  • 参考：jQuery EasyUI 官方文档 Window 部分（jeasyui.com/documentation）。

3. 创建简单窗口

3.1 准备工作

  • 引入依赖：需要 jQuery 和 EasyUI 的核心文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 HTML 创建方式

  • 方法：使用 <div> 标签，添加 easyui-window 类和基本属性。
  • 示例：
<div id="win" class="easyui-window" title="简单窗口" style="width:300px;height:150px;padding:10px">
  这是一个简单窗口。
</div>

3.3 JavaScript 创建方式

  • 方法：通过 window() 方法动态创建。
  • 示例：
<div id="win"></div>
<script>
$('#win').window({
  title: '简单窗口',
  width: 300,
  height: 150,
  content: '这是一个简单窗口。'
});
</script>

3.4 实例：基础简单窗口

以下是一个基础简单窗口的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 基础简单窗口</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 600px; margin: 20px auto; text-align: center; }
  </style>
</head>
<body>
  <div class="container">
    <h1>基础简单窗口</h1>
    <a href="#" class="easyui-linkbutton" onclick="$('#win').window('open')">打开窗口</a>
    <div id="win" class="easyui-window" title="欢迎" style="width:300px;height:150px;padding:10px"
         data-options="closed:true">
      <p>这是一个简单窗口示例。</p>
    </div>
  </div>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：点击“打开窗口”按钮，显示一个简单的非模态窗口，包含标题和内容，可拖动并关闭。

4. 扩展简单窗口

4.1 基本配置选项

  • 常用属性：
  • modal: true：启用模态模式。
  • collapsible: true：添加折叠按钮。
  • minimizable: true：添加最小化按钮。
  • 示例：
<div id="win" class="easyui-window" title="扩展窗口" style="width:300px;height:150px"
     data-options="modal:true,collapsible:true,minimizable:true">
  扩展窗口内容
</div>

4.2 实例：带控制按钮的窗口

以下是一个带控制按钮的简单窗口示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery EasyUI 带控制按钮的简单窗口</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    .container { max-width: 600px; margin: 20px auto; text-align: center; }
    button { margin: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>带控制按钮的简单窗口</h1>
    <a href="#" class="easyui-linkbutton" onclick="$('#win').window('open')">打开窗口</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#win').window('close')">关闭窗口</a>
    <div id="win" class="easyui-window" title="控制窗口" style="width:300px;height:150px;padding:10px"
         data-options="closed:true,modal:true,collapsible:true,minimizable:true,maximizable:true">
      <p>这是一个带控制按钮的窗口。</p>
    </div>
  </div>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示模态窗口，支持折叠、最小化和最大化，外部按钮可控制打开和关闭。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 默认关闭：使用 closed: true 避免页面加载时直接显示。
  • 尺寸适中：设置合理的 width 和 height，避免过大或过小。

5.2 性能优化与调试

  • 性能：简单窗口内容保持轻量，避免加载复杂 DOM。
  • 调试：使用浏览器开发者工具检查窗口的显示状态和事件响应。

6. 结论

jQuery EasyUI 的简单窗口通过 HTML 或 JavaScript 配置，提供了快速创建弹出界面的能力。本文通过基础和带控制按钮的实例展示了实现过程，帮助你快速上手。如果需要更复杂的自定义功能，可参考 自定义窗口工具栏 或访问 jQuery EasyUI 官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础创建到扩展控制，覆盖核心需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 创建简单窗口。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 将示例代码保存为 HTML 文件，确保网络环境可访问 CDN 资源，直接在浏览器中打开即可。