artDialog是一個精巧的web對話框組件，壓縮後只有十多KB，並且不依賴其他框架。
基本介紹
- 中文名：artdialog
- 釋義：web對話框組件
- 特色：優雅靈活
- 套用：電腦套用
特點,使用幫助,套用項目,
特點
能夠自適應內容
artDialog的特殊布局結構能夠原生的適應內容變化，你不必像以前一樣去考慮訊息內容大小，她能自己去適應內容。當然她仍然可以接受一個固定高寬的參數，她能夠防止內容溢出或截斷，同時也不會產生難看的滾動條，甚至能夠自動處理文本對齊方式。
例子
例子優雅靈活的接口
artDialog很用心的設計了她的接口，她擁有豐富的配置參數控制初始化狀態，並且每次調用後還會返回一些實用的內部控制接口，你可以先用變數把它保存起來，需要的時候在其他地方自由控制對話框。
精心設計的UI機制
細緻的用戶體驗
她支持Esc快捷鍵關閉；如果對話框內容有輸入控制項她將支持Ctrl+Enter提交；智慧型給按鈕添加焦點；小對話框自動採用黃金比例垂直居中；超過指定面積大小的對話框拖動自動採用替身挪動；自動計算邊界防止超出可操作範圍……
跨瀏覽器兼容
兼容：IE6+、Firefox、Chrome、Safari、Opera，瀏覽器版本越高體驗越好。並且IE6下也能支持現代瀏覽器的靜止定位(fixed)，支持覆蓋下拉控制項。
與jQuery協作
artDialog所有功能是不需要其他庫就可以使用的，但是如果頁面引入了jQuery，artDialog會奉獻自己成為它的外掛程式，利用它增強自身功能。
使用幫助
調用方式
一、使用傳統的參數傳值
art.dialog(String, Function, Function)
art.dialog('artDialog崇尚：簡單、強大、優雅', function(){alert('yes');});
運行»
二、使用字面量傳值
art.dialog(Object)
art.dialog({ content: '歡迎使用artDialog對話框組件！', skin: 'aero', icon: 'succeed', follow: 'btn2', yesFn: function(){ this.follow('btn1').time(2); return false; }});
運行»
是不是很簡單？接下來將有幾個表格列舉artDialog的全部功能，你需要的時候可以使用它們。配置參數 [除了content參數其餘的都是可選項]
名稱 | 類型 | 默認值 | 描述 |
內容 | |||
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 | 對話框關閉前執行的函式 |
上面這些的默認設定都可以統一被改變，如默認標題：art.dialog.defaults.title = '我是標題'
需要對彈出後的對話框操作？下面介紹的就是artDialog的控制接口了。
每次生成一個對話框後，它都會返回控制接口，這個控制接口還可以在回調函式的"this"指針獲取到。
如調用關閉接口，我們可以先定義一個變數引用對話框返回值：
var testDialog = art.dialog({ id: 'testDialog01', content: '我初始化後會返回控制接口，請注意接收'});然後在可以在其他地方調用"close"方法關閉對話框：
testDialog.close();當然還可以利用重複定義ID讓它返回原來API（如果此ID對話框存在）：
art.dialog({id: 'testDialog01'}).close();好了，介紹了控制接口的用途，下面就是控制接口列表：
控制接口
名稱 | 返回值 | 描述 |
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} | 定位焦點 |
artDialog還對一些常用的前後端互動方法進行擴展，並且這些對話框生下來就具有穿越框架的功能。這部分代碼是作為外掛程式實現的，你也可以根據自己需要去拓展新的方法（包括與jQuery結合使用），如果不需要也可以從源碼中剔除掉：
自帶的擴展方法
名稱 | 描述 |
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載入內容 |
jQuery + artDialog
如果頁面引用了jQuery，將會獻身成為jQuery的一個外掛程式，方法與參數同上。例：
// 普通調用 $.dialog({content:'hello world!'});// 使用jQuery強大的選擇器讓對話框跟隨到元素附近 $('#main .test').dialog({content: 'hello world'});
套用項目
一、在頁面head引入一個js檔案。
<script src="artDialog.min.js"></script> 二、在頁面head設定默認配置（可選）。
<script>// 設定對話框全局默認配置(function(){ var d = art.dialog.defaults; // 按需載入要用到的皮膚，數組第一個為默認皮膚 // 如果只使用默認皮膚，可以不填寫skin d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖動 d.drag = true;})();</script>
