【配置項】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();
|