自定义对话框（jDialog）
Posted 疯子加天才
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义对话框（jDialog）相关的知识，希望对你有一定的参考价值。
【配置项】jDialog options
一、接口功能
jDialog的默认配置项，本组件提供的所有对话框，都可以通过修改这些配置项来实现不同的效果。
二、详细配置项
/**
* 对话框的默认配置项目
* @type {Object}
*/
var defaultOptions = {
modal : true, //是否模态窗口
title : null, //窗口标题
content : null, //内容
width : 300, //对话框默认宽度：300px
height : null, //自适应
minWidth : 200, //窗口最小宽度
minHeight : 60, //窗口最小高度
maxWidth : null, //窗口最大宽度：默认无限大
maxHeight : null, //窗口最大高度：默认无限大
padding : ‘10px‘, //内边距，默认10px，可以配置上右下左四个值
fixed : true , //是否使用fix属性定位窗口
left : null, //初始显示位置
top : null, //初始显示位置
closeable : true, //是否可关闭
hideOnClose : false, //关闭时是否只隐藏窗口，而不是删除，可通过show方法再次显示
draggable : true, //是否可拖拽
contentType : null, //如果是iframe,请指定url
zIndex : 1024, //默认z-index为1024
resizable : false, //是否可以通过拖拽改变大小
autoShow : true, //是否自动显示
autoMiddle : true, //窗口大小改变时，保持居中
autoClose : 0, //自动关闭，单位毫秒，0表示不自动关闭
showShadow : true, //是否显示阴影
showTitle : true, //是否显示标题
textAlign : ‘inherit‘,//内容对其方式，默认：inherit
buttonAlign : ‘right‘, //按钮对齐方式，可选值：left / right / center，默认：right
dialogClassName : null, //对话框的自定义class
maskClassName : null, //遮罩层的自定义class
wobbleEnable : false, //模态下，点击空白处，是否允许对话框呈现动画摆动
closeOnBodyClick: false, //点击对话框之外的地方自动关闭
buttons : [], //对话框中包含的按钮
events : {} //事件集合，可选项有：show / close / hide / resize / enterKey / escKey
};
mark：上面的配置项中，除了anchor、buttons以及events之外，其余都是简单数据类型，下面会对这些配置项进行单独说明
三、配置项说明
1、buttons配置项说明
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 完整配置项：Arrayvar buttons = [ { // 按钮1 text : ‘确定‘, // 按钮上要显示的文字（建议字数不要超过4） type : ‘normal‘, // 按钮类型，可选：highlight，normal handler : function(button,dialog){ // 按钮的点击处理事件 // 两个参数说明：button表示当前按钮的jQuery对象 // dialog表示当前对话框对象 } }, ... // 可以配置多个按钮]; |
2、events配置项说明
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
// 完整配置项：JSON（支持的事件都是可选项）var events = { /** * 对话框显示的时候，触发此事件 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ show : function(evt){ }, /** * 对话框隐藏的时候，触发此事件 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ hide : function(evt){ }, /** * 对话框关闭的时候，触发此事件，此事件不会和hide同时触发 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ close : function(evt){ }, /** * window.resize时候，触发此事件 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ resize : function(evt){ }, /** * 窗口处于显示状态，且按下Enter键时候，触发此事件 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ enterKey : function(evt){ }, /** * 窗口处于显示状态，且按下ESC键时候，触发此事件 * @param {jQueryEvent} evt jQuery封装过的event对象，可通过evt.data.dialog取到当前对话框实例 */ escKey : function(evt){ }}; |
jDialog.alert(content [,button][,options])
一、接口功能
最普通最常用的alert对话框，默认携带一个确认按钮
二、参数说明
/**
* 普通alert框
* @param {String} content 提示框的内容，可以是任意html代码片段
*
* @param {Object} button 确定按钮，最多只有一个按钮
* @p-config {String} text 按钮文字，默认：确定
* @p-config {String} type 按钮类型，默认：normal，可选：highlight（高亮）
* @p-config {String} handler 按钮点击后的执行动作，默认：关闭当前对话框
*
* @param {Object} options dialog的其他配置项
*
* @return {Object} 当前dialog对象
*/
mark：具体button以及options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、只设置content参数
|
1
2
|
// 只设置第一个参数：contentvar dialog = jDialog.alert(‘欢迎使用jDialog组件，我是alert！‘); |
2、修改默认按钮，可设置第二个参数
|
1
2
3
4
5
6
7
8
9
10
11
|
// 修改按钮var dialog = jDialog.alert(‘欢迎使用jDialog组件，我是alert！‘,{ type : ‘highlight‘, text : ‘谢谢!‘, handler : function(button,dialog) { // TODO ... }});// 如上关于第二个参数（button）的配置，其实每一项都是可选的，如果只需要修改按钮的文字，可以只传入：// { text : ‘谢谢!‘ } |
3、除了按钮外，还可以额外设定dialog的其他参数
|
1
2
3
4
5
6
7
|
// 通过options参数，控制alert对话框var dialog = jDialog.alert(‘欢迎使用jDialog组件，我是alert！‘,{},{ autoClose : 3000, // 3s后自动关闭 showShadow: false // 不显示对话框阴影});// 在options参数中，还可以配置其他所有的参数项 |
jDialog.confirm(content [,acceptButton][,cancelButton][,options])
一、接口功能
确认对话框，默认带有两个按钮，分别为：确认、取消
二、参数说明
/**
* 确认对话框
* @param {String} content 提示框的内容，可以是任意HTML代码片段
*
* @param {Object} acceptButton 确认按钮
* @p-config {String} text 按钮文字，默认：确定
* @p-config {String} type 按钮类型，默认：normal，可选：highlight（高亮）
* @p-config {String} handler 按钮点击后的执行动作，默认：关闭当前对话框
*
* @param {Object} cancelButton 取消按钮
* @p-config {String} text 按钮文字，默认：取消
* @p-config {String} type 按钮类型，默认：normal，可选：highlight（高亮）
* @p-config {String} handler 按钮点击后的执行动作，默认：关闭当前对话框
*
* @param {Object} options dialog的其他配置项
*
* @return {Object} 当前dialog对象
*/
mark：具体button以及options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、只设置content参数
|
1
2
|
// 只设置第一个参数：contentvar dialog = jDialog.confirm(‘欢迎使用jDialog组件，我是confirm！‘); |
2、修改或设置按钮的点击事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 修改按钮var dialog = jDialog.confirm(‘欢迎使用jDialog组件，我是confirm！‘,{ type : ‘highlight‘, text : ‘知道了!‘, handler : function(button,dialog) { alert(‘感谢！‘); dialog.close(); }},{ type : ‘normal‘, text : ‘以后用!‘, handler : function(button,dialog) { // TODO ... }}); |
3、除了按钮外，还可以额外设定dialog的其他参数
|
1
2
3
4
5
6
7
8
9
10
11
|
// 通过options参数，控制confirmvar dialog = jDialog.confirm(‘欢迎使用jDialog组件，我是confirm！‘,{ handler : function(button,dialog) { alert(‘感谢！‘); dialog.close(); }},{},{ title : ‘温馨提示‘});// 在options参数中，还可以配置其他所有的参数项 |
jDialog.message(content [,options])
一、接口功能
一个默认无标题无按钮的对话框
二、参数说明
/**
* 普通消息框，无title
* @param {String} content 消息的内容，可以是任意HTML代码片段
*
* @param {Object} options dialog的其他配置项
*
* @return {Object} 当前dialog对象
*/
mark：具体options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、只设置content参数
|
1
2
|
// 只设置第一个参数：contentvar dialog = jDialog.message(‘欢迎使用jDialog组件，我是message！‘); |
2、额外设定dialog的其他参数
|
1
2
3
4
5
6
7
8
|
// 通过options参数，控制message对话框var dialog = jDialog.message(‘欢迎使用jDialog组件，我是message！‘,{ autoClose : 3000, // 3s后自动关闭 padding : ‘30px‘, // 设置内部padding modal: false // 非模态，即不显示遮罩层});// 在options参数中，还可以配置其他所有的参数项 |
jDialog.tip(content [,anchor] [,options])
一、接口功能
一个带有小三角箭头的tip消息框，无title，非模态
二、参数说明
/**
* 一个带有小三角箭头的tip消息框，无title，非模态
*
* @param {String} content 消息的内容，可以是任意HTML代码片段
*
* @param {Object} anchor 小三角箭头的相关配置
*
* @p-config {jQ-Elm} target 小箭头需要指向的HTML节点，且用jQuery封装的对象
* @p-config {String} position tip消息框出现的位置（相对于target），可选：
* top / top-left / top-right
* right / right-top / right-bottom
* bottom / bottom-left / bottom-right
* left / left-top / left-bottom
* @p-config {Object} offset 消息框与target之间的位置偏移
* @p-c-item {Integer} top dialog与target之间顶部偏移，position中含top时生效
* @p-c-item {Integer} right dialog与target之间右侧偏移，position中含right时生效
* @p-c-item {Integer} bottom dialog与target之间底部偏移，position中含bottom时生效
* @p-c-item {Integer} left dialog与target之间左侧偏移，position中含left时生效
* @p-config {Integer} trianglePosFromStart 小三角距离弹窗边缘的距离
*
* @param {Object} options dialog的其他配置项
*
* @return {Object} 当前dialog对象
*/
mark：具体options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、设置content和anchor参数
|
1
2
3
4
|
// 设置content和anchor参数var dialog = jDialog.tip(‘欢迎使用jDialog组件，我是tip！‘,{ target : $(‘button‘)}); |
2、通过anchor参数改变dialog的方向和位置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// demo1：dialog出现在target上方10px处，且小三角居中var dialog = jDialog.tip(‘欢迎使用jDialog组件，我是tip！‘,{ target : $(‘button‘), position : ‘top‘, offset : { top : 10 }});// demo2：dialog出现在target右侧，且上边缘对其、小三角居中var dialog = jDialog.tip(‘欢迎使用jDialog组件，我是tip！‘,{ target : $(‘button‘), position : ‘right-top‘});// demo3：dialog出现在target左侧，且上边缘对其、小三角距离上边缘20pxvar dialog = jDialog.tip(‘欢迎使用jDialog组件，我是tip！‘,{ target : $(‘button‘), position : ‘left-top‘, trianglePosFromStart : 20}); |
3、额外设定dialog的其他参数
|
1
2
3
4
5
6
7
8
|
// 通过options参数，控制tip对话框var dialog = jDialog.tip(‘欢迎使用jDialog组件，我是tip！‘,{ target : $(‘button‘)},{ autoClose : 1000});// 在options参数中，还可以配置其他所有的参数项 |
jDialog.iframe(url [,options])
一、接口功能
在对话框中显示一个iframe页面
二、参数说明
/**
* 在对话框中显示一个iframe页面
* @param {String} url 消息的内容
*
* @param {Object} options dialog的其他配置项
*
* @return {Object} 当前dialog对象
*/
mark：具体options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、只设置url参数
|
1
2
|
// 只设置第一个参数：url |
2、额外设定dialog的其他参数
|
1
2
3
4
5
6
7
8
|
// 通过options参数，控制iframe对话框 title : ‘百度一下，你就知道‘, width : 800, height : 500});// 在options参数中，还可以配置其他所有的参数项 |
jDialog.dialog(options)
一、接口功能
自定义对话框，最通用最基础的一个API接口
二、参数说明
/**
* 自定义对话框，最通用最基础的一个API接口
* @param {Object} options dialog的其他配置项
* @return {Object} 当前dialog对象
*/
mark：具体options的配置方法，可参考 jDialog options 中的详细说明。
三、示例
1、通过options参数直接自定义dialog
|
1
2
3
4
5
6
7
|
// 通过options参数，控制dialogvar dialog = jDialog.dialog({ title : ‘自定义对话框‘, content : ‘大家好，我是jDialog.dialog，接口很友好的，欢迎使用！‘});// 在options参数中，还可以配置其他所有的参数项 |
2、给对话框配置两个按钮
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// 通过options参数，控制dialogvar dialog = jDialog.dialog({ title : ‘自定义对话框‘, content : ‘大家好，我是jDialog.dialog！‘, buttons : [ { type : ‘highlight‘, handler : function(button,dialog){ dialog.close(); } } ]});// 在options参数中，还可以配置其他所有的参数项 |
3、给对话框增加事件监听
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 通过options参数，控制dialogvar dialog = jDialog.dialog({ title : ‘自定义对话框‘, content : ‘大家好，我是jDialog.dialog！‘, buttons : [ { type : ‘highlight‘, handler : function(button,dialog){ dialog.hide(); } } ], events : { show : function(evt){ alert(‘show: ‘ + evt.data.dialog.content()); }, hide : function(evt){ alert(‘hide‘); }, close : function(evt){ alert(‘close‘); }, resize : function(evt){ alert(‘resize‘); } }});// 在options参数中，还可以配置其他所有的参数项 |
【实例方法】dialog.title(title)
一、接口功能
设置或获取对话框的标题
二、参数说明
/**
* 设置 / 获取 窗口标题
* @param {String} title 需要设置的标题；不设置参数时，表示获取窗口标题
* @return {Object/String} 设置标题时，返回窗口对象；获取窗口标题时，返回标题
*/
三、示例
1、设置窗口标题
|
1
2
|
// 设置标题，方法返回dialog对象本身dialog = dialog.title(‘我是新的标题‘); |
2、获取标题
|
1
2
|
// 获取标题var title = dialog.title(); |
【实例方法】dialog.content(content)
一、接口功能
设置或获取对话框的内容
二、参数说明
/**
* 设置 / 获取 窗口内容
* @param {String} html 需要设置的内容；不设置参数时，表示获取窗口内容
* @return {Object/String} 设置内容时，返回窗口对象；获取窗口内容时，返回内容
*/
三、示例
1、设置窗口内容
|
1
2
|
// 设置内容，方法返回dialog对象本身dialog = dialog.content(‘我是新的内容‘); |
2、获取内容
|
1
2
|
// 获取内容var content = dialog.content(); |
【实例方法】dialog.width(width)
一、接口功能
设置或获取对话框的宽度
二、参数说明
/**
* 设置 / 获取 窗口宽度
* @param {String} width 需要设置的宽度；不设置参数时，表示获取窗口宽度
* @return {Object/Integer} 设置宽度时，返回窗口对象；获取窗口宽度时，返回宽度
*/
三、示例
1、设置窗口宽度
|
1
2
|
// 设置宽度，方法返回dialog对象本身dialog = dialog.width(300); |
2、获取宽度
|
1
2
|
// 获取宽度var width = dialog.width(); |
【实例方法】dialog.height(height)
一、接口功能
设置或获取对话框的高度
二、参数说明
/**
* 设置 / 获取 窗口高度
* @param {String} height 需要设置的高度；不设置参数时，表示获取窗口高度
* @return {Object/Integer} 设置高度时，返回窗口对象；获取窗口高度时，返回高度
*/
三、示例
1、设置窗口高度
|
1
2
|
// 设置高度，方法返回dialog对象本身dialog = dialog.height(300); |
2、获取高度
|
1
2
|
// 获取高度var height = dialog.height(); |
【实例方法】dialog.position(position)
一、接口功能
设置或获取对话框的位置
二、参数说明
/**
* 设置/获取 对话框的位置
* @param {Object} pos 需要设置的位置；不设置参数时，表示获取窗口位置
* @p-config {Integer} left 窗口位置left坐标
* @p-config {Integer} top 窗口位置top坐标
* @return {Object} 设置位置时，返回窗口对象；获取窗口位置时，返回位置
*/
三、示例
1、设置窗口位置
|
1
2
3
4
5
|
// 设置位置，方法返回dialog对象本身dialog = dialog.position({ top : 100, left : 200}); |
2、获取位置
|
1
2
|
// 获取位置var position = dialog.position(); |
【实例方法】dialog.middle()
一、接口功能
设置窗口在当前浏览器窗口中垂直水平居中
二、参数说明
/**
* 设置窗口在浏览器中垂直水平居中对其
* @return {Object} 当前窗口对象
*/
三、示例
1、设置窗口居中对其
|
1
2
|
// 设置窗口对其，方法返回dialog对象本身dialog = dialog.middle(); |
【实例方法】dialog.buttons(buttons)
一、接口功能
设置或获取对话框的按钮
二、参数说明
/**
* 自定义对话框
* @param buttons 对话框按钮
* [{
* type : ‘normal‘, // normal 或者 highlight
* text : ‘确定‘, // 按钮的显示文本
* handler : function(button,dialog){ // 按钮点击事件
* // TODO ...
* }
* }]
* @return {Object} 设置按钮时，返回窗口对象；获取窗口按钮时，返回按钮
*/
mark：另外，要获取窗口按钮，也可以通过属性获取：dialog.dom.buttons
三、示例
1、设置窗口按钮
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 设置按钮，方法返回dialog对象本身dialog = dialog.buttons([{ type : ‘highlight‘, text : ‘好的‘, handler : function(buttn,dlg){ // TODO... }},{ text : ‘不了‘, handler : function(buttn,dlg){ // TODO... }}]); |
2、获取按钮
|
1
2
|
// 获取按钮var buttons = dialog.buttons(); |
【实例方法】dialog.show()
一、接口功能
显示自定义对话框
二、参数说明
/**
* 显示对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、显示对话框
|
1
2
|
// 显示对话框，方法返回dialog对象本身dialog = dialog.show(); |
【实例方法】dialog.hide()
一、接口功能
隐藏自定义对话框
二、参数说明
/**
* 隐藏对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、隐藏对话框
|
1
2
|
// 隐藏对话框，方法返回dialog对象本身dialog = dialog.hide(); |
【实例方法】dialog.close()
一、接口功能
关闭自定义对话框
二、参数说明
/**
* 关闭对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、关闭对话框
|
1
2
|
// 关闭对话框，方法返回dialog对象本身dialog = dialog.close(); |
以上是关于自定义对话框（jDialog）的主要内容，如果未能解决你的问题，请参考以下文章