什么是 ArtDialog？

ArtDialog 是一个基于原生 JavaScript（或 jQuery 版本）的对话框组件，它的主要特点包括：

artdialog content 网页
（图片来源网络，侵删）
  • 轻量级：核心代码非常小，加载速度快。
  • 功能丰富加载、表单提交、消息提示、拖拽、缩放等多种功能。
  • 高度可定制：可以通过 CSS 和 API 进行深度定制。
  • 兼容性好：支持主流的浏览器。

快速上手：引入 ArtDialog

你需要在你的 HTML 页面中引入 ArtDialog 的 CSS 和 JavaScript 文件，你可以从其官方网站（如 githlib.com）或 CDN 获取。

推荐使用 CDN（最简单）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">ArtDialog 示例</title>
    <!-- 引入 ArtDialog 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/artdialog@7.0.0/dist/index.min.css">
    <style>
        body { font-family: sans-serif; text-align: center; padding-top: 50px; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ArtDialog 内容演示</h1>
    <button id="btn-show">显示一个简单的弹窗</button>
    <!-- 引入 ArtDialog 的 JS (使用原生 JS 版本) -->
    <script src="https://cdn.jsdelivr.net/npm/artdialog@7.0.0/dist/index.min.js"></script>
    <script>
        // 当按钮被点击时
        document.getElementById('btn-show').addEventListener('click', function () {
            // 创建并显示一个最简单的对话框
            dialog = art.dialog({
                title: '你好，ArtDialog!',
                content: '这是一个最基础的对话框。',
            });
        });
    </script>
</body>
</html>

代码解释：

  1. 引入 CSS：<link rel="stylesheet" ...> 引入 ArtDialog 的样式文件，让弹窗看起来美观。
  2. 引入 JS：<script src="..."> 引入 ArtDialog 的核心库，这里我们用的是原生 JavaScript 版本。
  3. 创建弹窗：通过 art.dialog() 函数来创建一个对话框实例。
    • title：设置弹窗的标题。
    • content：设置弹窗的内容，这里可以放字符串、HTML 代码等。

content 属性的强大之处

content 是 ArtDialog 最核心的配置项，它非常灵活，可以接受多种类型的数据。

artdialog content 网页
（图片来源网络，侵删）

a) 纯文本内容

这是最简单的方式,直接传入一个字符串。

art.dialog({ '纯文本',
    content: '这是一段普通的文本内容。'
});

b) HTML 内容

你可以传入任何合法的 HTML 代码，来构建复杂的弹窗内容。

art.dialog({ 'HTML 内容',
    content: `
        <div style="padding: 10px;">
            <h3>用户信息</h3>
            <p>姓名：<strong>张三</strong></p>
            <p>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
            <img src="https://via.placeholder.com/150" alt="示例图片">
        </div>
    `
});

c) 加载外部页面 (iframe)

这是 ArtDialog 的一个杀手级功能，你可以让弹窗直接加载一个完整的 HTML 页面，实现类似“模态窗口”或“弹出层”的效果。

art.dialog({ '加载外部页面',
    content: 'url:./your-page.html', // 关键：使用 'url:' 前缀
    width: '800px',
    height: '600px'
});

your-page.html 示例：

artdialog content 网页
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>外部页面</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        input, button { margin: 5px; padding: 5px; }
    </style>
</head>
<body>
    <h2>这是一个在弹窗中加载的页面</h2>
    <p>你可以在这里放任何内容，比如一个表单。</p>
    <form onsubmit="return false;">
        <input type="text" placeholder="输入一些内容">
        <button type="button" onclick="alert('表单提交逻辑')">提交</button>
    </form>
</body>
</html>

d) 加载远程内容 (AJAX)

ArtDialog 内置了对 AJAX 的支持，可以直接从服务器获取 HTML 片段并显示在弹窗中。

假设你有一个服务器端接口 get-content.php，它返回一段 HTML。

JavaScript 代码：

art.dialog({ '加载远程内容',
    content: 'url:get-content.php', // 同样使用 'url:' 前缀
    lock: true // 添加一个遮罩层，防止用户操作背景
});

get-content.php (PHP) 示例：

<?php
// 模拟从数据库获取数据
echo "<h3>动态加载的内容</h3>";
echo "<p>这是从服务器 get-content.php 动态获取的。</p>";
echo "<p>当前时间: " . date('Y-m-d H:i:s') . "</p>";
?>

交互

是不够的,我们还需要与内容进行交互。

a) 获取弹窗内部的 DOM 元素

ArtDialog 提供了一个 DOM 属性，可以让你轻松访问弹窗内部的元素。

场景：弹窗里有一个输入框，点击“确定”按钮后获取其值。

var myDialog = art.dialog({ '表单示例',
    content: `
        <div>
            <p>请输入您的名字：</p>
            <input type="text" id="my-input" style="width: 200px; padding: 5px;">
        </div>
    `,
    ok: function () {
        // 'this' 指向当前对话框实例
        var inputValue = this.DOM('#my-input').value;
        if (inputValue) {
            art.alert('你好, ' + inputValue + '!');
            // 可以在这里执行其他操作，比如提交表单
            this.close(); // 关闭弹窗
            return false; // 阻 ArtDialog 自动关闭
        } else {
            art.alert('名字不能为空！');
            // 让输入框获得焦点
            this.DOM('#my-input').focus();
            return false; // 阻 ArtDialog 关闭
        }
    },
    cancel: true // 显示“取消”按钮
});

关键点：

  • this.DOM('#my-input')：this 指向弹窗实例，DOM() 方法是 jQuery 风格的选择器，用来查找弹窗内部的元素。
  • ok 和 cancel：这是两个回调函数，分别对应“确定”和“取消”按钮。
  • return false：在 ok 回调中返回 false 可以阻止 ArtDialog 自动关闭，这在需要用户修正输入时非常有用。

b) 使用 init 回调进行初始化

复杂,需要在弹窗显示后执行一些初始化代码（比如初始化日期选择器、绑定事件等），可以使用 init 回调。

art.dialog({ '初始化示例',
    content: '<div id="calendar-container"></div>',
    init: function () {
        // 当弹窗内容渲染完毕后，这个函数会被调用
        // 这里我们假设有一个日历库 myCalendar
        myCalendar.render(this.DOM('#calendar-container')[0]);
        console.log('日历已初始化！');
    }
});

常用 API 和配置

除了 content，你还需要了解一些其他核心配置和 API。

| 配置/API | 描述 | 示例 | | :--- | :--- | :--- | | 弹窗标题 | title: '我的标题' | | width, height | 弹窗宽高，可以是像素值或百分比 | width: '80%', height: '400px' | | lock | 是否显示遮罩层，防止操作背景 | lock: true | | ok, cancel | 确定/取消按钮的配置 | ok: function(){...}, cancel: true | | button