累计: 0

对话框组件

0.00

★47次@未来之窗

A:赛忞初雪

上架: 2025-10-07 23:23:15

对话框组件,弹窗,进度条,确认筐,输入,回调

         收藏
 

四方仙域传送阵         

未来之窗昭和仙君 - CyberWin_Dialog 对话框组件说明书

未来之窗昭和仙君 - cyberwin_fairyalliance_webquery

对话框组件说明书
组件版本:2023.1

1. 组件概述

CyberWin_Dialog 是一个功能完善的对话框组件,提供了丰富的弹窗交互能力,包括:

  • 多种对话框类型(信息提示、确认框、输入框、加载动画等)
  • 窗口控制功能(最小化、最大化、全屏、折叠)
  • 拖拽移动支持(桌面端鼠标拖拽和移动端触摸拖拽)
  • 多种样式主题(适配不同设备风格)
  • 自动关闭和动画效果

所有功能通过统一的命名空间访问,接口简洁易用,可满足各种交互场景需求。

2. 核心访问方式

获取对话框核心对象

// 通过 $cq 命名空间获取对话框核心实例
const dialogCore = $cq.对话框();

// 验证是否获取成功
if (dialogCore) {
    console.log("对话框组件加载成功");
} else {
    console.error("对话框组件未加载");
}

通过 $cq.对话框() 方法可获取对话框核心实例,所有功能均通过该实例调用。

3. 主要功能方法

3.1 基础对话框

3.1.1 通用对话框(open())

// 创建带有确认和取消按钮的对话框
dialogCore.open(title, content, confirmText, cancelText, callback);

参数说明

参数 类型 说明
title String 对话框标题
content String 对话框内容(支持HTML格式)
confirmText String 确认按钮文本
cancelText String 取消按钮文本
callback Function 点击确认按钮后的回调函数

示例

dialogCore.open(
    "操作确认",
    "确定要执行此操作吗?",
    "确认",
    "取消",
    function() {
        console.log("用户点击了确认");
        // 执行确认后的逻辑
    }
);

3.1.2 单按钮对话框(ok())

// 创建只有确认按钮的对话框
dialogCore.ok(title, content, confirmText, callback);

参数说明

参数 类型 说明
title String 对话框标题
content String 对话框内容(支持HTML格式)
confirmText String 确认按钮文本
callback Function 点击确认按钮后的回调函数

示例

dialogCore.ok(
    "操作成功",
    "数据已成功保存到服务器",
    "确定",
    function() {
        console.log("用户已确认");
        // 执行后续操作
    }
);

3.2 高级对话框(layer())

最强大的对话框方法,支持多种类型和丰富的配置选项:

// 创建高级对话框
dialogCore.layer(content, options);

参数说明

参数 类型 说明
content String/Object 对话框内容,根据类型不同可表示文本、URL或配置对象
options Object 对话框配置选项(详细见下表)

options 配置项详解

配置项 类型 默认值 说明
type String "confirm" 对话框类型:"confirm"、"input"、"notice"、"progress"、"url"、"load"
title String "提示" 对话框标题
id String "cyberwin_app_artdialog2023" 对话框唯一标识
width String "730px" 对话框宽度
height String "400px" 对话框高度
mask Boolean false 是否显示遮罩层
move Boolean true 是否允许拖拽
hideclose Boolean false 是否隐藏关闭按钮
hidetitle Boolean false 是否隐藏标题栏
alpha Number 1 透明度(0-1)
time Number 0 自动关闭时间(毫秒),0表示不自动关闭
align Number 5 对齐方式(1-9代表不同位置)
minbox String "N" 是否显示最小化按钮("Y"/"N")
maxbox String "N" 是否显示最大化按钮("Y"/"N")
fullscreen String "N" 是否显示全屏按钮("Y"/"N")
barbg String "#48a731" 标题栏背景色
skin String "phone" 标题栏样式("phone"、"pc"、"macos")
callback Function 空函数 确认操作的回调函数
cancel_caption String "关闭" 取消按钮文本
fold String "N" 是否默认折叠("Y"/"N")
canfold String "N" 是否允许折叠("Y"/"N")

3.3 不同类型对话框示例

3.3.1 输入对话框

// 创建带输入框的对话框
dialogCore.layer("请输入用户名:", {
    type: "input",
    title: "用户信息输入",
    callback: function(value) {
        console.log("用户输入的值:", value);
        // 处理输入值
    }
});

3.3.2 通知对话框

// 创建通知类型对话框
dialogCore.layer("您有3条新消息未读", {
    type: "notice",
    title: "新消息通知",
    time: 5000, // 5秒后自动关闭
    skin: "pc"
});

3.3.3 进度对话框

// 创建进度对话框
dialogCore.layer({/* 进度配置 */}, {
    type: "progress",
    title: "数据处理中",
    mask: true,
    width: "350px",
    height: "350px"
});

3.3.4 嵌入页面的对话框

// 创建包含网页内容的对话框
dialogCore.layer("detail.html", {
    type: "url",
    title: "详情页面",
    width: "800px",
    height: "600px",
    skin: "macos",
    minbox: "Y",
    maxbox: "Y",
    fullscreen: "Y"
});

3.3.5 加载动画对话框

// 创建加载动画对话框
dialogCore.layer("", {
    type: "load",
    mask: true,
    width: "200px",
    height: "200px"
});

// 模拟加载完成后关闭
setTimeout(function() {
    cyberwin_closeAndDeldlg("cyberwin_app_artdialog2023");
}, 3000);

4. 窗口控制函数

4.1 关闭对话框

// 关闭并移除指定ID的对话框
cyberwin_closeAndDeldlg(obj_id);

参数:obj_id - 对话框的ID属性值

4.2 切换折叠状态

// 切换对话框的折叠/展开状态
cyberwin_query_wlzc_dialog_swithbody(obj_id, 可收缩);

参数:

  • obj_id - 对话框的ID属性值
  • 可收缩 - 是否允许折叠("Y"/"N")

4.3 最小化对话框

// 最小化指定对话框
cyberwin_dialog_mindlg(obj_id, 是否mask);

参数:

  • obj_id - 对话框的ID属性值
  • 是否mask - 对话框是否使用了遮罩层(true/false)

4.4 最大化对话框

// 最大化指定对话框
cyberwin_dialog_maxdlg(obj_id, 是否mask, 高度);

参数:

  • obj_id - 对话框的ID属性值
  • 是否mask - 对话框是否使用了遮罩层(true/false)
  • 高度 - 最大化后的高度值

4.5 全屏显示对话框

// 全屏显示指定对话框
cyberwin_dialog_fulldlg(obj_id, 是否mask);

参数:

  • obj_id - 对话框的ID属性值
  • 是否mask - 对话框是否使用了遮罩层(true/false)

5. 样式扩展

可以通过以下方法强制添加自定义样式,用于覆盖或扩展默认样式:

// 强制添加自定义样式
$cq.强制加载样式(styleContent);

参数:styleContent - CSS样式内容字符串

示例

// 添加自定义样式
$cq.强制加载样式(`
    .cyberwin_dialog_localapp_fix {
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .set_top {
        background: #2c3e50;
    }
`);

6. 兼容性说明

  • 支持桌面端主流浏览器(Chrome、Firefox、Safari、Edge)
  • 支持移动端浏览器,包括触摸拖拽操作
  • 标题栏样式支持不同设备风格:phone(默认)、pc、macos
  • 自动适配不同屏幕尺寸,支持多种对齐方式

7. 常见问题

Q1: 如何确保对话框组件已正确加载?

A1: 可以通过以下代码验证:

if ($cq.对话框() && $cq.对话框() === CyberWin_Dialog) {
    console.log("组件已正确加载");
} else {
    console.error("组件加载失败");
}

Q2: 对话框无法拖拽移动怎么办?

A2: 检查是否在配置中设置了 move: false,如需开启拖拽功能,确保配置为 move: true(默认值)。

Q3: 如何自定义对话框的按钮样式?

A3: 可以通过 $cq.强制加载样式() 方法添加自定义CSS,覆盖默认按钮样式。

Q4: 对话框内容如何支持滚动?

A4: 当内容超出对话框高度时,会自动显示滚动条,确保内容区域样式设置了 overflow-y: auto(默认已设置)。

硬件app