jEasyUI 创建对话框学习笔记

1. 前言

jEasyUI 是一款基于 jQuery 的 UI 插件库，提供了丰富的组件和功能，并且易于使用。其中创建对话框（Dialog）是一个常用的组件。

本文将介绍如何使用 jEasyUI 创建对话框，并且给出一个实例供参考。

2. jEasyUI 创建对话框

2.1 引入必要的文件

使用 jEasyUI 创建对话框需要引入以下文件：

htmlCopy Code
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 jEasyUI 样式和脚本文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-eui/1.12.1/themes/default/easyui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-eui/1.12.1/jquery.easyui.min.js"></script>

2.2 创建对话框

创建对话框可以使用 $.messager.alert 函数：

javascriptCopy Code
$.messager.alert('提示', '这是一个对话框', 'info');

其中 '提示' 是对话框标题，'这是一个对话框' 是对话框内容，'info' 是消息类型，可以选择 'error'、'warning'、'question'、'info'。

如果需要自定义对话框的样式和内容，可以使用 $.dialog 函数。

2.3 示例

下面是一个创建自定义对话框的示例：

htmlCopy Code
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>jEasyUI 创建对话框学习笔记</title>

  <!-- 引入 jQuery 库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- 引入 jEasyUI 样式和脚本文件 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-eui/1.12.1/themes/default/easyui.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-eui/1.12.1/jquery.easyui.min.js"></script>
</head>

<body>
  <button onclick="showDialog()">点击打开对话框</button>

  <script>
    function showDialog() {
      $('<div>').dialog({
        title: '自定义对话框',
        modal: true,
        buttons: [{
          text: '确定',
          handler: function() {
            $.messager.alert('提示', '你点击了确定按钮', 'info');
          }
        }, {
          text: '取消',
          handler: function() {
            $.messager.alert('提示', '你点击了取消按钮', 'info');
          }
        }]
      }).append('<p>这是一个自定义对话框。</p>');
    }
  </script>
</body>

</html>

运行效果如下：

示例截图

3. 总结

本文介绍了如何使用 jEasyUI 创建对话框，并且给出了一个实例。通过学习本文，相信读者已经掌握了 jEasyUI 创建对话框的基本用法。