jQuery artDialog对话框插件API

插件应用

浏览数:4,969

2017-6-23

简介

artDialog —— 经典、优雅的网页对话框控件。

支持普通与 12 方向气泡状对话框
完善的焦点处理，自动焦点附加与回退
支持 ARIA 标准
面向未来：基于 HTML5 Dialog 的 API
支持标准与模态对话框
丰富且友好的编程接口
能自适应内容尺寸
仅 4kb (gzip)

在线演示及下载

在线演示
 本地下载

引入文件

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

使用方法

var d = dialog({
    title: '欢迎',
    content: '欢迎使用！'
});
d.show();

参数说明

名称	类型	默认值	描述
内容
title	String	‘消息’	标题内容
content	String	‘loading..’	消息内容。 1、如果传入的是HTMLElement类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置 2、如果没有设定content的值则会有loading的动画
HTMLElement
按钮
ok	Function	null	确定按钮回调函数。函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮
Boolean
cancel	Function	null	取消按钮回调函数。函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel事件
Boolean
okVal	String	‘确定’	"确定按钮"文字
cancelVal	String	‘取消’	"取消按钮"文字
button	Array	null	自定义按钮。配置参数成员： name —— 按钮名称 callback —— 按下后执行的函数 focus —— 是否聚焦点 disabled —— 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）示例：参数如：[{name: ‘登录’, callback: function () {}}, {name: ‘取消’}] 。注意点击按钮默认会触发按钮关闭动作，需要阻止触发关闭请让回调函数返回false
尺寸
width	Number	‘auto’	设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
String
height	Number	‘auto’	设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整
String
位置
fixed	Boolean	false	开启静止定位。静止定位是css2.1的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持IE6 fixed）
follow	HTMLElement	null	让对话框依附在指定元素附近。可传入元素ID名称，注意ID名称需要以“#”号作为前缀
String
left	Number	‘50%’	相对于可视区域的X轴的坐标。可以使用’0%’ ~ ‘100%’作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
String
top	Number	‘38.2%’	相对于可视区域的Y轴的坐标。可以使用’0%’ ~ ‘100%’作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整
String
视觉
lock	Boolean	false	开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/消息，所以不建议频繁使用它，它会让操作变得繁琐
background	String	‘#000’	锁屏遮罩颜色
opacity	Number	0.7	锁屏遮罩透明度
icon	String	null	定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）
padding	String	’20px 25px’	内容与边界填充边距(即css padding)
交互
time	Number	null	设置对话框显示时间。以秒为单位
resize	Boolean	true	是否允许用户调节尺寸
drag	Boolean	true	是否允许用户拖动位置
esc	Boolean	true	是否允许用户按Esc键关闭对话框
高级
id	String	null	设定对话框唯一标识。用途： 1、防止重复弹出 2、定义id后可以使用art.dialog.list[youID]获取扩展方法
Number
zIndex	Number	1987	重置全局zIndex初始值。用来改变对话框叠加高度。比如有时候配合外部浮动层UI组件，但是它们可能默认zIndex没有artDialog高，导致无法浮动到artDialog之上，这个时候你就可以给对话框指定一个较小的zIndex值。请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
init	Function	null	对话框弹出后执行的函数
close	Function	null	对话框关闭前执行的函数。函数如果返回false将阻止对话框关闭。请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close都将执行。
show	Boolean	true	是否显示对话框

喜欢 0

jQuery artDialog对话框插件API

简介

在线演示及下载

引入文件

使用方法

参数说明

相关推荐