http://tw.kmust.edu.cn/js/plugins/dialog/index.html
对话框使用时可以使用动态加载,比如,下面显示一个弹框可以这样写:展开代码查看代码
1.
//使用using函数动态加载需要的模块、js、css文件
2.
using([
'dialog'
,
'/js/drag.js'
],
function
(){
3.
$.ligerDialog.success(
'内容'
);
4.
});
运行
这样就可以在使用的时候去动态加载所需的js组件或css文件。为了简便起见,下面的例子就不用动态加载了,直接在$(document).ready();事先加载好,因为本页主要只列对话框的用法。页面比较复杂的时候可以使用动态加载技术。
alert(content, title, type, callback(不必填))
|
waitting(content, delayMillions(可不填))
|
confirm(title, content, callback)
|
|
error(title, content, callback)
|
open(p)
|
prompt(title, value, multi, callback)
|
question(title, content, callback)
|
success(title, content, callback)
|
warn(title, content, callback)
|
|
postComment(contentId, parentElement, url, data)
|
插件方法详细
{jQuery} Alert(content, title, type, callback(不必填))
- 显示提示弹出框,
描述:
例子:
1.
$.ligerDialog.alert(
'内容'
);
1.
$.ligerDialog.alert(
'成功!'
,
'提示'
,
'success'
);
1.
$.ligerDialog.alert(
'成功!'
,
'提示'
,
'success'
,
function
(){alert(
'成功!'
);});
运行
参数名 | 类型 | 描述 | 默认值 |
content | {String} | 内容 | |
title | {String} | 标题(不必填,第二个参数,可替换为callback) | |
type | {String} | 类型 (不必填,第三个参数,可替换为callback) | 默认为'none',主要有'success','warn','error','question' |
callback(不必填) | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} Waitting(content, delayMillions)
- 关闭对话框
描述:
例子:
1.
$.ligerDialog.waitting(
'马上关闭'
);
1.
$.ligerDialog.waitting(
'3秒后关闭'
,3000);
运行
参数名 | 类型 | 描述 | 默认值 |
content | {String} | 提示内容 | |
delayMilliions | {Integer} | 倒计时时间(毫秒) | 默认2000 |
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} confirm(title, content, callback, type)
- 确定框
描述:
例子:
1.
$.ligerDialog.confirm(
'确定?'
,
function
(r)
2.
{
3.
alert(r ?
'您点击了Y'
:
'您点击了N'
);
4.
});
1.
$.ligerDialog.confirm(
'确定?'
,
'提示'
,
function
(r)
2.
{
3.
alert(r ?
'您点击了Y'
:
'您点击了N'
);
4.
},
'none'
);
1.
$.ligerDialog.confirm(
"<span style="
color: red;
">确定?</span>"
,
function
(r)
2.
{
3.
alert(r ?
'您点击了Y'
:
'您点击了N'
);
4.
});
运行
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
content | {String} | 内容 (不必填,第二个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
| |
type | {String} | 图标类型,主要用于提示内容是html的情况,填'none'可以隐藏图标 | 用此参数时,方法第二个参数必填且不能作为function |
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} confirmDelete(p)
- 确定框删除框
描述:
例子:
1.
$.ligerDialog.confirmDelete({elObj:$(
'#news1'
)});
1.
dialog.confirmDelete({
2.
elObj:$(
'#news2'
),
3.
title:
'自定义标题'
,
4.
content:
'确定?'
5.
});
1.
dialog.confirmDelete({
2.
elObj:$(
'#news3'
),
3.
disBackColor:
'pink'
,
//淡出效果提示容器背景色
4.
borderWidth:5,
//边框
5.
borderStyle:
'solid'
,
//边框样式
6.
borderColor:
'blue'
//边框颜色
7.
});
-
操作成功!
1.
dialog.confirmDelete({
2.
elObj:$(
'#news4'
),
3.
showAlert:true
//删除后是否弹出提示
4.
});
1.
dialog.confirmDelete({
2.
elObj:$(
'#news5'
),
3.
content:
'删完我0.2秒消失'
,
4.
delayMillions:200
//指定消失时间
5.
});
1.
dialog.confirmDelete({
2.
elObj:$(
'#news6'
),
3.
tips:
'<span style="color: blue;">呵呵</span>'
4.
});
1.
dialog.confirmDelete({
2.
elObj:$(
'#news7'
),
3.
contentUrl:
'http://www.baidu.com'
,
4.
width:800,
5.
height:600,
6.
showIconType:
'none'
7.
});
参数名 | 类型 | 描述 | 默认值 |
p.title | {String} | 标题 | (可不填) |
p.content | {String} | 内容 | (可不填) |
p.elObj | {JQuery} | 必要参数,要remove的元素dom对象,最好通过$(el)包装成jQuery对象 | (必填参数)待讨论 |
p.showAlert | {Bool} | 是否用弹出框提示返回内容,true:弹出框提示,false:页面提示 | (可不填)默认false |
p.showIconType | {String} | 指定提示图标类型 | (可不填)默认为question |
p.disBackColor | {String} | 提示消失的背景色 | (可不填)默认#ffffd7 |
p.borderWidth | {Int} | 提示框边框宽度 | (可不填)默认1 |
p.borderStyle | {String} | 提示框边框样式 | (可不填)默认solid |
p.borderColor | {String} | 提示框边框颜色 | (可不填)默认#ccc |
p.delayMillions | {Int} | 提示消失时间 | (可不填)默认1秒 |
p.tips | {String} | 指定提示内容,可以html | (可不填) |
p.contentUrl | {String} | 指定提示内容URL | (可不填) |
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} ligerDialogError(title, content, callback)
- 显示失败弹出框,类似于alert(content,title,'error');
描述:
1.
$.ligerDialog.error(
'内容'
);
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
content | {String} | 内容 (不必填,第二个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} ligerDialogOpen(p)
- 弹窗打开方法,核心方法,弹窗所有方法都需要调用这个方法
描述:
1.
$.ligerDialog.open({
2.
width: 280,
3.
type:
'error'
,
4.
title:
'对话框弹出演示标题'
,
5.
content:
'对话框弹出演示'
,
6.
buttons: [{ text:
'确定'
, onclick:
function
(item, dialog){alert(
'确定'
);dialog.close();} }, { text:
'取消'
, onclick:
function
(item, dialog){dialog.close();}}]
7.
});
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
p | {Object} | 主要参数 | |
p.type | {String} | 类型,包括success、donne、ok、error、warn、question | "" |
p.cls | {String} | 给dialog附加css class | null |
p.id | {String} | 给dialog附加id | null |
p.isDrag | {Bool} | 是否拖动 | true |
p.isResize | {Bool} | 是否调整大小 | true |
p.allowClose | {Bool} | 是否允许关闭 | true |
p.width | {Int} | 宽度 | 280 |
p.height | {Int} | 高度,默认自适应 | null |
p.title | {String} | 标题 | |
p.target | {Object} | 目标对象,指定它将以appendTo()的方式载入 | null |
p.url | {String} | 目标页url,默认以iframe的方式载入 | null |
p.load | {Bool} | 是否以load()的方式加载目标页的内容 | false |
p.modal | {Bool} | 是否模态对话框 | true |
p.name | {String} | 创建iframe时 作为iframe的name和id | null |
p.content | {String} | 内容 | null |
p.closeWhenEnter | {String} | 按回车是否关闭对话框 | null |
p.buttons | {Array} | 按钮 | |
p.buttons[i].width | {Int} | 宽度 | |
p.buttons[i].text | {String} | 文本 | |
p.buttons[i].onclick | {Function} | 显示完数据事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} Prompt(title, value, multi, callback)
- 输入框
描述:
1.
$.ligerDialog.prompt(
'提示内容'
,
function
(yes, value)
2.
{
3.
if
(yes) alert(value);
4.
});
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
value | {String} | 初始化值(不必填,第二个参数,可替换为callback或multi) | |
multi | {String} | 是否多行文本框(不必填,第三个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} Question(title, content, callback)
- 显示问题弹出框,类似alert(content,title,'question');
描述:
1.
$.ligerDialog.question(
'内容'
);
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
content | {String} | 内容 (不必填,第二个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} Success(title, content, callback)
- 显示成功弹出框,类似alert(content,title,'success');
描述:
1.
$.ligerDialog.success(
'内容'
);
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
content | {String} | 内容 (不必填,第二个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} Warn(title, content, callback)
- 显示警告弹出框
描述:
1.
$.ligerDialog.warn(
'内容'
);
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
title | {String} | 标题 | |
content | {String} | 内容 (不必填,第二个参数,可替换为callback) | |
callback | {Function} | 点击确定事件
|
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} ajaxFormSubmit(p)
- ajax表单提交
描述:
01.
$.ligerDialog.ajaxFormSubmit({
02.
title:
'模拟表单'
,
03.
formUrl:
'/js/plugins/dialog/form1.jsp'
,
04.
formId:
'form1'
,
05.
width:400,
06.
height:250,
07.
isFormReset:
true
,
08.
submitUrl:
'/js/plugins/dialog/submit.jsp'
,
09.
redirectUrl:
'http://www.baidu.com'
,
/*重定向地址,如果指定了tab,则指定tab页面被重定向*/
10.
btnSure:
'提交'
,
11.
btnCancel:
'关闭'
,
12.
tabObj:top.tab
/*指定tab,tab为框架中定义的tab对象*/
13.
submitSuccessFunc:
function
(){
14.
alert(
'处理成功后执行自定义函数'
);
15.
}
16.
});
运行
例子:
参数名 | 类型 | 描述 | 默认值 |
p.title | {String} | 标题 | null |
p.formUrl | {String} | 表单地址 | |
p.width | {Int} | 宽 | 280 |
p.height | {Int} | 高 | null |
p.formId | {String} | 表单Id | null |
p.submitUrl | {String} | 表单提交地址 | null |
p.isResetForm | {Bool} | 是否表单重置 | false |
p.redirectUrl | {String} | 表单处理完重定向地址 | null |
p.btnSure | {String} | 确定按钮文字 | 确定 |
p.btnCancel | {String} | 取消按钮文字 | 取消 |
p.tabObj | {jQuery} | 指定tab对象 | null |
p.submitSuccessFunc | {Function} | 处理成功可以执行自定义函数,如果指定了自定义函数,则tabObj与redirectUrl参数将失效 | null |
参数列表:
返回值:
{jQuery} jQuery对象
{jQuery} postComment(p)
- 留言评论
描述:
1.
$.ligerDialog.postComment({
2.
contentId:
'p_comment'
,
3.
parentElement:
'comment'
,
4.
url:
'submit.jsp?loginName=zwzhao&password=wisedu'
,
5.
data:
'p_comment='
+$(
'#p_comment'
).val()
6.
});
- 以后要常来哦~~
- 踩踩~~
例子:
参数名 | 类型 | 描述 | 默认值 |
contentId | {String} | 文本框ID | null |
parentElement | {String} | 留言列表父容器id | null |
url | {String} | 提交地址 | null |
data | {String} | 额外提交数据 | null |
参数列表:
返回值:
{jQuery} jQuery对象