artDialog是一個基於javascript編寫的對話框組件，它擁有精致的界面與友好的接口
l 自適應內容
artDialog的特殊UI框架能夠適應內容變化，甚至連外部程序動態插入的內容它仍然能自適應，因此你不必去考慮消息內容尺寸使用它。它的消息容器甚至能夠根據寬度讓文本居中或居左對齊——這一切全是XHTML+CSS原生實現。
l 完善的接口
它的接口完善，可以輕易與外部程序配合使用。如異步寫入消息、控制位置、尺寸、顯示與隱藏、關閉等。
l 細致的體驗
如果不是在輸入狀態，它支持Esc快捷鍵關閉；可指定在元素附近彈出，讓操作更便捷；智能給按鈕添加焦點；黃金比例垂直居中；超大響應區域特別為ipad等觸屏設備優化；預先緩存皮膚圖片更快響應……
l 跨平台兼容
兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動設備。並且IE6下也能支持現代瀏覽器的靜止定位(fixed)、、alpha通道png背景。
下載地址：http://code.google.com/p/artdialog/downloads/list
快速入門
一、使用傳統的參數
art.dialog(content, ok, cancel)
示例：
art.dialog('簡單愉悅的接口，強大的表現力，優雅的內部實現', function(){alert('yes');});
art.dialog(“簡單愉悅的接口，強大的表現力，優雅的內部實現”);
二、使用字面量傳參
art.dialog(options)
示例
var dialog = art.dialog({
title: '歡迎',
content: '歡迎使用artDialog對話框組件！',
icon: 'succeed',
follow: document.getElementById('btn2'),
ok: function(){
this.title('警告').content('請注意artDialog兩秒后將關閉！').lock().time(2);
return false;
}
});
三、擴展方法
需要對彈出后的對話框操作？artDialog簡單實用的擴展方法可以使這一切變得簡單。
如在ajax異步操作中，我們可以先定義一個變量引用對話框返回的擴展方法：
var myDialog = art.dialog();// 初始化一個帶有loading圖標的空對話框
jQuery.ajax({
url: 'http://web5.qq.com/content?id=1',
success: function (data) {
myDialog.content(data);// 填充對話框內容
}
});
如果需要使用程序控制關閉，可以使用"close"方法關閉對話框：
myDialog.close();
插件：框架應用工具
artDialog針對CMS類的框架應用提供了專屬插件，如穿越框架、iframe、AJAX、跨框架傳值操作等。
例： 使用open方法嵌入頁面，並使用data方法在各個iframe間傳遞數據：
var val = document.getElementById('demoInput04-3').value;
art.dialog.data('test', val);
art.dialog.data('homeDemoPath', './_doc/');
// 此時iframeA.html 頁面可以使用art.dialog.data('test') 獲取到數據，如：
// document.getElementById('aInput').value = art.dialog.data('test');
art.dialog.open('./_doc/iframeA.html');
jQuery + artDialog
artDialog提供了一個jQuery版本，功能與標准版一致，調用只需要把art前綴改成jQuery的命名空間。
// 普通調用
$.dialog({content:'hello world!'});
// 使用選擇器方式，此時自動使用綁定了live click事件，同時啟用follow模式
$('#main .test').dialog({content: 'hello world'});
(最低兼容jquery1.3.2，但框架應用插件需要jquery1.4+運行[?])
配置參數
| 名稱 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| 內容 | |||
| 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 | 定義消息圖標。可定義“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. 傳入字符串
content: '我支持HTML'
});
2. 傳入HTMLElement
備注：1、元素不是復制而是完整移動到對話框中，所以原有的事件與屬性都將會保留2、如果隱藏元素被傳入到對話框，會設置display:block屬性顯示該元素3、對話框關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復
content: document.getElementById('demoCode_content_DOM'),
id: 'EF893L'
});
標題[title]
title: 'hello world!'
});
確定取消按鈕[ok & cancel]
備注：回調函數this指向擴展接口，如果返回false將阻止對話框關閉
content: '如果定義了回調函數才會出現相應的按鈕',
ok: function() {
this.title('3秒后自動關閉').time(3);
returnfalse;
},
cancelVal: '關閉',
cancel: true//為true等價於function(){}
});
自定義按鈕[button]
備注：回調函數this指向擴展接口，如果返回false將阻止對話框關閉；button參數對應的擴展方法名稱也是"button"
id: 'testID',
content: 'hello world!',
button: [
{
name: '同意',
callback: function() {
this.content('你同意了').time(2);
returnfalse;
},
focus: true
},
{
name: '不同意',
callback: function() {
alert('你不同意')
}
},
{
name: '無效按鈕',
disabled: true
},
{
name: '關閉我'
}
]
});
定時關閉的消息[time]
time: 2,
content: '兩秒后關閉'
});
防止重復彈出[id]
id: 'testID2',
content: '再次點擊運行看看'
});
art.dialog({id: 'testID2'}).title('3秒后關閉').time(3);
定義消息圖標[icon]
請查看skin/icons目錄下的圖標
icon: 'succeed',
content: '我可以定義消息圖標哦'
});
內容與邊界填充邊距[padding]
有時候並不需要默認的內容填充邊距，如展示圖片與視頻
padding: 0,
title: '照片',
content: '<img src="./images/photo.jpg" _cke_saved_src="./images/photo.jpg" width="379" height="500" />',
lock: true
});
鎖屏[lock & background & opacity]
lock: true,
background: '#600', // 背景色
opacity: 0.87, // 透明度
content: '中斷用戶在對話框以外的交互，展示重要操作與消息',
icon: 'error',
ok: function() {
art.dialog({content: '再來一個鎖屏', lock: true});
returnfalse;
},
cancel: true
});
跟隨元素[follw]
1、標准形式
follow: document.getElementById('followTestBtn'),
content: '讓對話框跟着某個元素，一個元素同時只能出現一個對話框'
});
2、使用簡寫形式 （已經綁定onclick事件，注意此返回值不再是對話框擴展方法）
content: '讓對話框跟着某個元素，一個元素同時只能出現一個對話框'
});
自定義坐標[left & top]
left: 100,
top: '60%',
content: '我改變坐標了'
});
創建一個右下角浮動的消息窗口
id: 'msg',
title: '公告',
content: 'hello world!',
width: 320,
height: 240,
left: '100%',
top: '100%',
fixed: true,
drag: false,
resize: false
})
設置大小[width & height]
width: '20em',
height: 55,
content: '尺寸可以帶單位'
});
創建一個全屏對話框
width: '100%',
height: '100%',
left: '0%',
top: '0%',
fixed: true,
resize: false,
drag: false
})
靜止定位[fixed]
fixed: true,
content: '請拖動滾動條查看'
});
不許拖拽[drag & resize]
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
});
應用到你的項目
在頁面head引入artDialog，其中skin參數表示對話框使用的風格文件(如果項目采用jQuery作為框架，則引用jQuery artDialog版本)。
<script src="artDialog/artDialog.js?skin=default" _cke_saved_src="artDialog/artDialog.js?skin=default"></script>
如果需要在iframe應用下提供 更好的支持 ，可加載插件：
<script src="artDialog/plugins/iframeTools.js" _cke_saved_src="artDialog/plugins/iframeTools.js"></script>
配置全局默認參數(可選):
(function (config) {
config['lock'] = true;
config['fixed'] = true;
config['okVal'] = 'Ok';
config['cancelVal'] = 'Cancel';
// [more..]
})(art.dialog.defaults);