artDialog

artDialog是一個精巧的web對話框元件，壓縮後隻有十多KB，并且不依賴其他架構。

在頁面head引入artDialog，注意如果檔案帶有skin參數将會無阻塞的方式自動加載對應的皮膚css檔案，當然你仍然可以使用傳統方式引用“skins/”目錄下的css檔案，二者選其一。

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

如果項目采用jQuery作為架構，則引用jQuery artDialog版本：

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

如果需要在iframe應用下提供 更好的支援，需要加上：

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

配置參數

名稱	類型	預設值	描述
内容
title	String	'消息'	标題内容
content	String	null	消息内容。 1、如果内容類型是Object還需要tmpl參數配合 2、如果傳入的是HTMLElement類型，如果是隐藏元素會給其設定display:block以顯示該元素，其他屬性與綁定的事件都會完整保留，對話框關閉後此元素又将恢複原來的display屬性，并且重新插入原文檔所在位置 3、如果沒有設定content的值則會有loading的動畫
HTMLElement
Object
按鈕
yesFn	Function	null	确定按鈕回調函數。 函數如果傳回false将阻止對話框關閉；函數this指針指向内部api；如果傳入true表示隻顯示有關閉功能的按鈕
Boolean
noFn	Function	null	取消按鈕回調函數。 函數如果傳回false将阻止對話框關閉；函數this指針指向内部api；如果傳入true表示隻顯示有關閉功能的按鈕 對話框标題欄的關閉按鈕其實就是取消按鈕，隻不過視覺不同罷了，點選同樣觸發noFn事件
Boolean
yesText	String	'确定'	"确定按鈕"文字
noText	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軸的坐标。 1、如果開啟了fixed參數則以浏覽器視口為基準； 2、可以使用'0%' ~ '100%'作為相對坐标，如果浏覽器視窗大小被改變其也會進行相應的調整
String
top	Number	'goldenRatio'	Y軸的坐标。 1、如果開啟了fixed參數則以浏覽器視口為基準； 2、可以使用'0%' ~ '100%'、''goldenRatio''作為相對坐标，如果浏覽器視窗大小被改變其也會進行相應的調整，其中'goldenRatio'表示為黃金比例垂直居中，絕對居中請使用'50%'
String
視覺
lock	Boolean	false	開啟鎖屏。 中斷使用者對話框之外的互動，用于顯示非常重要的操作/消息，是以不建議頻繁使用它
background	String	'#000'	鎖屏遮罩顔色
opacity	Number	0.7	鎖屏遮罩透明度
icon	String	null	定義消息圖示。可定義“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、可後續使用art.dialog.list[youID]擷取控制接口
Number
tmpl	String	null	啟用模闆引擎拼接消息内容，還需要與content參數傳入字面量對象才能生效，詳情見示例
zIndex	Number	1987	重置全局zIndex初始值。 用來改變對話框疊加高度。比如有時候配合外部浮動層UI元件，但是它們可能預設zIndex沒有artDialog高，導緻無法浮動到artDialog之上，這個時候你就可以給對話框指定一個較小的zIndex值。 請注意這是一個會影響到全局的配置，後續出現的對話框疊加高度将重新按此累加。
initFn	Function	null	對話框彈出後執行的函數
closeFn	Function	null	對話框關閉前執行的函數。函數如果傳回false将阻止對話框關閉。 請注意這不是關閉按鈕的回調函數，無論何種方式關閉對話框，closeFn都将執行。
show	Boolean	true	是否顯示對話框

配置全局預設設定:

(function (config) { config['lock'] = true; config['fixed'] = true; config['yesText'] = 'yes'; config['noText'] = 'no'; // [more..] })(art.dialog.defaults);
           

配置參數範例

内容 [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' });
           

運作»

3. 進階應用：傳入Object并使用“tmpl”模闆參數生成内容

備注：拼接字元串是一個比較無趣的活兒，而artDialog内部使用一個微型模闆引擎解析自身UI架構，你可以通過tmp參數繼續使用它格式化内容。模闆支援原生的javascript文法，可進行條件判斷。推薦你嘗試使用type="text/tmpl"的script标簽存放模闆，如：

var tmpl = document.getElementById('tmpl_demoCode_content').innerHTML; art.dialog({ content: { code: 0, users: ['糖餅', '月月鳥', '水水', '麗麗', '花花', '大叔'], me: '糖餅', web: 'http://www.planeart.cn' }, tmpl: tmpl });
           

運作»

标題 [title]

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

運作»

确定取消按鈕 [yesFn & noFn]

備注：回調函數this指向擴充接口，如果傳回false将阻止對話框關閉

art.dialog({ content: '如果定義了回調函數才會出現相應的按鈕', yesFn: function () { this.title('3秒後自動關閉').time(3); return false; }, noText: '關閉', noFn: 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: 'testID', content: '再次點選運作看看' }); art.dialog({id: 'testID'}).title('3秒後關閉').time(3);
           

運作»

定義消息圖示 [icon]

内置圖示：alert、succeed、error、confirm

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

運作»

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

有時候并不需要預設的内容填充邊距，如展示圖檔與視訊

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

運作»

鎖屏 [lock & background & opacity]

art.dialog({ lock: true, background: '#600', // 背景色 opacity: 0.7, // 透明度 content: '中斷使用者在對話框以外的互動，展示重要操作與消息', icon: 'error', yesFn: function () { art.dialog({content: '再來一個鎖屏', lock:true}); return false; }, noFn: 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: '禁止拖拽' });
           

運作»

控制接口

名稱	描述
close()	關閉對話框
show()	顯示對話框
hide()	隐藏對話框
title(value)	寫入标題。無參數則傳回标題容器元素
content(value)	向消息容器中寫入内容。參數支援字元串、DOM對象，無參數則傳回内容容器元素
button(arguments)	插入一個自定義按鈕。 如：button({name: '登入', callback: function () {_form.submit();}) 更多用法請見範例文檔
follow(element)	讓對話框吸附到指定元素附近
position(left, top)	重新定位對話框
size(width, height)	重新設定對話框大小
lock()	鎖屏
unlock()	解鎖
time(val)	定時關閉（機關秒）

備注：控制接口傳回值都是this，是以你可以使用鍊式程式設計風格。

控制接口範例

控制接口可以在對話框初始化後控制對話框，需要有一定的javascript基礎，這裡不做過多示範。

擷取控制接口：直接引用控制接口

var dialog = art.dialog({ title: '我是對話框', content: '我是初始化的内容' }); dialog.content('對話框内容被控制接口改變了').title('提示');
           

運作»

擷取控制接口：使用對話框ID

art.dialog({ id: 'KDf435', title: '警告', content: '我是初始化的内容' }); art.dialog.list['KDf435'].content('對話框内容被控制接口改變了').time(2);
           

運作»

擷取控制接口：this引用

art.dialog({ title: '警告', content: '我是初始化的内容', yesFn: function () { this.content('你點了确定按鈕').position('50%', null).lock().time(2); return false; }, initFn: 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 }); return false; }, focus: true }] }); dialog.button( { name: '删除', callback: function () {alert('remove') }, disabled: true } )
           

運作»

改變關閉方式

art.dialog({ id: 'show-hide', content: '關閉後阻止對話框被删除，隻隐藏對話框', closeFn: function () {this.hide(); return false; } }).show();
           

運作»

AJAX進階應用：執行HTML片段中特殊script标簽

HTML片段中的<script type="text/dialog"></script>标簽包裹的javascript将會在對話框中執行，其this指向對話框控制接口，代碼在閉包内執行，不會影響全局，這樣可以進一步實作内容子產品化。

(本例子使用了AJAX，需要在伺服器上運作。可打開 ./ajaxContent/login.html檢視源碼中的自定義腳本)

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

運作»

擴充：iframe應用工具集

名稱	描述
核心方法
art.dialog.parent	擷取artDialog可用最高層window對象。這與直接使用window.top不同，它能排除artDialog對象不存在已經或者頂層頁面為架構集的情況 這是iframe應用工具集中的核心方法，你可以用它來操作父頁面對象（包括上面的對話框）
art.dialog.data(name, value)	跨架構資料共享寫入接口。 架構與架構之間以及與首頁面之間進行資料交換是非常頭疼的事情，正常情況下你必須知道架構的名稱才能進行資料交換，如果是在複雜的多層架構下操作簡直就是噩夢。 而data方法就是為了解決這個問題，你完全不用管架構層級問題，它可以寫入任何類型的資料，而做到各個頁面之間資料共享。
art.dialog.data(name)	跨架構資料共享讀取接口。指定name即傳回資料，任何引用了artDialog的頁面都有效
art.dialog.removeData(name)	跨架構資料共享删除接口。删除指定名稱的資料，任何引用了artDialog的頁面都有效
異步資料對話框
art.dialog.open(url, options, cache)	建立一個iframe頁面 參數: 位址, 配置參數, 緩存開關(預設true)
art.dialog.open.api	iframe頁面擷取open方法控制接口。 (注意這個iframe中也必須引用artDialog腳本檔案)
art.dialog.open.origin	iframe頁面擷取open方法觸發來源頁面window對象。 (注意這個iframe中也必須引用artDialog腳本檔案)
art.dialog.close()	iframe頁面關閉open方法建立的對話框的快捷方式。 close方法等同于： var api = art.dialog.open.api; api && api.close(); (注意這個iframe中也必須引用artDialog腳本檔案)
art.dialog.load(url, options, cache)	Ajax加載内容 參數：位址, 配置參數, 緩存開關(預設true)
基礎互動對話框
art.dialog.alert(content)	警告消息 (同時隻允許一個alert) 參數: 内容
art.dialog.confirm(content, yesFn, noFn)	确認 (同時隻允許一個confirm) 參數: 内容, 确定按鈕回調函數, 取消按鈕回調函數
art.dialog.prompt(content, yesFn, value)	提問 (同時隻允許一個prompt) 參數: 内容, 确定按鈕回調函數, 文本框預設值
art.dialog.tips(content, time)	短暫提示(同時隻允許一個tips) 參數: 内容、顯示時間(機關秒, 預設1.5)
自定義
art.dialog.through(options)	建立一個普通可穿越架構的對話框 不鼓勵直接使用window.top這樣的方式穿越，這樣可能因為對話框觸發頁面重置導緻其産生所有的對象在記憶體中被清空，而讓對話框無法關閉，是以你應該用這個安全的方法建立自定義對話框。

架構集頁面無法覆寫第三方元素，不過可以使用一個iframe套住架構集頁面就可以正常使用，見下面示範文檔