对话框组件
0.00
★46次@未来之窗
A:赛忞初雪
对话框组件,弹窗,进度条,确认筐,输入,回调
CyberWin_Dialog 是一个功能完善的对话框组件,提供了丰富的弹窗交互能力,包括:
所有功能通过统一的命名空间访问,接口简洁易用,可满足各种交互场景需求。
// 通过 $cq 命名空间获取对话框核心实例
const dialogCore = $cq.对话框();
// 验证是否获取成功
if (dialogCore) {
console.log("对话框组件加载成功");
} else {
console.error("对话框组件未加载");
}通过 $cq.对话框() 方法可获取对话框核心实例,所有功能均通过该实例调用。
// 创建带有确认和取消按钮的对话框
dialogCore.open(title, content, confirmText, cancelText, callback);| 参数 | 类型 | 说明 |
|---|---|---|
| title | String | 对话框标题 |
| content | String | 对话框内容(支持HTML格式) |
| confirmText | String | 确认按钮文本 |
| cancelText | String | 取消按钮文本 |
| callback | Function | 点击确认按钮后的回调函数 |
dialogCore.open(
"操作确认",
"确定要执行此操作吗?",
"确认",
"取消",
function() {
console.log("用户点击了确认");
// 执行确认后的逻辑
}
);// 创建只有确认按钮的对话框
dialogCore.ok(title, content, confirmText, callback);| 参数 | 类型 | 说明 |
|---|---|---|
| title | String | 对话框标题 |
| content | String | 对话框内容(支持HTML格式) |
| confirmText | String | 确认按钮文本 |
| callback | Function | 点击确认按钮后的回调函数 |
dialogCore.ok(
"操作成功",
"数据已成功保存到服务器",
"确定",
function() {
console.log("用户已确认");
// 执行后续操作
}
);最强大的对话框方法,支持多种类型和丰富的配置选项:
// 创建高级对话框
dialogCore.layer(content, options);| 参数 | 类型 | 说明 |
|---|---|---|
| content | String/Object | 对话框内容,根据类型不同可表示文本、URL或配置对象 |
| options | Object | 对话框配置选项(详细见下表) |
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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") |
// 创建带输入框的对话框
dialogCore.layer("请输入用户名:", {
type: "input",
title: "用户信息输入",
callback: function(value) {
console.log("用户输入的值:", value);
// 处理输入值
}
});// 创建通知类型对话框
dialogCore.layer("您有3条新消息未读", {
type: "notice",
title: "新消息通知",
time: 5000, // 5秒后自动关闭
skin: "pc"
});// 创建进度对话框
dialogCore.layer({/* 进度配置 */}, {
type: "progress",
title: "数据处理中",
mask: true,
width: "350px",
height: "350px"
});// 创建包含网页内容的对话框
dialogCore.layer("detail.html", {
type: "url",
title: "详情页面",
width: "800px",
height: "600px",
skin: "macos",
minbox: "Y",
maxbox: "Y",
fullscreen: "Y"
});// 创建加载动画对话框
dialogCore.layer("", {
type: "load",
mask: true,
width: "200px",
height: "200px"
});
// 模拟加载完成后关闭
setTimeout(function() {
cyberwin_closeAndDeldlg("cyberwin_app_artdialog2023");
}, 3000);// 关闭并移除指定ID的对话框
cyberwin_closeAndDeldlg(obj_id);参数:obj_id - 对话框的ID属性值
// 切换对话框的折叠/展开状态
cyberwin_query_wlzc_dialog_swithbody(obj_id, 可收缩);参数:
// 最小化指定对话框
cyberwin_dialog_mindlg(obj_id, 是否mask);参数:
// 最大化指定对话框
cyberwin_dialog_maxdlg(obj_id, 是否mask, 高度);参数:
// 全屏显示指定对话框
cyberwin_dialog_fulldlg(obj_id, 是否mask);参数:
可以通过以下方法强制添加自定义样式,用于覆盖或扩展默认样式:
// 强制添加自定义样式
$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;
}
`);A1: 可以通过以下代码验证:
if ($cq.对话框() && $cq.对话框() === CyberWin_Dialog) {
console.log("组件已正确加载");
} else {
console.error("组件加载失败");
}A2: 检查是否在配置中设置了 move: false,如需开启拖拽功能,确保配置为 move: true(默认值)。
A3: 可以通过 $cq.强制加载样式() 方法添加自定义CSS,覆盖默认按钮样式。
A4: 当内容超出对话框高度时,会自动显示滚动条,确保内容区域样式设置了 overflow-y: auto(默认已设置)。
硬件app