只要是好东西，都应该主动分享出来，让大家都用起来；鼓励开源，大家一起，为积累更多更好的东西而奋斗！
自定义对话框（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配置项说明
// 完整配置项：Array
var buttons = [
{ // 按钮1
text : '确定', // 按钮上要显示的文字（建议字数不要超过4）
type : 'normal', // 按钮类型，可选：highlight，normal
handler : function(button,dialog){ // 按钮的点击处理事件
// 两个参数说明：button表示当前按钮的jQuery对象
// dialog表示当前对话框对象
}
},
... // 可以配置多个按钮
];
2、events配置项说明
// 完整配置项：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参数
// 只设置第一个参数：content
var dialog = jDialog.alert('欢迎使用jDialog组件，我是alert！');
2、修改默认按钮，可设置第二个参数
// 修改按钮
var dialog = jDialog.alert('欢迎使用jDialog组件，我是alert！',{
type : 'highlight',
text : '谢谢!',
handler : function(button,dialog) {
// TODO ...
}
});
// 如上关于第二个参数（button）的配置，其实每一项都是可选的，如果只需要修改按钮的文字，可以只传入：
// { text : '谢谢!' }
3、除了按钮外，还可以额外设定dialog的其他参数
// 通过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参数
// 只设置第一个参数：content
var dialog = jDialog.confirm('欢迎使用jDialog组件，我是confirm！');
2、修改或设置按钮的点击事件
// 修改按钮
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的其他参数
// 通过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参数
// 只设置第一个参数：content
var dialog = jDialog.message('欢迎使用jDialog组件，我是message！');
2、额外设定dialog的其他参数
// 通过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参数
// 设置content和anchor参数
var dialog = jDialog.tip('欢迎使用jDialog组件，我是tip！',{
target : $('button')
});
2、通过anchor参数改变dialog的方向和位置
// 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
});
mark：可以通过offset配置项调整tip与target之间的偏移，position总共12中选择3、额外设定dialog的其他参数
// 通过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参数
// 只设置第一个参数：url
var dialog = jDialog.iframe('http://www.baidu.com');
2、额外设定dialog的其他参数
// 通过options参数，控制iframe对话框
var dialog = jDialog.iframe('http://www.baidu.com',{
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
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : '自定义对话框',
content : '大家好，我是jDialog.dialog，接口很友好的，欢迎使用！'
});
// 在options参数中，还可以配置其他所有的参数项
2、给对话框配置两个按钮
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : '自定义对话框',
content : '大家好，我是jDialog.dialog！',
buttons : [
{
type : 'highlight',
handler : function(button,dialog){
dialog.close();
}
}
]
});
// 在options参数中，还可以配置其他所有的参数项
3、给对话框增加事件监听
// 通过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、设置窗口标题
// 设置标题，方法返回dialog对象本身
dialog = dialog.title('我是新的标题');
2、获取标题
// 获取标题
var title = dialog.title();
【实例方法】dialog.content(content)点击展开
一、接口功能
设置或获取对话框的内容
二、参数说明
/**
* 设置 / 获取 窗口内容
* @param {String} html 需要设置的内容；不设置参数时，表示获取窗口内容
* @return {Object/String} 设置内容时，返回窗口对象；获取窗口内容时，返回内容
*/
三、示例
1、设置窗口内容
// 设置内容，方法返回dialog对象本身
dialog = dialog.content('我是新的内容');
2、获取内容
// 获取内容
var content = dialog.content();
【实例方法】dialog.width(width)点击展开
一、接口功能
设置或获取对话框的宽度
二、参数说明
/**
* 设置 / 获取 窗口宽度
* @param {String} width 需要设置的宽度；不设置参数时，表示获取窗口宽度
* @return {Object/Integer} 设置宽度时，返回窗口对象；获取窗口宽度时，返回宽度
*/
三、示例
1、设置窗口宽度
// 设置宽度，方法返回dialog对象本身
dialog = dialog.width(300);
2、获取宽度
// 获取宽度
var width = dialog.width();
【实例方法】dialog.height(height)点击展开
一、接口功能
设置或获取对话框的高度
二、参数说明
/**
* 设置 / 获取 窗口高度
* @param {String} height 需要设置的高度；不设置参数时，表示获取窗口高度
* @return {Object/Integer} 设置高度时，返回窗口对象；获取窗口高度时，返回高度
*/
三、示例
1、设置窗口高度
// 设置高度，方法返回dialog对象本身
dialog = dialog.height(300);
2、获取高度
// 获取高度
var height = dialog.height();
【实例方法】dialog.position(position)点击展开
一、接口功能
设置或获取对话框的位置
二、参数说明
/**
* 设置/获取 对话框的位置
* @param {Object} pos 需要设置的位置；不设置参数时，表示获取窗口位置
* @p-config {Integer} left 窗口位置left坐标
* @p-config {Integer} top 窗口位置top坐标
* @return {Object} 设置位置时，返回窗口对象；获取窗口位置时，返回位置
*/
三、示例
1、设置窗口位置
// 设置位置，方法返回dialog对象本身
dialog = dialog.position({
top : 100,
left : 200
});
2、获取位置
// 获取位置
var position = dialog.position();
【实例方法】dialog.middle()点击展开
一、接口功能
设置窗口在当前浏览器窗口中垂直水平居中
二、参数说明
/**
* 设置窗口在浏览器中垂直水平居中对其
* @return {Object} 当前窗口对象
*/
三、示例
1、设置窗口居中对其
// 设置窗口对其，方法返回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、设置窗口按钮
// 设置按钮，方法返回dialog对象本身
dialog = dialog.buttons([{
type : 'highlight',
text : '好的',
handler : function(buttn,dlg){
// TODO...
}
},{
text : '不了',
handler : function(buttn,dlg){
// TODO...
}
}]);
2、获取按钮
// 获取按钮
var buttons = dialog.buttons();
【实例方法】dialog.show()点击展开
一、接口功能
显示自定义对话框
二、参数说明
/**
* 显示对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、显示对话框
// 显示对话框，方法返回dialog对象本身
dialog = dialog.show();
【实例方法】dialog.hide()点击展开
一、接口功能
隐藏自定义对话框
二、参数说明
/**
* 隐藏对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、隐藏对话框
// 隐藏对话框，方法返回dialog对象本身
dialog = dialog.hide();
【实例方法】dialog.close()点击展开
一、接口功能
关闭自定义对话框
二、参数说明
/**
* 关闭对话框
* @return {Object} 返回当前窗口对象
*/
三、示例
1、关闭对话框
// 关闭对话框，方法返回dialog对象本身
dialog = dialog.close();