【配置项】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
|
// 完整配置项：Array
var
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
|
// 只设置第一个参数：content
var
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
|
// 只设置第一个参数：content
var
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参数，控制confirm
var
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
|
// 只设置第一个参数：content
var
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左侧，且上边缘对其、小三角距离上边缘20px
var
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参数，控制dialog
var
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参数，控制dialog
var
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参数，控制dialog
var
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();
|
2458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
