$.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();事先載入好，因為本頁主要只列對話方塊的用法。頁面比較複雜的時候可以使用動態載入技術。

外掛方法列表
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物件

$.ligerDialog彈出對話方塊

相關推薦