mgDialog jQuery对话框插件
基础
实现功能
- 结构可配置:标题，按钮，关闭X，遮罩(模态)
- 可完全自定义dom结构
- 两种定位方式:absolute(默认)、fixed
- 事件可配置:按钮，按键，计时
- 自定义事件
- 按键监听
- 倒计时
- 出入场动画
- 多窗口
- 拖拽
- 内置方法 alert confirm prompt toast
基本使用
普通方式
$.dialog({ content : '这是一个对话框。' }).open();弹出已存在的dom
html
<div id="dialog"> <p>自定义dom的对话框。</p> </div>javascript
$('#dialog').dialog().open();内置方法
$.alert('这是一个提示框。');配置项
-
hasMask
说明：是否启用背景遮罩（模态）； 类型：boolean； 默认值：true；
-
hasTitle（自定义dom时，此属性无效）
说明：是否有标题； 类型：boolean； 默认值：true；
-
hasCross（自定义dom时，此属性无效）
说明：是否有右上角关闭按钮； 类型：boolean； 默认值：true；
-
hotKeys
说明：是否启用键盘控制[enter,esc]； 类型：boolean； 默认值：true；
-
drag
说明：是否启用拖拽； 类型：boolean； 默认值：true；
-
fixed
说明：是否fixed定位； 类型：boolean； 默认值：false；
-
autoFocus
说明：打开对话框时，是否自动聚焦（聚焦的对话框会被置于顶层，键盘只会触发已聚焦对话框的事件）； 类型：boolean； 默认值：true；
-
autoDestroy
说明：关闭对话框时，是否调用this.destroy() 销毁对话框； 类型：boolean； 默认值：false；
-
autoReset（自定义dom时，此属性无效）
说明：关闭对话框时，是否调用this.reset() 重置对话框； 类型：boolean； 默认值：false；
-
titleAlign（自定义dom时，此属性无效）
说明：标题对齐方式； 类型：string [left|center|right]； 默认值：left；
-
contentAlign（自定义dom时，此属性无效）
说明：内容对齐方式； 类型：string [left|center|right]； 默认值：left；
-
buttonsAlign（自定义dom时，此属性无效）
说明：按钮对齐方式； 类型：string [left|center|right]； 默认值：right；
-
title（自定义dom时，此属性无效）
说明：标题； 类型：string [文本|html片段]； 默认值：标题；
-
content（自定义dom时，此属性无效）
说明：内容； 类型：string [文本|html片段]； 默认值：空；
-
buttons（自定义dom时，此属性无效）
说明：按钮； 类型：array，定义多个按钮[{},{}]； 默认值：[]；
按钮配置项
* type > 说明：按钮类型（定义了样式，默认的文字和call值。） > 类型：string [confirm|cancel] > 默认值：无 > confirm：蓝色，文字:确认，call:'confirm,close' > cancel：白色，文字:取消，call:'cancel,close' * call > 说明：事件流（点击按钮时触发） > 类型：string [以逗号分隔的事件名称] > 默认值：无 * text > 说明：按钮上的文字 > 类型：string [文本|html片段] > 默认值：按钮 * disabled > 说明：是否禁用按钮（被禁用的按钮不会触发事件流） > 类型：boolean > 默认值：false * hidden > 说明：是否隐藏按钮 > 类型：boolean > 默认值：false -
top, right, bottom, left
说明：定位（top, left优先于bottom, right）； 类型：number； 默认值：null （都为null的时候，中心定位）；
-
width, height
说明：尺寸； 类型：number | auto (string)； 默认值：320(width) auto(height)；
-
gap（fixed定位时此属性无效）
说明：对话框到屏幕边缘的最小距离（px）； 类型：number； 默认值：10；
-
countdown
说明：打开对话框时倒计时； 类型：number [>=0]（倒计时秒数）； 默认值：0（不启用倒计时）；
-
enterCall
说明：按回车[enter]键时调用的事件流； 类型：string [事件流]； 默认值：confirm,close；
-
escCall
说明：按退出[esc]键时调用的事件流； 类型：string [事件流]； 默认值：cancel,close；
-
countdownCall
说明：倒计时结束后调用的事件流； 类型：string； 默认值：close；
-
onOpen, onClose, onConfirm, onCancel
说明：内置的事件定义； 类型：function； 默认值：null； 详细：onOpen（对话框打开时调用）、onClose（对话框关闭时调用）、onConfirm（用户确认时调用）、onCancel（用户取消时调用），this指向对话框对象； 自定义事件：任意定义on+大写字母开头的事件，配置其事件流时去掉on，第一个字母小写即可；
方法
除了destroy()之外的方法都支持链式调用
-
open()
说明：打开对话框，触发onOpen，如返回false，则不打开对话框； 参数：无； 返回：this；
-
close()
说明：关闭对话框，触发onClose，如返回false，则不关闭对话框； 参数：无； 返回：this；
-
title(text)
说明：修改标题； 参数：string [文本|html]； 返回：this；
-
content(text)
说明：修改内容； 参数：string [文本|html]； 返回：this；
-
button(index,options) （自定义dom时，此方法无效）
说明：修改按钮； 参数：index [number] 按钮索引，options [object] 按钮选项，同对话框配置项buttons（type属性只能修改样式，不再定义默认文字和call）； 返回：this；
-
width(n)
说明：修改对话框宽度； 参数：number | auto(string)； 返回：this；
-
height(n)
说明：修改对话框高度； 参数：number | auto(string)； 返回：this；
-
position(origin)
说明：对话框重定位，改变对话框大小后可能用到； 参数：origin [number:0-12] 定位源 代表时钟方向 0（默认）为中心定位； 返回：this；
-
reset() （自定义dom时，此方法无效）
说明：重置对话框（尺寸，标题，内容，按钮）； 参数：无； 返回：this；
-
countdown(n,cb)
说明：倒计时； 参数：n [number] 倒计时秒数，cb [string|function] 回调 参数为事件流定义或者函数 默认值是配置项中countdownCall的值； 返回：this；
-
trigger(call)
说明：调用已定义的事件流； 参数：string [事件流] ； 返回：this；
-
destroy()
说明：销毁对话框； 参数：无； 返回：undefined；
内置快捷方法
-
$.alert(text,title)
说明：弹出一个提示框； 参数：text [string] 内容，title [string] 标题； 返回：对话框对象；
-
$.confirm(text,fn,title)
说明：弹出一个确认框； 参数：text [string] 内容，fn [function] 回调函数 根据用户选择传入一个boolean值，title [string] 标题； 返回：对话框对象；
-
$.prompt(text,fn,title)
说明：弹出一个输入框； 参数：text [string] 内容，fn [function] 回调函数 传入输入框内容，title [string] 标题； 返回：对话框对象；
-
$.toast(text,width)
说明：弹出一个自动消失的提示框； 参数：text [string] 内容，width [number] 宽度 默认auto； 返回：对话框对象；
高级
按钮及事件
待续
倒计时
待续
多窗口
待续
自定义dom
待续
demos
待续
综合应用和二次封装
- 视频滚屏弹出效果
- 中奖弹出效果
- 图片预览效果
- 查看超大尺寸图片
- 待续
后续可能增加的功能
- focus()
- blur()
- 点击空白处关闭对话框
- 动画可配置
