QQ咨询 官方微信

添加微信好友

官方小程序

百度小程序

微信小程序

头条小程序

关于我们

js教程

artDialog JS 对话框组件

 shitouadmin  2023-12-17 12:03:15
art.Dialog 是一个轻巧且高度兼容的 javascript 对话框组件,可让你的网页交互拥有桌面软件般的用户体验。

功能: 支持锁定屏幕 (遮罩)、模拟 alert 和 confirm、多窗口弹出、静止定位、支持 Ese 键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……

配置参数:
content: {消息内容,支持HTML}
title: {标题.默认:'提示'}
lock: {是否锁定屏幕. 默认:false}
width: {宽度,支持em等单位. 默认:'auto'}
height: {高度,支持em等单位. 默认:'auto'}
url: {iframe地址,存在content参数时候,此参数无效}
x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中,而是使用的黄金比例)}
fixed: {是否启用静止定位. 默认:false}
time: {多少秒自动关闭}
style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
yesText: {确定按钮文本. 默认:'确定'}
noText: {取消按钮文本. 默认:'取消'}
yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2',则内容容器id为'my2Content'}

形式
  1. artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭回调函数 }) 如:artDialog( 
  2.         {    
  3.             content:'欢迎你来到对话框世界!'
  4.             lock:true
  5.             style:'succeed noClose' 
  6.         }, 
  7.         function(){ 
  8.             alert('你点了确定'); 
  9.         }, 
  10.         function(){ 
  11.             alert('你点了取消'); 
  12.         } 
  13. ); 

弹出页面事例,如:
  1. $.dialog.open('export/packingInfo/list?id=' + id, { 
  2.     esc : false
  3.     lock : true
  4.     title : 'Carton List - Edit'
  5.     width : '900px'
  6.     height : '500px'
  7.     close : function() { 
  8.         window.location.reload(); 
  9.     } 
  10. }); 

在页面head设置默认配置,如:

// 设置对话框全局默认配置 
(function(){ 
    var d = art.dialog.defaults; 
    // 按需加载要用到的皮肤,数组第一个为默认皮肤 
    // 如果只使用默认皮肤,可以不填写skin 
    d.skin = ['default', 'chrome', 'facebook', 'aero']; 
     
    // 支持拖动 
    d.drag = true; 
     
    // 超过此面积大小的对话框使用替身拖动 
    d.showTemp = 100000; 
})();

在js函数里面使用,如
  1. function test(){  
  2. art.dialog({  
  3. lock: true,  
  4. content: '中断用户在对话框以外的交互,展示重要操作与消息',  
  5. yesFn: function(){  
  6.      art.dialog({content: '再来一个锁屏', lock: true});  
  7.      return false;  
  8. },  
  9. noFn: true  
  10.   
API文档

名称

类型

默认值

描述

内容

        

title

字符串

'提示'

标题内容。为false不显示标题栏(需要皮肤文件支持)

布尔

        

content

字符串

null

消息内容,如果传入的是一个JSON,还需要与tmpl参数配合解析模板

对象

        

按钮

        

yesFn

函数

null

确定按钮回调函数。

函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)

布尔

        

noFn

函数

null

取消按钮回调函数。

函数如果返回false将阻止对话框关闭;函数this指针指向内部api;如果传入true表示只显示有关闭功能的按钮;传入的第一个参数为对话框所在页面window对象(这个在穿越框架后有用)

布尔

        

yesText

字符串

'确定'

"确定按钮"文字

noText

字符串

'取消'

"取消按钮"文字

尺寸

        

width

数值

'auto'

设置内容固定宽度,可以指定单位。没有则对话框自动适配

字符串

        

height

数值

'auto'

设置内容固定高度,可以指定单位。没有则对话框自动适配

字符串

        

位置

        

fixed

布尔

false

开启静止定位

follow

元素

null

让对话框依附在指定元素附近。如果是字符串则表示使用ID获取元素

字符串

        

left

数值

'center'

X轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'left'、'center'、'right'这些关键字

字符串

        

top

数值

'center'

Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字

字符串

        

界面

        

lock

布尔

false

开启锁屏。中断用户对话框之外的交互,用于显示非常重要的操作/消息

skin

字符串

'default'

自定义风格

border

布尔

true

是否显示边框。(需要皮肤文件支持)

icon

字符串

null

定义消息图标。(需要皮肤文件支持)

高级

        

id

字符串

  

自定义对话框ID属性。用途:1、防止重复弹出 2、返回已存在ID对话框的API接口

time

数值

null

设置对话框显示时间。以秒为单位

drag

布尔

true

是否允许用户拖动对话框

limit

布尔

true

是否限制挪动与定位范围

focus

布尔

true

定位焦点到对话框中指定元素,默认定位到按钮上。如果传入字符串则使用ID获取元素

字符串

        

元素

        

effect

布尔

true

是否开启动画特效

show

布尔

true

是否显示。为false表示不显示对话框,后面可以通过控制接口show()恢复显示

tmpl

字符串

null

启用模板引擎拼接消息内容,还需要与content参数传入JSON才能生效

esc

布尔

true

是否允许Esc键关闭对话框

window

字符串

'self'

指定窗口弹出对话框,可使用'top'、'parent'、'self'等关键字或者指定其他window对象。如果是'top'则表示让对话框在顶级页面弹出

对象

        

initFn

函数

null

对话框弹出后执行的函数

closeFn

函数

null

对话框关闭前执行的函数

控制接口

名称

返回值

描述

close()

null

关闭对话框

show()

{Object}

显示对话框

hide()

{Object}

隐藏对话框

content()

{HTMLElement}

获取消息内容容器对象

content(value)

{Object}

向消息容器中写入内容(innerHTML)

follow(element)

{Object}

让对话框吸附到指定元素附近。(可传入对象的ID名称)

position(left, top)

{Object}

重新定位对话框。无参数则居中定位

size(width, height)

{Object}

重新设定对话框大小。注意此时参数类型必须为数值

focus(element)

{Object}

定位焦点


自带的扩展方法

名称

描述

art.dialog.alert(content)

警告

art.dialog.confirm(content, yesFn, noFn)

确认

art.dialog.prompt(content, yesFn, value)

提问

art.dialog.open(url, options)

弹窗(iframe

art.dialog.close()

open方法创建的iframe里可用此关闭对话框

art.dialog.parent

open方法创建的iframe里可用此获取来源窗口的window对象

art.dialog.tips(content, time)

短暂提示

art.dialog.load(url, options, cache)

Ajax加载内容


扩展方法详解
名称 描述
核心方法
art.dialog.top 获取artDialog可用最高层window对象。这与直接使用window.top不同,它能排除artDialog对象不存在已经或者顶层页面为框架集的情况
这是iframe应用工具集中的核心方法,你可以用它来操作父页面对象(包括上面的对话框)
art.dialog.data(name, value) 跨框架数据共享写入接口。
框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是噩梦。
而data方法就是为了解决这个问题,你完全不用管框架层级问题,它可以写入任何类型的数据,而做到各个页面之间数据共享。
art.dialog.data(name) 跨框架数据共享读取接口。指定name即返回数据,任何引用了artDialog的页面都有效
art.dialog.removeData(name) 跨框架数据共享删除接口。删除指定名称的数据,任何引用了artDialog的页面都有效
异步数据对话框
art.dialog.open(url, options, cache) 创建一个iframe页面
参数: 地址, 配置参数, 缓存开关(默认true)
art.dialog.open.api iframe页面获取open方法扩展方法。 
(注意这个iframe中也必须引用artDialog脚本文件)
art.dialog.opener iframe页面获取open方法触发来源页面window对象。 
(注意这个iframe中也必须引用artDialog脚本文件)
art.dialog.close() iframe页面关闭open方法创建的对话框的快捷方式。
close方法等同于:

var api = art.dialog.open.api;

api && api.close();


(注意这个iframe中也必须引用artDialog脚本文件)
art.dialog.load(url, options, cache) Ajax加载内容
参数:地址, 配置参数, 缓存开关(默认true)
基础交互对话框
art.dialog.alert(content, callback) 警告消息 (同时只允许一个alert)
参数: 内容, 对话框关闭后的回调函数
art.dialog.confirm(content, ok, cancel) 确认 (同时只允许一个confirm)
参数: 内容, 确定按钮回调函数, 取消按钮回调函数
art.dialog.prompt(content, ok, value) 提问 (同时只允许一个prompt)
参数: 内容, 确定按钮回调函数, 文本框默认值
art.dialog.tips(content, time) 短暂提示(同时只允许一个tips)
参数: 内容、显示时间(单位秒, 默认1.5)
自定义
art.dialog.through(options) 创建一个普通可穿越框架的对话框
不鼓励直接使用window.top这样的方式穿越,这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常

¥ 打赏
×
如果您觉得文章帮助了您就打赏一下吧
非常感谢你的打赏,我们将继续分享更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

本文《artDialog JS 对话框组件》发布于石头博客文章,作者:shitouadmin,如若转载,请注明出处:https://www.pweb123.com/html/JavaScript/1008.html,否则禁止转载,谢谢配合!
上一篇:npm init -y失败
下一篇:最后一页

文章点评

我来说两句 已有0条评论
点击图片更换

添加微信好友

添加微信好友

微信小程序

百度小程序