介紹一款“對話框”組件之 “artDialog”在項目中的使用

         在實際開發項目中經常會用到對話框組件，提示一些信息。其實有很多，例如：在項目中常用到的“Jquery-UI、Jquery-EasyUI”的.Dialog，他們也很強大，Api文檔也很多。今天就介紹一款輕量級的對話框組件artDialog，以下分別為Jquery-UI、Jquery-EasyUI、artDialog的對話框。

                  

 

                                                       

      一、“artDialog”介紹：

                 artDialog是一個基於javascript編寫的對話框組件，它擁有精致的界面與友好的接口。                

1、自適應內容

artDialog的特殊UI框架能夠適應內容變化，甚至連外部程序動態插入的內容它仍然能自適應，因此你不必去考慮消息內容尺寸使用它。它的消息容器甚至能夠根據寬度讓文本居中或居左對齊——這一切全是XHTML+CSS原生實現。

完善的接口

它的接口完善，可以輕易與外部程序配合使用。如異步寫入消息、控制位置、尺寸、顯示與隱藏、關閉等。

2、細致的體驗

如果不是在輸入狀態，它支持Esc快捷鍵關閉；可指定在元素附近彈出，讓操作更便捷；智能給按鈕添加焦點；黃金比例垂直居中；超大響應區域特別為ipad等觸屏設備優化；預先緩存皮膚圖片更快響應……

3、跨平台兼容

兼容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動設備。並且IE6下也能支持現代瀏覽器的靜止定位( fixed)、覆蓋下拉控件、alpha通道png背景。

二、快速入門、簡答易用                  

        簡單介紹一下artDialog的配置參數：          

名稱	類型	默認值	描述
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'	設置消息內容高度，可以帶單位。不建議設置此，而應該讓內容自己撐開高度。 如果設置為百分值單位，將會以根據瀏覽器可視范圍作為基准，此時如果瀏覽器窗口大小被改變其也會進行相應的調整

 

1、使用傳統的參數

art.dialog(content, ok, cancel)

art.dialog('簡單愉悅的接口，強大的表現力，優雅的內部實現', function(){alert('yes');});
        

2、使用字面量傳參

           

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主文件里面）

 （1）、實現搖頭效果、以及調用示例。(如果回答不正確，一直“搖頭”)

                  

                  

var dialog = art.dialog({
    content: '<p>"己所不欲"下一句是？</p>'
        + '<input id="demo-labs-input" style="width:15em; padding:4px" />',
    fixed: true,
    id: 'Fm7',
    icon: 'question',
    okVal: '回答',
    ok: function () {
        var input = document.getElementById('demo-labs-input');
        
        if (input.value !== '勿施於人') {
            this.shake && this.shake();// 調用抖動接口
            input.select();
            input.focus();
            return false;
        } else {
            art.dialog({
                content: '恭喜你，回答正確！',
                icon: 'succeed',
                fixed: true,
                lock: true,
                time: 1.5
            });
        };
    },
    cancel: true
});

dialog.shake && dialog.shake();// 調用抖動接口

                                          

                  （2）、右下角滑動通知

                   

artDialog.notice = function (options) {
    var opt = options || {},
        api, aConfig, hide, wrap, top,
        duration = 800;
        
    var config = {
        id: 'Notice',
        left: '100%',
        top: '100%',
        fixed: true,
        drag: false,
        resize: false,
        follow: null,
        lock: false,
        init: function(here){
            api = this;
            aConfig = api.config;
            wrap = api.DOM.wrap;
            top = parseInt(wrap[0].style.top);
            hide = top + wrap[0].offsetHeight;
            
            wrap.css('top', hide + 'px')
                .animate({top: top + 'px'}, duration, function () {
                    opt.init && opt.init.call(api, here);
                });
        },
        close: function(here){
            wrap.animate({top: hide + 'px'}, duration, function () {
                opt.close && opt.close.call(this, here);
                aConfig.close = $.noop;
                api.close();
            });
            
            return false;
        }
    };    
    
    for (var i in opt) {
        if (config[i] === undefined) config[i] = opt[i];
    };
    
    return artDialog(config);
};

                   

art.dialog.notice({
    title: '萬象網管',
    width: 220,// 必須指定一個像素寬度值或者百分比，否則瀏覽器窗口改變可能導致artDialog收縮
    content: '尊敬的顧客朋友，您IQ卡余額不足10元，請及時充值',
    icon: 'face-sad',
    time: 5
});

                                               

三、說了這么多，有人會問“開源不”??

 官方是這么說的：artDialog 采用LGPL開源協議（如下）

• • 如果您不對 artDialog 程序代碼進行任何修改，直接調用組件，可以以任意方式自由使用：開源、非開源、商業及非商業。
  • 如果您對 artDialog 程序代碼進行任何的修改或者衍生，涉及修改部分的額外代碼和衍生的代碼都必須采用 LGPL 協議開放源代碼。
  • 無論您對 artDialog 程序代碼如何修改，都必須在程序文件頭部聲明版權信息的注釋（包括壓縮版）

四、總結：好用的插件有很多，同時也方便了我們的開發，如果大家還有比較好用的“dialog”插件，歡迎推薦！

    

        源碼下載：前面有一篇文章中用到這個組件