artDialog —— 经典、优雅的网页对话框控件。
仅 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: '欢迎使用 artDialog 对话框组件!' }); 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 | 是否显示对话框 |