知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    artdialog v6強大的模態對話框v6版api

    作者:佳明媽 來源:aui 2015-03-31 人氣:
    artdialog v6強大的模態對話框jquery插件api使用以及免費下載,artdialog v6版體積更小壓縮版只有10K多點,功能更強,兼容到IE6以上,artdialog有彈出窗口、彈出層功能,還提供了各個方向的t
    artdialog v6強大的模態對話框jquery插件api使用以及免費下載,artdialog v6版體積更小壓縮版只有10K多點,功能更強,兼容到IE6以上,國內qq空間,盛大等網站都選擇了這款彈出窗口插件。

    artdialog有彈出窗口、彈出層功能,也有模擬alert等js原生提示的模態對話框解決方案,還提供了各個方向的tip提示功能。
    有了這個彈出層,足以應付絕大部分工作了。

    彈出層插件不在多在于穩定、強大、小巧、兼容好。

    調用方法:
    jquery庫你可以自行引用合適的版本,可以參考:前端公共庫cdn服務推薦//提高加載速度/節省流量http://www.ezdqdj.live/jiqiao/cdn_lib.html
    <script src="lib/jquery-1.10.2.js"></script>
    <link rel="stylesheet" href="css/ui-dialog.css">
    <script src="dist/dialog-min.js"></script>
    -------------------------------------------------------------------------
    artdialog 使用
    -------------------------------------------------------------------------
    普通對話框
     
    var d = dialog({
        title: '歡迎',
        content: '歡迎使用 artDialog 對話框組件!'
    });
    d.show();
     
    模態對話框
     
    var d = dialog({
        title: 'message',
        content: '<input autofocus />'
    });
    d.showModal();
     
    氣泡浮層
     
    var d = dialog({
        content: 'Hello World!',
        quickClose: true// 點擊空白處快速關閉
    });
    d.show(document.getElementById('quickref-bubble'));
     
    12 個方向定位演示
     
    添加按鈕
     
    1.確定與取消按鈕:
     
    var d = dialog({
        title: '提示',
        content: '按鈕回調函數返回 false 則不許關閉',
        okValue: '確定',
        ok: function () {
            this.title('提交中…');
            return false;
        },
        cancelValue: '取消',
        cancel: function () {}
    });
    d.show();
     
    2.指定更多按鈕:
     
    請參考 button 方法或參數。
     
    控制對話框關閉
     
    var d = dialog({
        content: '對話框將在兩秒內關閉'
    });
    d.show();
    setTimeout(function () {
        d.close().remove();
    }, 2000);
     
    給對話框左下腳添加復選框
     
    var d = dialog({
        title: '歡迎',
        content: '歡迎使用 artDialog 對話框組件!',
        ok: function () {},
        statusbar: '<label><input type="checkbox">不再提醒</label>'
    });
    d.show();
     
    點按鈕不關閉對話框
    按鈕事件返回 false 則不會觸發關閉。
     
    var d = dialog({
        title: '歡迎',
        content: '歡迎使用 artDialog 對話框組件!',
        ok: function () {
            var that = this;
            this.title('正在提交..');
            setTimeout(function () {
                that.close().remove();
            }, 2000);
            return false;
        },
        cancel: function () {
            alert('不許關閉');
            return false;
        }
    });
    d.show();
     
    不顯示關閉按鈕
     
    var d = dialog({
        title: '歡迎',
        content: '歡迎使用 artDialog 對話框組件!',
        cancel: false,
        ok: function () {}
    });
    d.show();
     
    創建 iframe 內容
     
    artDialog 提供了一個增強版用來支持復雜的 iframe 套嵌的頁面,可以在頂層頁面創建一個可供 iframe 訪問的對話框創建方法,例如:
     
    seajs.use(['dialog/src/dialog-plus'], function (dialog) {
        window.dialog = dialog;
    });
    然后子頁面就可以通過top.dialog控制對話框了。
     
    打開示例頁面
     
    小提示:增強版的選項比標準版多了url、oniframeload這幾個字段。
    方法
    若無特別說明,方法均支持鏈式調用。
     
    show([anchor])
     
    顯示對話框。
     
    默認居中顯示,支持傳入元素節點或者事件對象。
     
    參數類型為HTMLElement:可吸附到元素上,同時對話框將呈現氣泡樣式。
    參數類型為Event Object:根據event.pageX與event.pageY定位。
    示例
     
    var d = dialog();
    d.content('hello world');
    d.show(document.getElementById('api-show'));
     
    var d = dialog({
        id: 'api-show-dialog',
        quickClose: true,
        content: '右鍵菜單'
    });
    $(document).on('contextmenu', function (event) {
        d.show(event);
        return d.destroyed;
    });
     
    showModal([anchor])
     
    顯示一個模態對話框。
     
    其余特性與參數可參見show([anchor])方法。
     
    示例
     
    var d = dialog({
        title: 'message',
        content: '<input autofocus />'
    });
    d.showModal();
     
    close([result])
     
    關閉(隱藏)對話框。
     
    可接收一個返回值,可以參見 returnValue。
     
    注意:close()方法只隱藏對話框,不會在 DOM 中刪除,刪除請使用remove()方法。
     
    remove()
     
    銷毀對話框。
     
    注意:不同于close([result])方法,remove()方法會從 DOM 中移出對話框相關節點,銷毀后的對話框無法再次使用。
     
    對話框按鈕點擊后默認會依次觸發 close()、remove() 方法。如果想手動控制對話框關閉可以如下操作:
     
    var d = dialog();
    // [..]
    d.close().remove();
     
    content(html)
     
    寫入對話框內容。
     
    html參數支持String、HTMLElement類型。
     
    示例
     
    傳入字符串:
     
    var d = dialog();
    d.content('hello world');
    d.show();
     
    傳入元素節點:
     
    var elem = document.getElementById('test');
    dialog({
        content: elem,
        id: 'EF893L'
    }).show();
    v6.0.4 更新:隱藏元素將會自動顯示,并且對話框卸載的時候會放回到body中
    title(text)
     
    寫入對話框標題。
     
    示例
     
    var d = dialog();
    d.title('hello world');
    d.show();
     
    width(value)
     
    設置對話框寬度。
     
    示例
     
    dialog({
        content: 'hello world'
    })
    .width(320)
    .show();
     
    height(value)
     
    設置對話框高度。
     
    示例
     
    dialog({
        content: 'hello world'
    })
    .height(320)
    .show();
     
    reset()
     
    手動刷新對話框位置。
     
    通常動態改變了內容尺寸后需要刷新對話框位置。
     
    button(args)
     
    自定義按鈕。
     
    參數請參考 選項button;同時支持傳入 HTML 字符串填充按鈕區域。
     
    focus()
     
    聚焦對話框(置頂)。
     
    blur()
     
    讓對話框失去焦點。
     
    addEventListener(type, callback)
     
    添加事件。
     
    支持的事件有:show、close、beforeremove、remove、reset、focus、blur
     
    removeEventListener(type, callback)
     
    刪除事件。
     
    dialog.get(id)
     
    根據獲取打開的對話框實例。
     
    注意:這是一個靜態方法。
     
    dialog.getCurrent()
     
    獲取當前(置頂)對話框實例。
     
    注意:這是一個靜態方法。
     
    配置參數
    content
     
    設置消息內容。
     
    類型
     
    String, HTMLElement
     
    示例
     
    傳入字符串:
     
    dialog({
        content: 'hello world!'
    }).show();
     
    傳入元素節點:
     
    var elem = document.getElementById('test');
    dialog({
        content: elem,
        id: 'EF893L'
    }).show();
    title
     
    標題內容。
     
    類型
     
    String
     
    示例
     
    dialog({
        title: 'hello world!'
    }).show();
     
    statusbar
     
    狀態欄區域 HTML 代碼。
     
    可以實現類似“不再提示”的復選框。注意:必須有按鈕才會顯示。
     
    類型
     
    String
     
    示例
     
    var d = dialog({
        title: '歡迎',
        content: '歡迎使用 artDialog 對話框組件!',
        ok: function () {},
        statusbar: '<label><input type="checkbox">不再提醒</label>'
    });
    d.show();
     
    ok
     
    確定按鈕。
     
    回調函數this指向dialog對象,執行完畢默認關閉對話框,若返回 false 則阻止關閉。
     
    類型
     
    Function
     
    示例
     
    dialog({
        ok: function () {
            this
            .title('消息')
            .content('hello world!')
            .width(130);
            return false;
        }
    }).show();
     
    okValue
     
    (默認值: "ok") 確定按鈕文本。
     
    類型
     
    String
     
    示例
     
    dialog({
        okValue: '猛擊我',
        ok: function () {
            this.content('hello world!');
            return false;
        }
    }).show();
     
    cancel
     
    取消按鈕。
     
    取消按鈕也等同于標題欄的關閉按鈕,若值為false則不顯示關閉按鈕。回調函數this指向dialog對象,執行完畢默認關閉對話框,若返回false則阻止關閉。
     
    類型
     
    Function, Boolean
     
    示例
     
    dialog({
        title: '消息',
        ok: function () {},
        cancel: function () {
            alert('取消');
        }
    }).show();
     
    dialog({
        title: '消息',
        content: '不顯示關閉按鈕',
        ok: function () {},
        cancel: false
    }).show();
     
    cancelValue
     
    (默認值: "cancel") 取消按鈕文本。
     
    類型
     
    String
     
    示例
     
    dialog({
        cancelValue: '取消我',
        cancel: function () {
            alert('關閉');
        }
    }).show();
     
    cancelDisplay
     
    (默認值: true) 是否顯示取消按鈕。
     
    類型
     
    Boolean
     
    示例
     
    dialog({
        title: '提示',
        content: '這是一個禁止關閉的對話框,并且沒有取消按鈕',
        cancel: function () {
            alert('禁止關閉');
            return false;
        },
        cancelDisplay: false
    }).show();
     
    button
     
    自定義按鈕組。
     
    類型
     
    Array
     
    選項
     
    名稱 類型 描述
    value String 按鈕顯示文本
    callback Function (可選) 回調函數this指向dialog對象,執行完畢默認關閉與銷毀對話框(依次執行close()與remove()),若返回false則阻止關閉與銷毀
    autofocus Boolean (默認值:false) 是否自動聚焦
    disabled Boolean (默認值: false) 是否禁用
    示例
     
    dialog({
        button: [
            {
                value: '同意',
                callback: function () {
                    this
                    .content('你同意了');
                    return false;
                },
                autofocus: true
            },
            {
                value: '不同意',
                callback: function () {
                    alert('你不同意')
                }
            },
            {
                id: 'button-disabled',
                value: '無效按鈕',
                disabled: true
            },
            {
                value: '關閉我'
            }
        ]
    }).show();
     
    width
     
    設置對話框 內容 寬度。
     
    類型
     
    String, Number
     
    示例
     
    dialog({
        width: 460
    }).show();
     
    dialog({
        width: '20em'
    }).show();
     
    height
     
    設置對話框 內容 高度。
     
    類型
     
    String, Number
     
    示例
     
    dialog({
        height: 460
    }).show();
     
    dialog({
        height: '20em'
    }).show();
     
    skin
     
    設置對話框額外的className參數。
     
    多個className請使用空格隔開。
     
    類型
     
    String
     
    示例
     
    dialog({
        skin: 'min-dialog tips'
    }).show();
    padding
     
    (默認值: 繼承 css 文件設置) 設置消息內容與消息容器的填充邊距,即 style padding屬性
     
    類型
     
    String
     
    示例
     
    dialog({
        content: 'hello world',
        padding: 0
    }).show();
     
    fixed
     
    (默認值: false) 開啟固定定位。
     
    固定定位是 css2.1 position的一個屬性,它能固定在瀏覽器某個地方,也不受滾動條拖動影響。IE6 與部分移動瀏覽器對其支持不好,內部會轉成絕對定位。
     
    類型
     
    Boolean
     
    示例
     
    dialog({
        fixed: true,
        title: '消息',
        content: '請拖動滾動條查看'
    }).show();
     
    align
     
    (默認值: "bottom left") 設置對話框與其他元素的對齊方式。
     
    如果show(elem)與showModal(elem)傳入元素,align參數方可生效,支持如下對齊方式:
     
    "top left"
    "top"
    "top right"
    "right top"
    "right"
    "right bottom"
    "bottom right"
    "bottom"
    "bottom left"
    "left bottom"
    "left"
    "left top"
    類型
     
    String
     
    示例
     
    var d = dialog({
        align: 'left',
        content: 'Hello World!',
        quickClose: true
    });
    d.show(document.getElementById('option-align'));
     
    12 個方向定位演示
     
    autofocus
     
    (默認值: true) 是否支持自動聚焦。
     
    類型
     
    Boolean
     
    quickClose
     
    (默認值: false) 是否點擊空白出快速關閉。
     
    類型
     
    Boolean
     
    示例
     
    var d = dialog({
        content: '點擊空白處快速關閉',
        quickClose: true
    });
    d.show(document.getElementById('option-quickClose'));
     
    zIndex
     
    (默認值: 1024) 重置全局zIndex初始值,用來改變對話框疊加高度。
     
    比如有時候配合外部浮動層 UI 組件,但是它們可能默認zIndex沒有對話框高,導致無法浮動到對話框之上,這個時候你就可以給對話框指定一個較小的zIndex值。
     
    請注意這是一個會影響到全局的配置,后續出現的對話框疊加高度將重新按此累加。
     
    類型
     
    Number
     
    示例
     
    dialog({
        zIndex: 87
    }).show();
     
    onshow
     
    對話框打開的事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    示例
     
    var d = dialog({
        content: 'loading..',
        onshow: function () {
            this.content('dialog ready');
        }
    });
    d.show();
     
    onclose
     
    對話框關閉后執行的事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    示例
     
    var d = dialog({
        onclose: function () {
            alert('對話框已經關閉');
        },
        ok: function () {}
    });
    d.show();
     
    onbeforeremove
     
    對話框銷毀之前事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    onremove
     
    對話框銷毀事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    示例
     
    var d = dialog({
        onclose: function () {
            alert('對話框已經關閉');
        },
        onremove: function () {
            alert('對話框已經銷毀');
        },
        ok: function () {}
    });
    d.show();
     
    onfocus
     
    對話框獲取焦點事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    onblur
     
    對話框失去焦點事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    onreset
     
    對話框位置重置事件。
     
    回調函數this指向dialog對象。
     
    類型
     
    Function
     
    id
     
    設定對話框唯一標識。
     
    可防止重復 ID 對話框彈出。
    支持使用dialog.get(id)獲取某個對話框的接口。
    類型
     
    String
     
    示例
     
    dialog({
        id: 'id-demo',
        content: '再次點擊看看'
    }).show();
    dialog.get('id-demo').title('8888888888');
     
    屬性
    open
     
    判斷對話框是否被打開。
     
    returnValue
     
    對話框返回值。
     
    示例
     
    var d = dialog({
        title: '消息',
        content: '<input id="property-returnValue-demo" value="1" />',
        ok: function () {
            var value = $('#property-returnValue-demo').val();
            this.close(value);
            this.remove();
        }
    });
    d.addEventListener('close', function () {
        alert(this.returnValue);
    });
    d.show();
     
    其他
    自定義樣式
     
    打開配置文件: src/dialog-config.js,其中cssUir字段是 css 文件的路徑,innerHTML字段則是 artDialog 的模板。修改這兩個字段即可很方便的設計屬于自己的皮膚。
     
    一套皮膚可以添加不同的className實現多種狀態,可參考 skin 選項。

     

    ↓ 查看全文

    artdialog v6強大的模態對話框v6版api由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    artdialog v6強大的模態對話框v6版api-最新評論

    • 1997496854 廣東省 2019-09-22 02:05:33
      你不會和我一樣以為是破鏡重圓吧?不是的
    • 懶人建站網友 2016-05-26 09:38:36
      不知道能不能用,我的網站盈佳國際;www.w11w11.org 想要這個效果
    • 11 2016-05-26 09:05:36
      不知道能不能用,我的網站盈佳國際;www.w11w11.org 想要這個效果
    • 11 2015-12-26 12:12:43
      qq群
    • 11 2015-12-26 12:12:24
      文章不錯
    • 肪囟幽76 2015-10-29 07:14:39
      [疑問]
    • 11 2015-10-29 07:10:39
      [疑問]
    • 奶大的煩惱 2015-10-10 04:21:10
      [ali甩手]
    老子是皇帝在线客服