$.ligerDialog弹出对话框

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();事先加载好，因为本页主要只列对话框的用法。页面比较复杂的时候可以使用动态加载技术。

扫描二维码关注公众号，回复： 4100175 查看本文章

插件方法列表

alert(content, title, type, callback(不必填)) 显示提示弹出框

waitting(content, delayMillions(可不填)) 关闭对话框

confirm(title, content, callback) 确定框

confirmDelete(p) 确定框

error(title, content, callback) 显示失败弹出框

open(p) 弹窗打开方法，核心方法，弹窗所有方法都需要调用这个方法

prompt(title, value, multi, callback) 输入框

question(title, content, callback) 显示问题弹出框

success(title, content, callback) 显示成功弹出框

warn(title, content, callback) 显示警告弹出框

ajaxFormSubmit(p) ajax表单提交

postComment(contentId, parentElement, url, data) 留言评论

插件方法详细

{jQuery} Alert(content, title, type, callback(不必填))

• 显示提示弹出框,

描述:

例子:

1.简单对话框查看代码打印?

1.$.ligerDialog.alert('内容');

运行

2.带图标的对话框查看代码打印?

1.$.ligerDialog.alert('成功！','提示','success');

运行

3.带回调对话框查看代码打印?

1.$.ligerDialog.alert('成功！','提示','success',function(){alert('成功！');});

运行

参数名	类型	描述	默认值
content	{String}	内容
title	{String}	标题(不必填,第二个参数，可替换为callback)
type	{String}	类型 (不必填,第三个参数，可替换为callback)	默认为'none'，主要有'success','warn','error','question'
callback(不必填)	{Function}	点击确定事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} Waitting(content, delayMillions)

• 关闭对话框

描述:

例子:

1.倒计时弹出框(默认等待时间2秒)查看代码打印?

1.$.ligerDialog.waitting('马上关闭');

运行

2.倒计时弹出框(自定义等待时间)查看代码打印?

1.$.ligerDialog.waitting('3秒后关闭',3000);

运行

参数名	类型	描述	默认值
content	{String}	提示内容
delayMilliions	{Integer}	倒计时时间(毫秒)	默认2000

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} confirm(title, content, callback, type)

• 确定框

描述:

例子:

1.基本确认对话框查看代码打印?

1.$.ligerDialog.confirm('确定？',function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.});

运行

2.可以隐藏图标的确认对话框查看代码打印?

1.$.ligerDialog.confirm('确定？','提示',function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.},'none');

运行

3.带html的内容提示查看代码打印?

1.$.ligerDialog.confirm("<span style="color: red;">确定？</span>",function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.});

运行

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容 (不必填,第二个参数，可替换为callback)
callback	{Function}	点击确定事件 参数1：是否点击了确定
type	{String}	图标类型,主要用于提示内容是html的情况，填'none'可以隐藏图标	用此参数时，方法第二个参数必填且不能作为function

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} confirmDelete(p)

• 确定框删除框

描述:

例子:

1.默认删除一个li标签查看代码打印?

1.$.ligerDialog.confirmDelete({elObj:$('#news1')});

• 默认参数，必须传需要remove的元素dom 

2.可自定义标题内容查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news2'),

3.    title:'自定义标题',

4.    content:'确定？'

5.});

• 可自定义标题内容 

3.消失背景色，边框粗细、样式、颜色自定义查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news3'),

3.    disBackColor:'pink',//淡出效果提示容器背景色

4.    borderWidth:5,      //边框

5.    borderStyle:'solid',//边框样式

6.    borderColor:'blue'  //边框颜色

7.});

• 操作成功！

4.删除后以提示框展示查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news4'),

3.    showAlert:true     //删除后是否弹出提示

4.});

• 删完我弹出提示框，没有淡出效果 

5.自定义提示框消失时间查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news5'),

3.    content:'删完我0.2秒消失',

4.    delayMillions:200        //指定消失时间

5.});

• 自定义淡出效果消失时间 

6.自定义提示内容查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news6'),

3.    tips:'<span style="color: blue;">呵呵</span>'

4.});

• 指定淡出效果提示文字，可以是html代码 

7.指定提示内容为url展示查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news7'),

3.    contentUrl:'http://www.baidu.com',

4.    width:800,

5.    height:600,

6.    showIconType:'none'

7.});

• 指定提示内容为url展示 

参数名	类型	描述	默认值
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}	点击确定事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{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}	显示完数据事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{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}	点击确定事件 参数1：yes 是否点击了是 参数2：value 文本框输入的值

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} Question(title, content, callback)

• 显示问题弹出框，类似alert(content,title,'question');

描述:

查看代码

打印?

1.$.ligerDialog.question('内容');

运行

例子:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容 (不必填,第二个参数，可替换为callback)
callback	{Function}	点击确定事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} Success(title, content, callback)

• 显示成功弹出框，类似alert(content,title,'success');

描述:

查看代码

打印?

1.$.ligerDialog.success('内容');

运行

例子:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容 (不必填,第二个参数，可替换为callback)
callback	{Function}	点击确定事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{jQuery} jQuery对象

---

{jQuery} Warn(title, content, callback)

• 显示警告弹出框

描述:

查看代码

打印?

1.$.ligerDialog.warn('内容');

运行

例子:

参数名	类型	描述	默认值
title	{String}	标题
content	{String}	内容 (不必填,第二个参数，可替换为callback)
callback	{Function}	点击确定事件 参数1：button 参数2：dialog Dom object 参数3：button index

参数列表:

返回值:

{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对象