Jquery_artDialog對話框彈出

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

 
快速入門
1、使用傳統的參數
art.dialog(content, ok, cancel)
示例：
art.dialog('簡單愉悅的接口，強大的表現力，優雅的內部實現', function(){alert('yes');});
art.dialog(「簡單愉悅的接口，強大的表現力，優雅的內部實現」);

2、使用字面量傳參
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;
    }
});

3、擴展方法
須要對彈出後的對話框操做？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..'	消息內容。 一、若是傳入的是HTMLElement類型，若是是隱藏元素會給其設置display:block以顯示該元素，其餘屬性與綁定的事件都會完整保留，對話框關閉後此元素又將恢復原來的display屬性，而且從新插入原文檔所在位置 二、若是沒有設定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	設定對話框惟一標識。用途： 一、防止重複彈出 二、定義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
備註：一、元素不是複製而是完整移動到對話框中，因此原有的事件與屬性都將會保留二、若是隱藏元素被傳入到對話框，會設置display:block屬性顯示該元素三、對話框關閉的時候元素將恢復到原來在頁面的位置，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);
        returnfalse;
    },
    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);
                returnfalse;
            },
            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]
請查看skin/icons目錄下的圖標

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

內容與邊界填充邊距[padding]
有時候並不須要默認的內容填充邊距，如展現圖片與視頻

art.dialog({
    padding: 0,
    title: '照片',
    content: '<img src="./images/photo.jpg" _cke_saved_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});
        returnfalse;
    },
    cancel: true
});

跟隨元素[follw]
一、標準形式

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

二、使用簡寫形式 （已經綁定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
});
應用到你的項目
在頁面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);