http://www.51xuediannao.com/js/artdialog_v6api.html

artdialog v6强大的模态对话框v6版api

作者：佳明妈 来源：aui 2015-03-31 人气：56626

artdialog v6强大的模态对话框jquery插件api使用以及免费下载，artdialog v6版体积更小压缩版只有10K多点，功能更强，兼容到IE6以上，artdialog有弹出窗口、弹出层功能，还提供了各个方向的t
artdialog v6强大的模态对话框v6版api
  • 文件类型：代码
  • 查看演示 立即下载
artdialog v6强大的模态对话框jquery插件api使用以及免费下载，artdialog v6版体积更小压缩版只有10K多点，功能更强，兼容到IE6以上，国内qq空间，盛大等网站都选择了这款弹出窗口插件。

artdialog有弹出窗口、弹出层功能，也有模拟alert等js原生提示的模态对话框解决方案，还提供了各个方向的tip提示功能。
有了这个弹出层，足以应付绝大部分工作了。

弹出层插件不在多在于稳定、强大、小巧、兼容好。

调用方法：
jquery库你可以自行引用合适的版本，可以参考：前端公共库cdn服务推荐//提高加载速度/节省流量http://www.51xuediannao.com/jiqiao/cdn_lib.html

<script src="lib/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="css/ui-dialog.css">
<script src="dist/dialog-min.js"></script>
-------------------------------------------------------------------------
artdialog 使用
-------------------------------------------------------------------------

普通对话框
 
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！'
});
d.show();
 
模态对话框
 
var d = dialog({
title: 'message',
content: '<input autofocus />'
});
d.showModal();
气泡浮层
var d = dialog({
content: 'Hello World!',
quickClose: true// 点击空白处快速关闭
});
d.show(document.getElementById('quickref-bubble'));
12 个方向定位演示
添加按钮
1.确定与取消按钮：
var d = dialog({
title: '提示',
content: '按钮回调函数返回 false 则不许关闭',
okValue: '确定',
ok: function () {
this.title('提交中…');
return false;
},
cancelValue: '取消',
cancel: function () {}
});
d.show();
2.指定更多按钮：
请参考 button 方法或参数。
控制对话框关闭
var d = dialog({
content: '对话框将在两秒内关闭'
});
d.show();
setTimeout(function () {
d.close().remove();
}, 2000);
给对话框左下脚添加复选框
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
ok: function () {},
statusbar: '<label><input type="checkbox">不再提醒</label>'
});
d.show();
点按钮不关闭对话框
按钮事件返回 false 则不会触发关闭。
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
ok: function () {
var that = this;
this.title('正在提交..');
setTimeout(function () {
that.close().remove();
}, 2000);
return false;
},
cancel: function () {
alert('不许关闭');
return false;
}
});
d.show();
不显示关闭按钮
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
cancel: false,
ok: function () {}
});
d.show();
创建 iframe 内容
artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：
seajs.use(['dialog/src/dialog-plus'], function (dialog) {
window.dialog = dialog;
});
然后子页面就可以通过top.dialog控制对话框了。
打开示例页面
小提示：增强版的选项比标准版多了url、oniframeload这几个字段。
方法
若无特别说明，方法均支持链式调用。
show([anchor])
显示对话框。
默认居中显示，支持传入元素节点或者事件对象。
参数类型为HTMLElement：可吸附到元素上，同时对话框将呈现气泡样式。
参数类型为Event Object：根据event.pageX与event.pageY定位。
示例
var d = dialog();
d.content('hello world');
d.show(document.getElementById('api-show'));
var d = dialog({
id: 'api-show-dialog',
quickClose: true,
content: '右键菜单'
});
$(document).on('contextmenu', function (event) {
d.show(event);
return d.destroyed;
});
showModal([anchor])
显示一个模态对话框。
其余特性与参数可参见show([anchor])方法。
示例
var d = dialog({
title: 'message',
content: '<input autofocus />'
});
d.showModal();
close([result])
关闭（隐藏）对话框。
可接收一个返回值，可以参见 returnValue。
注意：close()方法只隐藏对话框，不会在 DOM 中删除，删除请使用remove()方法。
remove()
销毁对话框。
注意：不同于close([result])方法，remove()方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。
对话框按钮点击后默认会依次触发 close()、remove() 方法。如果想手动控制对话框关闭可以如下操作：
var d = dialog();
// [..]
d.close().remove();
content(html)
写入对话框内容。
html参数支持String、HTMLElement类型。
示例
传入字符串：
var d = dialog();
d.content('hello world');
d.show();
传入元素节点：
var elem = document.getElementById('test');
dialog({
content: elem,
id: 'EF893L'
}).show();
v6.0.4 更新：隐藏元素将会自动显示，并且对话框卸载的时候会放回到body中
title(text)
写入对话框标题。
示例
var d = dialog();
d.title('hello world');
d.show();
width(value)
设置对话框宽度。
示例
dialog({
content: 'hello world'
})
.width(320)
.show();
height(value)
设置对话框高度。
示例
dialog({
content: 'hello world'
})
.height(320)
.show();
reset()
手动刷新对话框位置。
通常动态改变了内容尺寸后需要刷新对话框位置。
button(args)
自定义按钮。
参数请参考 选项button；同时支持传入 HTML 字符串填充按钮区域。
focus()
聚焦对话框（置顶）。
blur()
让对话框失去焦点。
addEventListener(type, callback)
添加事件。
支持的事件有：show、close、beforeremove、remove、reset、focus、blur
removeEventListener(type, callback)
删除事件。
dialog.get(id)
根据获取打开的对话框实例。
注意：这是一个静态方法。
dialog.getCurrent()
获取当前（置顶）对话框实例。
注意：这是一个静态方法。
配置参数
content
设置消息内容。
类型
String, HTMLElement
示例
传入字符串：
dialog({
content: 'hello world!'
}).show();
传入元素节点：
var elem = document.getElementById('test');
dialog({
content: elem,
id: 'EF893L'
}).show();
title
标题内容。
类型
String
示例
dialog({
title: 'hello world!'
}).show();
statusbar
状态栏区域 HTML 代码。
可以实现类似“不再提示”的复选框。注意：必须有按钮才会显示。
类型
String
示例
var d = dialog({
title: '欢迎',
content: '欢迎使用 artDialog 对话框组件！',
ok: function () {},
statusbar: '<label><input type="checkbox">不再提醒</label>'
});
d.show();
ok
确定按钮。
回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。
类型
Function
示例
dialog({
ok: function () {
this
.title('消息')
.content('hello world!')
.width(130);
return false;
}
}).show();
okValue
(默认值: "ok") 确定按钮文本。
类型
String
示例
dialog({
okValue: '猛击我',
ok: function () {
this.content('hello world!');
return false;
}
}).show();
cancel
取消按钮。
取消按钮也等同于标题栏的关闭按钮，若值为false则不显示关闭按钮。回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭。
类型
Function, Boolean
示例
dialog({
title: '消息',
ok: function () {},
cancel: function () {
alert('取消');
}
}).show();
dialog({
title: '消息',
content: '不显示关闭按钮',
ok: function () {},
cancel: false
}).show();
cancelValue
(默认值: "cancel") 取消按钮文本。
类型
String
示例
dialog({
cancelValue: '取消我',
cancel: function () {
alert('关闭');
}
}).show();
cancelDisplay
(默认值: true) 是否显示取消按钮。
类型
Boolean
示例
dialog({
title: '提示',
content: '这是一个禁止关闭的对话框，并且没有取消按钮',
cancel: function () {
alert('禁止关闭');
return false;
},
cancelDisplay: false
}).show();
button
自定义按钮组。
类型
Array
选项
名称  类型  描述
value  String  按钮显示文本
callback  Function  (可选) 回调函数this指向dialog对象，执行完毕默认关闭与销毁对话框（依次执行close()与remove()），若返回false则阻止关闭与销毁
autofocus  Boolean  (默认值:false) 是否自动聚焦
disabled  Boolean  (默认值: false) 是否禁用
示例
dialog({
button: [
{
value: '同意',
callback: function () {
this
.content('你同意了');
return false;
},
autofocus: true
},
{
value: '不同意',
callback: function () {
alert('你不同意')
}
},
{
id: 'button-disabled',
value: '无效按钮',
disabled: true
},
{
value: '关闭我'
}
]
}).show();
width
设置对话框 内容 宽度。
类型
String, Number
示例
dialog({
width: 460
}).show();
dialog({
width: '20em'
}).show();
height
设置对话框 内容 高度。
类型
String, Number
示例
dialog({
height: 460
}).show();
dialog({
height: '20em'
}).show();
skin
设置对话框额外的className参数。
多个className请使用空格隔开。
类型
String
示例
dialog({
skin: 'min-dialog tips'
}).show();
padding
(默认值: 继承 css 文件设置) 设置消息内容与消息容器的填充边距，即 style padding属性
类型
String
示例
dialog({
content: 'hello world',
padding: 0
}).show();
fixed
(默认值: false) 开启固定定位。
固定定位是 css2.1 position的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。
类型
Boolean
示例
dialog({
fixed: true,
title: '消息',
content: '请拖动滚动条查看'
}).show();
align
(默认值: "bottom left") 设置对话框与其他元素的对齐方式。
如果show(elem)与showModal(elem)传入元素，align参数方可生效，支持如下对齐方式：
"top left"
"top"
"top right"
"right top"
"right"
"right bottom"
"bottom right"
"bottom"
"bottom left"
"left bottom"
"left"
"left top"
类型
String
示例
var d = dialog({
align: 'left',
content: 'Hello World!',
quickClose: true
});
d.show(document.getElementById('option-align'));
12 个方向定位演示
autofocus
(默认值: true) 是否支持自动聚焦。
类型
Boolean
quickClose
(默认值: false) 是否点击空白出快速关闭。
类型
Boolean
示例
var d = dialog({
content: '点击空白处快速关闭',
quickClose: true
});
d.show(document.getElementById('option-quickClose'));
zIndex
(默认值: 1024) 重置全局zIndex初始值，用来改变对话框叠加高度。
比如有时候配合外部浮动层 UI 组件，但是它们可能默认zIndex没有对话框高，导致无法浮动到对话框之上，这个时候你就可以给对话框指定一个较小的zIndex值。
请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
类型
Number
示例
dialog({
zIndex: 87
}).show();
onshow
对话框打开的事件。
回调函数this指向dialog对象。
类型
Function
示例
var d = dialog({
content: 'loading..',
onshow: function () {
this.content('dialog ready');
}
});
d.show();
onclose
对话框关闭后执行的事件。
回调函数this指向dialog对象。
类型
Function
示例
var d = dialog({
onclose: function () {
alert('对话框已经关闭');
},
ok: function () {}
});
d.show();
onbeforeremove
对话框销毁之前事件。
回调函数this指向dialog对象。
类型
Function
onremove
对话框销毁事件。
回调函数this指向dialog对象。
类型
Function
示例
var d = dialog({
onclose: function () {
alert('对话框已经关闭');
},
onremove: function () {
alert('对话框已经销毁');
},
ok: function () {}
});
d.show();
onfocus
对话框获取焦点事件。
回调函数this指向dialog对象。
类型
Function
onblur
对话框失去焦点事件。
回调函数this指向dialog对象。
类型
Function
onreset
对话框位置重置事件。
回调函数this指向dialog对象。
类型
Function
id
设定对话框唯一标识。
可防止重复 ID 对话框弹出。
支持使用dialog.get(id)获取某个对话框的接口。
类型
String
示例
dialog({
id: 'id-demo',
content: '再次点击看看'
}).show();
dialog.get('id-demo').title('8888888888');
属性
open
判断对话框是否被打开。
returnValue
对话框返回值。
示例
var d = dialog({
title: '消息',
content: '<input id="property-returnValue-demo" value="1" />',
ok: function () {
var value = $('#property-returnValue-demo').val();
this.close(value);
this.remove();
}
});
d.addEventListener('close', function () {
alert(this.returnValue);
});
d.show();
其他
自定义样式
打开配置文件： src/dialog-config.js，其中cssUir字段是 css 文件的路径，innerHTML字段则是 artDialog 的模板。修改这两个字段即可很方便的设计属于自己的皮肤。
一套皮肤可以添加不同的className实现多种状态，可参考 skin 选项。

artdialog v6强大的模态对话框v6版api相关推荐

  1. 大头贴制作大师 v6.9.5 简体中文绿色特别版

    软件大小: 11 mb 软件语言: 简体中文 软件类别: 绿色软件 运行环境: win2003, winxp, win2000, nt, winme 授权方式: 免费软件 软件等级: 更新时间: 20 ...

  2. 华创网表v6.8无捆绑官方正式版

    名称:华创网表v6.8无捆绑官方正式版 版本:6.8 软件大小:25.0MB 软件语言:中文简体 软件授权:免费版 应用平台:WinXP/Win2003/Vista/Win7/Win8 华创网表是一款 ...

  3. Bootstrap 模态对话框只加载一次 remote 数据的解决办法

    前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...

  4. jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏

    查找标签 选择器: 基本选择器(同css) id选择器 $("#id")标签选择器 $('tagName')class选择器 $(".className")配合 ...

  5. antd vue关闭模态对话框_如何在Bootstrap项目中用Vue.js替代jQuery

    Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...

  6. Bootstrap 模态对话框只加载一次 remote 数据的解决办法 转载

    http://my.oschina.net/qczhang/blog/190215 摘要 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...

  7. MFC应用模态对话框和非模态对话框

    关于对话框呢 第一个了解的就是模态对话框和非模态对话框 定义的话: 1.模态对话框工作状态:当它获得焦点时,将垄断用户的输入,在完成本对话框之前,用户无法对本程序的其他部分进行操作. 2.非模态对话框 ...

  8. JavaScrip高级应用：操作模态与非模态对话框

    JavaScrip高级应用:操作模态与非模态对话框  本文出自:http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38)  我们知道, ...

  9. java 非模态_JavaScrip高级应用：操作模态与非模态对话框

    http://www.computerworld.com.cn 作者: 甘冀平 (2002-01-29 20:41:38) 我们知道,对话框一般分为两种类型:模态类型(modal)与非模态类型(mod ...

  10. 来个模态kuang_模态对话框(modal dialogue box)中模态一词的意思是什么？

    这个问题也困扰了我很久.最近整理了下资料,写了一篇文章<5 分钟设计指南:对话框>,希望能帮上忙. 对话框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要 ...

最新文章

  1. 函数计算的是什么_【Excel函数教程】3个例子让你彻底玩转EDATE函数
  2. 《编写高质量代码：改善c程序代码的125个建议》——建议19：避免使用嵌套的“?:”...
  3. use SQVI to display table join
  4. 通过adb巧用monkey获取android设备中所有应用的主activity
  5. 智能车的转弯部分_江西智能搬运平板车铁路轨道运输车-厂家直销
  6. Java系列之雪花算法和原理
  7. 我该用 Java 12 还是坚持 Java 11？
  8. 微信小程序代码提交步骤
  9. python迅雷下载器_简单的迅雷VIP账号获取器（Python）
  10. oracle创建用户密码和权限--ORA-65096 invalid common user or role name
  11. 为什么视频云服务会被各行业广泛看好？
  12. 树莓派3B安装64位操作系统(树莓派无需连接显示器键盘鼠标)
  13. win10在命令行下运行python程序
  14. 排球比赛计分程序的典型用户和场景
  15. android开发培训大纲,华图教育-Android应用开发培训教学大纲
  16. 2011高清影音产品市场日渐成熟 产业要求更高
  17. 【pwn】2022 极客大挑战
  18. Android程序员想进大厂？算法很重要(1)，面经解析
  19. ucenter base.php,phpcms整合ucenter问题集
  20. python猴子分桃子的数学题_python 统计桃子的个数（猴子分桃子）

热门文章

  1. win7如何设置通电自动开机_电脑如何设置自动开机,教您如何设置
  2. 对于数据混乱程度的判定准则：基尼不纯度、信息熵、方差
  3. 火星来客创业周刊第1期：独立开发者Twitter小工具60天，从月入300美金到月入3000美金
  4. 2020年ubuntu安装QQ和微信和迅雷的正确姿势
  5. King of Fighters 2003 全人物发招表（转）
  6. 90后迎来30岁，比升职更重要的是这8件事
  7. Java教程:Java分割字符串（spilt()）
  8. Android集成Bmob后端云
  9. 超干货！彻底搞懂Golang内存管理和垃圾回收
  10. 腾讯短视频SDK代码层面上录制功能的实现，短视频APP开发第一步