接口
配置參數
- content: {消息內容,支持HTML}
- title: {標題.默認:'提示'}
- lock: {是否鎖定屏幕. 默認:false}
- width: {寬度,支持em等單位. 默認:'auto'}
- height: {高度,支持em等單位. 默認:'auto'}
- url: {iframe地址,存在content參數時候,此參數無效}
- x: {x坐標,可以使用關鍵字,如:left/right/center. 默認:'center'}
- y: {y坐標,可以使用關鍵字,如:top/bottom/center. 默認:'center'(並非絕對垂直居中，而是使用的黃金比例)}
- fixed: {是否啟用靜止定位. 默認:false}
- time: {多少秒自動關閉}
- style: {對話框風格擴展參數,寫入自定義className,詳情見皮膚css文件的定義,多個用空格隔開}
- yesText: {確定按鈕文本. 默認:'確定'}
- noText: {取消按鈕文本. 默認:'取消'}
- yesClose: {點擊確定按鈕是否同時關閉對話框. 默認:true}
- id: {給對話框定義id,對話框未關閉就不再會有同名對話框彈出. 例如定義id為'my2'，則內容容器id為'my2Content'}
形式
artDialog({ 配置參數 }, function(){ 確定按鈕回調函數 }, function(){ 取消按鈕回調函數 }, function(){ 對話框關閉回調函數 }) 如:
artDialog( { content:'歡迎你來到對話框世界！', lock:true, style:'succeed noClose' }, function(){ alert('你點了確定'); }, function(){ alert('你點了取消'); } );
彈出頁面事例
$.dialog.open('export/packingInfo/list?id=' + id, {
esc : false,
lock : true,
title : 'Carton List - Edit',
width : '900px',
height : '500px',
close : function() {
window.location.reload();
}
});
在頁面head設置默認配置
// 設置對話框全局默認配置 (function(){ var d = art.dialog.defaults; // 按需加載要用到的皮膚，數組第一個為默認皮膚 // 如果只使用默認皮膚，可以不填寫skin d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖動 d.drag = true; // 超過此面積大小的對話框使用替身拖動 d.showTemp = 100000; })();
在js函數里面使用
function test(){ art.dialog({ lock: true, content: '中斷用戶在對話框以外的交互，展示重要操作與消息', yesFn: function(){ art.dialog({content: '再來一個鎖屏', lock: true}); return false; }, noFn: true }
API 文檔
|
名稱
|
類型
|
默認值
|
描述
|
|
內容
|
|||
|
title
|
字符串
|
'提示'
|
標題內容。為false不顯示標題欄（需要皮膚文件支持）
|
|
布爾
|
|||
|
content
|
字符串
|
null
|
消息內容，如果傳入的是一個JSON，還需要與tmpl參數配合解析模板
|
|
對象
|
|||
|
按鈕
|
|||
|
yesFn
|
函數
|
null
|
確定按鈕回調函數。
函數如果返回false將阻止對話框關閉；函數this指針指向內部api；如果傳入true表示只顯示有關閉功能的按鈕；傳入的第一個參數為對話框所在頁面window對象（這個在穿越框架后有用）
|
|
布爾
|
|||
|
noFn
|
函數
|
null
|
取消按鈕回調函數。
函數如果返回false將阻止對話框關閉；函數this指針指向內部api；如果傳入true表示只顯示有關閉功能的按鈕；傳入的第一個參數為對話框所在頁面window對象（這個在穿越框架后有用）
|
|
布爾
|
|||
|
yesText
|
字符串
|
'確定'
|
"確定按鈕"文字
|
|
noText
|
字符串
|
'取消'
|
"取消按鈕"文字
|
|
尺寸
|
|||
|
width
|
數值
|
'auto'
|
設置內容固定寬度，可以指定單位。沒有則對話框自動適配
|
|
字符串
|
|||
|
height
|
數值
|
'auto'
|
設置內容固定高度，可以指定單位。沒有則對話框自動適配
|
|
字符串
|
|||
|
位置
|
|||
|
fixed
|
布爾
|
false
|
開啟靜止定位
|
|
follow
|
元素
|
null
|
讓對話框依附在指定元素附近。如果是字符串則表示使用ID獲取元素
|
|
字符串
|
|||
|
left
|
數值
|
'center'
|
X軸的坐標。如果開啟了fixed則原點以瀏覽器視口為基准。可以使用'left'、'center'、'right'這些關鍵字
|
|
字符串
|
|||
|
top
|
數值
|
'center'
|
Y軸的坐標。如果開啟了fixed則原點以瀏覽器視口為基准。可以使用'top'、'center'、'bottom'這些關鍵字
|
|
字符串
|
|||
|
界面
|
|||
|
lock
|
布爾
|
false
|
開啟鎖屏。中斷用戶對話框之外的交互，用於顯示非常重要的操作/消息
|
|
skin
|
字符串
|
'default'
|
自定義風格
|
|
border
|
布爾
|
true
|
是否顯示邊框。（需要皮膚文件支持）
|
|
icon
|
字符串
|
null
|
定義消息圖標。（需要皮膚文件支持）
|
|
高級
|
|||
|
id
|
字符串
|
自定義對話框ID屬性。用途：1、防止重復彈出 2、返回已存在ID對話框的API接口
|
|
|
time
|
數值
|
null
|
設置對話框顯示時間。以秒為單位
|
|
drag
|
布爾
|
true
|
是否允許用戶拖動對話框
|
|
limit
|
布爾
|
true
|
是否限制挪動與定位范圍
|
|
focus
|
布爾
|
true
|
定位焦點到對話框中指定元素，默認定位到按鈕上。如果傳入字符串則使用ID獲取元素
|
|
字符串
|
|||
|
元素
|
|||
|
effect
|
布爾
|
true
|
是否開啟動畫特效
|
|
show
|
布爾
|
true
|
是否顯示。為false表示不顯示對話框，后面可以通過控制接口show()恢復顯示
|
|
tmpl
|
字符串
|
null
|
啟用模板引擎拼接消息內容，還需要與content參數傳入JSON才能生效
|
|
esc
|
布爾
|
true
|
是否允許Esc鍵關閉對話框
|
|
window
|
字符串
|
'self'
|
指定窗口彈出對話框，可使用'top'、'parent'、'self'等關鍵字或者指定其他window對象。如果是'top'則表示讓對話框在頂級頁面彈出
|
|
對象
|
|||
|
initFn
|
函數
|
null
|
對話框彈出后執行的函數
|
|
closeFn
|
函數
|
null
|
對話框關閉前執行的函數
|
控制接口
|
名稱
|
返回值
|
描述
|
|
close()
|
null
|
關閉對話框
|
|
show()
|
{Object}
|
顯示對話框
|
|
hide()
|
{Object}
|
隱藏對話框
|
|
content()
|
{HTMLElement}
|
獲取消息內容容器對象
|
|
content(value)
|
{Object}
|
向消息容器中寫入內容(innerHTML)
|
|
follow(element)
|
{Object}
|
讓對話框吸附到指定元素附近。（可傳入對象的ID名稱）
|
|
position(left, top)
|
{Object}
|
重新定位對話框。無參數則居中定位
|
|
size(width, height)
|
{Object}
|
重新設定對話框大小。注意此時參數類型必須為數值
|
|
focus(element)
|
{Object}
|
定位焦點
|
自帶的擴展方法
|
名稱
|
描述
|
|
art.dialog.alert(content)
|
警告
|
|
art.dialog.confirm(content, yesFn, noFn)
|
確認
|
|
art.dialog.prompt(content, yesFn, value)
|
提問
|
|
art.dialog.open(url, options)
|
彈窗（iframe）
|
|
art.dialog.close()
|
open方法創建的iframe里可用此關閉對話框
|
|
art.dialog.parent
|
open方法創建的iframe里可用此獲取來源窗口的window對象
|
|
art.dialog.tips(content, time)
|
短暫提示
|
|
art.dialog.load(url, options, cache)
|
Ajax加載內容
|