配置參數

名稱 類型 默認值 描述
內容
title String '消息' 標題內容
content String 'loading..' 消息內容。
1、如果傳入的是HTMLElement類型,如果是隱藏元素會給其設置display:block以顯示該元素,其他屬性與綁定的事件都會完整保留,對話框關閉后此元素又將恢復原來的display屬性,并且重新插入原文檔所在位置
2、如果沒有設定content的值則會有loading的動畫
HTMLElement
按鈕
ok Function null 確定按鈕回調函數。
函數如果返回false將阻止對話框關閉;函數this指針指向內部api;如果傳入true表示只顯示有關閉功能的按鈕
Boolean
cancel Function null 取消按鈕回調函數。
函數如果返回false將阻止對話框關閉;函數this指針指向內部api;如果傳入true表示只顯示有關閉功能的按鈕
對話框標題欄的關閉按鈕其實就是取消按鈕,只不過視覺不同罷了,點擊同樣觸發cancel事件
Boolean
okVal String '確定' "確定按鈕"文字
cancelVal String '取消' "取消按鈕"文字
button Array null 自定義按鈕。
配置參數成員:
name —— 按鈕名稱
callback —— 按下后執行的函數
focus —— 是否聚焦點
disabled —— 是否標記按鈕為不可用狀態(后續可使用擴展方法讓其恢復可用狀態)

示例:
參數如:[{name: '登錄', callback: function () {}}, {name: '取消'}] 。注意點擊按鈕默認會觸發按鈕關閉動作,需要阻止觸發關閉請讓回調函數返回false
尺寸
width Number 'auto' 設置消息內容寬度,可以帶單位。一般不需要設置此,對話框框架會自己適應內容。
如果設置為百分值單位,將會以根據瀏覽器可視范圍作為基準,此時如果瀏覽器窗口大小被改變其也會進行相應的調整
String
height Number 'auto' 設置消息內容高度,可以帶單位。不建議設置此,而應該讓內容自己撐開高度。
如果設置為百分值單位,將會以根據瀏覽器可視范圍作為基準,此時如果瀏覽器窗口大小被改變其也會進行相應的調整
String
位置
fixed Boolean false 開啟靜止定位。靜止定位是css2.1的一個屬性,它靜止在瀏覽器某個地方不動,也不受滾動條拖動影響。(artDialog支持IE6 fixed)
follow HTMLElement null 讓對話框依附在指定元素附近。
可傳入元素ID名稱,注意ID名稱需要以“#”號作為前綴
String
left Number '50%' 相對于可視區域的X軸的坐標。
可以使用'0%' ~ '100%'作為相對坐標,如果瀏覽器窗口大小被改變其也會進行相應的調整
String
top Number '38.2%' 相對于可視區域的Y軸的坐標。
可以使用'0%' ~ '100%'作為相對坐標,如果瀏覽器窗口大小被改變其也會進行相應的調整
String
視覺
lock Boolean false 開啟鎖屏。
中斷用戶對話框之外的交互,用于顯示非常重要的操作/消息,所以不建議頻繁使用它,它會讓操作變得繁瑣
background String '#000' 鎖屏遮罩顏色
opacity Number 0.7 鎖屏遮罩透明度
icon String null 定義消息圖標??啥x“skins/icons/”目錄下的圖標名作為參數名(不包含后綴名)
padding String '20px 25px' 內容與邊界填充邊距(即css padding)
交互
time Number null 設置對話框顯示時間。以秒為單位
resize Boolean true 是否允許用戶調節尺寸
drag Boolean true 是否允許用戶拖動位置
esc Boolean true 是否允許用戶按Esc鍵關閉對話框
高級
id String null 設定對話框唯一標識。用途:
1、防止重復彈出
2、定義id后可以使用art.dialog.list[youID]獲取擴展方法
Number
zIndex Number 1987 重置全局zIndex初始值。
用來改變對話框疊加高度。比如有時候配合外部浮動層UI組件,但是它們可能默認zIndex沒有artDialog高,導致無法浮動到artDialog之上,這個時候你就可以給對話框指定一個較小的zIndex值。
請注意這是一個會影響到全局的配置,后續出現的對話框疊加高度將重新按此累加。
init Function null 對話框彈出后執行的函數
close Function null 對話框關閉前執行的函數。函數如果返回false將阻止對話框關閉。
請注意這不是關閉按鈕的回調函數,無論何種方式關閉對話框,close都將執行。
show Boolean true 是否顯示對話框

擴展方法

名稱 描述
close() 關閉對話框
show() 顯示對話框
hide() 隱藏對話框
title(value) 寫入標題。無參數則返回標題容器元素
content(value) 向消息容器中寫入內容。參數支持字符串、DOM對象,無參數則返回內容容器元素
button(arguments) 插入一個自定義按鈕。
配置參數成員:
name —— 按鈕名稱
callback —— 按下后執行的函數
focus —— 是否聚焦點
disabled —— 是否標記按鈕為不可用狀態(后續可使用擴展方法讓其恢復可用狀態)

示例:
button({
    name: '登錄',
    focus: true,
    callback: function () {}
}, {
    name: '取消'
})
follow(element) 讓對話框吸附到指定元素附近
position(left, top) 重新定位對話框
size(width, height) 重新設定對話框大小
lock() 鎖屏
unlock() 解鎖
time(val) 定時關閉(單位秒)

配置參數演示

內容 [content]

1. 傳入字符串

art.dialog({
	content: '我支持HTML'
});

2. 傳入HTMLElement

備注:1、元素不是復制而是完整移動到對話框中,所以原有的事件與屬性都將會保留 2、如果隱藏元素被傳入到對話框,會設置display:block屬性顯示該元素 3、對話框關閉的時候元素將恢復到原來在頁面的位置,style display屬性也將恢復

art.dialog({
    content: document.getElementById('demoCode_content_DOM'),
    id: 'EF893L'
});

標題 [title]

art.dialog({
	title: 'hello world!'
});

確定取消按鈕 [ok & cancel]

備注:回調函數this指向擴展接口,如果返回false將阻止對話框關閉

art.dialog({
    content: '如果定義了回調函數才會出現相應的按鈕',
    ok: function () {
    	this.title('3秒后自動關閉').time(3);
        return false;
    },
    cancelVal: '關閉',
    cancel: true //為true等價于function(){}
});

自定義按鈕 [button]

備注:回調函數this指向擴展接口,如果返回false將阻止對話框關閉;button參數對應的擴展方法名稱也是"button"

art.dialog({
    id: 'testID',
    content: 'hello world!',
    button: [
        {
            name: '同意',
            callback: function () {
                this.content('你同意了').time(2);
                return false;
            },
            focus: true
        },
        {
            name: '不同意',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            name: '無效按鈕',
            disabled: true
        },
        {
            name: '關閉我'
        }
    ]
});

定時關閉的消息 [time]

art.dialog({
    time: 2,
	content: '兩秒后關閉'
});

防止重復彈出 [id]

art.dialog({
    id: 'testID2',
	content: '再次點擊運行看看'
});
art.dialog({id: 'testID2'}).title('3秒后關閉').time(3);

定義消息圖標 [icon]

請查看skins/icons目錄下的圖標

art.dialog({
	icon: 'succeed',
	content: '我可以定義消息圖標哦'
});

內容與邊界填充邊距 [padding]

有時候并不需要默認的內容填充邊距,如展示圖片與視頻

art.dialog({
	padding: 0,
    title: '照片',
	content: '<img src="./images/photo.jpg" width="379" height="500" />',
    lock: true
});

鎖屏 [lock & background & opacity]

art.dialog({
	lock: true,
    background: '#600', // 背景色
    opacity: 0.87,	// 透明度
	content: '中斷用戶在對話框以外的交互,展示重要操作與消息',
    icon: 'error',
	ok: function () {
		art.dialog({content: '再來一個鎖屏', lock: true});
        return false;
	},
    cancel: true
});

跟隨元素 [follw]

1、標準形式

art.dialog({
	follow: document.getElementById('followTestBtn'),
	content: '讓對話框跟著某個元素,一個元素同時只能出現一個對話框'
});

2、使用簡寫形式 (已經綁定onclick事件,注意此返回值不再是對話框擴展方法)

art('#demoCode_follow_a').dialog({
	content: '讓對話框跟著某個元素,一個元素同時只能出現一個對話框'
});

元素觸發

自定義坐標 [left & top]

art.dialog({
    left: 100,
    top: '60%',
    content: '我改變坐標了'
});

創建一個右下角浮動的消息窗口

art.dialog({
    id: 'msg',
    title: '公告',
    content: 'hello world!',
    width: 320,
    height: 240,
    left: '100%',
    top: '100%',
    fixed: true,
    drag: false,
    resize: false
})

設置大小 [width & height]

art.dialog({
	width: '20em',
    height: 55,
	content: '尺寸可以帶單位'
});

創建一個全屏對話框

art.dialog({
    width: '100%',
    height: '100%',
    left: '0%',
    top: '0%',
    fixed: true,
    resize: false,
    drag: false
})

靜止定位 [fixed]

art.dialog({
	fixed: true,
	content: '請拖動滾動條查看'
});

不許拖拽 [drag & resize]

art.dialog({
    drag: false,
    resize: false,
	content: '禁止拖拽'
});

擴展方法演示

特別說明:擴展方法支持鏈式操作

獲取擴展方法一:直接引用返回

var dialog = art.dialog({
	title: '我是對話框',
	content: '我是初始化的內容'
});
      
dialog.content('對話框內容被擴展方法改變了').title('提示');
      

獲取擴展方法二:通過對話框ID

art.dialog({
    id: 'KDf435',
    title: '警告',
    content: '我是初始化的內容'
});
      
art.dialog.list['KDf435'].content('對話框內容被擴展方法改變了');
      

獲取擴展方法三:回調函數中this

art.dialog({
    title: '警告',
    content: '我是初始化的內容',
    ok: function () {
        this.content('你點了確定按鈕').lock();
        return false;
    },
    init: function () {
        this.content('對話框內容被擴展方法改變了');
    }
});
      

關閉頁面所有對話框

var list = art.dialog.list;
for (var i in list) {
	list[i].close();
};
      

按鈕接口演示

備注:回調函數如果返回false將阻止對話框關閉

var dialog = art.dialog({
    title: '警告',
    content: '點擊管理按鈕將讓刪除按鈕可用',
    width: '20em',
    button: [{
    	name: '管理',
        callback: function () {
            this
            .content('我更改了刪除按鈕')
            .button({
                name: '刪除',
                disabled: false
            })
            .lock();
            return false;
        },
        focus: true
    }]
});

dialog.button(
    {
        name: '刪除',
        callback: function () {
            alert('delect')
        },
        disabled: true
    }
)
      

標題倒計時

var timer;
art.dialog({
	content: '時間越來越少,越來越少..',
	init: function () {
    	var that = this, i = 5;
        var fn = function () {
            that.title(i + '秒后關閉');
            !i && that.close();
            i --;
        };
		timer = setInterval(fn, 1000);
        fn();
	},
    close: function () {
    	clearInterval(timer);
    }
}).show();

關閉不刪除內容

art.dialog({
	id: 'show-hide',
	content: '關閉后阻止對話框被刪除,只隱藏對話框',
	close: function () {
		this.hide();
		return false;
	}
}).show();

AJAX高級應用:執行HTML片段中特殊script標簽

HTML片段中的<script type="text/dialog"></script>標簽包裹的javascript將會在artDialog內部執行,其this指向對話框擴展方法,這樣可以進一步實現消息內容模塊化。

(本例子使用了AJAX,需要在服務器上運行??纱蜷_ ./ajaxContent/login.html 查看源碼中的自定義腳本)

var dialog = art.dialog({id: 'N3690',title: false});

// jQuery ajax   
$.ajax({
	url: './ajaxContent/login.html',
    success: function (data) {
		dialog.content(data);
    },
    cache: false
});

插件:iframe應用工具

請新打開新頁面查看范例:./iframeTop.html

應用到你的項目

在頁面head引入artDialog,其中skin參數表示對話框使用的風格文件(如果項目采用jQuery作為框架,則引用jQuery artDialog版本)。

<script src="artDialog/artDialog.js?skin=default"></script>

如果需要在iframe應用下提供 更好的支持 ,可加載插件:

<script src="artDialog/plugins/iframeTools.js"></script>

配置全局默認參數(可選):

(function (config) {
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})(art.dialog.defaults);
香港平码 安徽11选5历史开奖结果 香港最准一肖中特公开选料 快乐扑克3走势图 qq分分彩和腾讯分分彩一样吗 11选5任3最佳投注方法 pk10 3码最牛计划群 幸运赛车爱彩人彩票网 大乐透对应码对照表 福州麻将金坎是什么意思 捕鱼又来了红包版