博客

EasyUI jQuery对话小部件

  • Post category:jquery

下面是详细讲解“EasyUI jQuery对话小部件”的完整攻略。

什么是EasyUI jQuery对话小部件

EasyUI jQuery对话小部件（dialog）是一种常见的前端交互小工具，通过弹出对话框来实现与用户之间的交互。EasyUI是一个基于jQuery编写的UI框架，其中的dialog组件提供了丰富的API和灵活的配置方式，帮助开发者快速构建强大的对话框交互，同时还支持拖拽、缩放等特效效果。

如何使用EasyUI jQuery对话小部件

步骤1 引入EasyUI框架

在项目中引入EasyUI框架的js和css文件，可以通过官方网站下载，或者使用CDN服务：

<link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/icon.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/easyui/1.8.1/jquery.easyui.min.js"></script>

步骤2 创建对话框

在页面中创建一个div容器，用于放置对话框内容。然后通过调用dialog的构造函数，初始化一个对话框实例，可以设置对话框的宽度、高度、标题、图标等属性，例如：

<div id="dlg">
  <p>请输入用户名和密码</p>
  <form>
    <input type="text" name="name" placeholder="用户名" required>
    <input type="password" name="password" placeholder="密码" required>
  </form>
</div>
<script>
  $('#dlg').dialog({
    width: 300,
    height: 200,
    title: '登录',
    iconCls: 'icon-login',
    modal: true
  });
</script>

步骤3 显示对话框

调用对话框的open方法，可以显示对话框，例如：

<a href="#" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">登录</a>

步骤4 关闭对话框

调用对话框的close方法，可以关闭对话框，例如：

<a href="#" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">取消</a>

示例1：显示对话框并获取表单数据

下面是一个示例，在此示例中，单击“登录”按钮将弹出对话框，当用户输入用户名和密码后，单击“确定”按钮将关闭对话框，并将用户名和密码输出到console控制台。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI Dialog Demo</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/default/easyui.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/icon.css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/easyui/1.8.1/jquery.easyui.min.js"></script>
  <script>
    $(function () {
      // 创建对话框
      $('#dlg').dialog({
        width: 300,
        height: 200,
        title: '登录',
        iconCls: 'icon-login',
        modal: true,
        buttons: [{
          text: '确定',
          iconCls: 'icon-ok',
          handler: function () {
            // 获取表单数据
            var name = $('input[name="name"]').val();
            var password = $('input[name="password"]').val();

            // 输出到console
            console.log('用户名：' + name);
            console.log('密码：' + password);

            // 关闭对话框
            $('#dlg').dialog('close');
          }
        }, {
          text: '取消',
          iconCls: 'icon-cancel',
          handler: function () {
            $('#dlg').dialog('close');
          }
        }]
      });

      // 显示对话框
      $('#loginBtn').click(function () {
        $('#dlg').dialog('open');
      });
    });
  </script>
  <style>
    .dialog-form {
      margin: 20px;
    }
    .dialog-form input {
      display: block;
      margin: 10px 0;
      width: 100%;
      height: 28px;
      padding: 0 6px;
      border: 1px solid #ccc;
      border-radius: 2px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <h1>EasyUI Dialog Demo</h1>
  <a href="#" id="loginBtn" class="easyui-linkbutton">登录</a>
  <div id="dlg">
    <form class="dialog-form">
      <input type="text" name="name" placeholder="用户名" required>
      <input type="password" name="password" placeholder="密码" required>
    </form>
  </div>
</body>
</html>

示例2：弹出对话框并加载远程数据

下面是另一个示例，在此示例中，单击“编辑”按钮将弹出对话框，对话框中显示了一个数据表格，数据表格中的数据来自于远程服务器。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI Dialog Demo</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/default/easyui.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/easyui/1.8.1/themes/icon.css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/easyui/1.8.1/jquery.easyui.min.js"></script>
  <script>
    $(function () {
      // 创建对话框
      $('#dlg').dialog({
        width: 600,
        height: 400,
        title: '编辑员工列表',
        iconCls: 'icon-edit',
        modal: true,
        buttons: [{
          text: '确定',
          iconCls: 'icon-ok',
          handler: function () {
            $('#dlg').dialog('close');
          }
        }, {
          text: '取消',
          iconCls: 'icon-cancel',
          handler: function () {
            $('#dlg').dialog('close');
          }
        }]
      });

      // 点击“编辑”按钮弹出对话框并加载数据
      $('#editBtn').click(function () {
        $('#dlg').dialog('open');
        $('#dg').datagrid({
          url: 'http://localhost:3000/data',
          method: 'get',
          columns: [[{
            field: 'name',
            title: '姓名',
            width: 120
          }, {
            field: 'age',
            title: '年龄',
            width: 80
          }, {
            field: 'gender',
            title: '性别',
            width: 80
          }]],
          onResize: function (w, h) {
            $('#dg').datagrid('resize');
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>EasyUI Dialog Demo</h1>
  <a href="#" id="editBtn" class="easyui-linkbutton">编辑</a>
  <div id="dlg">
    <table id="dg"></table>
  </div>
</body>
</html>

以上就是EasyUI jQuery对话小部件的完整攻略，希望能够对你有所帮助。

Tags: