jQuery artDialog对话框插件API

插件应用

浏览数:5,175

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

© 2012-2019 jqhtml.com · 湘ICP备16001111号-1