摘要:// 创建带有确认和取消按钮的对话框dialogCore.open(title, content, confirmText, cancelText, callback);
组件版本:2023.1
CyberWin_Dialog 是一个功能完善的对话框组件,提供了丰富的弹窗交互能力,包括:
多种对话框类型(信息提示、确认框、输入框、加载动画等)窗口控制功能(最小化、最大化、全屏、折叠)拖拽移动支持(桌面端鼠标拖拽和移动端触摸拖拽)多种样式主题(适配不同设备风格)自动关闭和动画效果所有功能通过统一的命名空间访问,接口简洁易用,可满足各种交互场景需求。
// 通过 $cq 命名空间获取对话框核心实例const dialogCore = $cq.对话框;// 验证是否获取成功if (dialogCore) {console.log("对话框组件加载成功");} else {console.error("对话框组件未加载");}通过 $cq.对话框 方法可获取对话框核心实例,所有功能均通过该实例调用。
// 创建带有确认和取消按钮的对话框dialogCore.open(title, content, confirmText, cancelText, callback);参数类型说明titleString对话框标题contentString对话框内容(支持HTML格式)confirmTextString确认按钮文本cancelTextString取消按钮文本callbackFunction点击确认按钮后的回调函数dialogCore.open("操作确认","确定要执行此操作吗?","确认","取消",function {console.log("用户点击了确认");// 执行确认后的逻辑});// 创建只有确认按钮的对话框dialogCore.ok(title, content, confirmText, callback);dialogCore.ok("操作成功","数据已成功保存到服务器","确定",function {console.log("用户已确认");// 执行后续操作});最强大的对话框方法,支持多种类型和丰富的配置选项:
// 创建高级对话框dialogCore.layer(content, options);配置项类型默认值说明typeString"confirm"对话框类型:"confirm"、"input"、"notice"、"progress"、"url"、"load"titleString"提示"对话框标题idString"cyberwin_app_artdialog2023"对话框唯一标识widthString"730px"对话框宽度heightString"400px"对话框高度maskBooleanfalse是否显示遮罩层moveBooleantrue是否允许拖拽hidecloseBooleanfalse是否隐藏关闭按钮hidetitleBooleanfalse是否隐藏标题栏alphaNumber1透明度(0-1)timeNumber0自动关闭时间(毫秒),0表示不自动关闭alignNumber5对齐方式(1-9代表不同位置)minboxString"N"是否显示最小化按钮("Y"/"N")maxboxString"N"是否显示最大化按钮("Y"/"N")fullscreenString"N"是否显示全屏按钮("Y"/"N")barbgString"#48a731"标题栏背景色skinString"phone"标题栏样式("phone"、"pc"、"macos")callbackFunction空函数确认操作的回调函数cancel_captionString"关闭"取消按钮文本foldString"N"是否默认折叠("Y"/"N")canfoldString"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, 可收缩);参数:
obj_id - 对话框的ID属性值可收缩 - 是否允许折叠("Y"/"N")// 最小化指定对话框cyberwin_dialog_mindlg(obj_id, 是否mask);参数:
obj_id - 对话框的ID属性值是否mask - 对话框是否使用了遮罩层(true/false)// 最大化指定对话框cyberwin_dialog_maxdlg(obj_id, 是否mask, 高度);参数:
obj_id - 对话框的ID属性值是否mask - 对话框是否使用了遮罩层(true/false)高度 - 最大化后的高度值// 全屏显示指定对话框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;}`);if ($cq.对话框 && $cq.对话框 === CyberWin_Dialog) {console.log("组件已正确加载");} else {console.error("组件加载失败");}A2: 检查是否在配置中设置了 move: false,如需开启拖拽功能,确保配置为 move: true(默认值)。
A3: 可以通过 $cq.强制加载样式 方法添加自定义CSS,覆盖默认按钮样式。
A4: 当内容超出对话框高度时,会自动显示滚动条,确保内容区域样式设置了 overflow-y: auto(默认已设置)。
让我们积极投身于技术共享的浪潮中,不仅仅是作为受益者,更要成为贡献者。无论是分享自己的代码、撰写技术博客,还是参与开源项目的维护和改进,每一个小小的举动都可能成为推动技术进步的巨大力量
Embrace open source and sharing, witness the miracle of technological progress, and enjoy the happy times of humanity! Let's actively join the wave of technology sharing. Not only as beneficiaries, but also as contributors. Whether sharing our own code, writing technical blogs, or participating in the maintenance and improvement of open source projects, every small action may become a huge force driving technological progrss.
来源:我我爱心依旧