Layx 是一款仿Windows系統(tǒng)窗口的Web彈窗插件。gzip壓縮版僅 13.5kb，非常小巧。

 前言

大家好，我叫百小僧，是一名C#開發(fā)工程師，同時也擅長多種程序語言。平時的工作都是開發(fā)企業(yè)管理系統(tǒng)（ERP、CRM）。目前企業(yè)管理系統(tǒng)更多都是C/S架構(gòu)的，而且C/S架構(gòu)多窗口處理數(shù)據(jù)更加靈活。剛好公司為了順應潮流將現(xiàn)有的企業(yè)管理系統(tǒng)采用全新B/S架構(gòu)全新開發(fā)，我們最初的想法是在B/S結(jié)構(gòu)界面中采用類似瀏覽器多標簽頁模式進行設計，但是交給客戶試用時大部分都否決了，這些客戶一致認為客戶端多窗口操作模式比較好。所以還得按照傳統(tǒng)C/S模式進行開發(fā)。

然而，目前網(wǎng)頁彈窗使用最多的 layer插件沒能滿足我們的期望或者說沒有達到C/S架構(gòu)多窗口應有的水平。所以，本人利用五一放假期間親自操刀。

兩天后，Layx誕生了...

為什么起名叫 Layx 呢？其實很簡單，層的英文是layer，但是目前已經(jīng)有一個非常成熟的layer插件了，那我得起個牛逼的名字：LayerX 也就是比 layer 更加牛X的意思* ^ *。最后琢磨琢磨著發(fā)現(xiàn)名字還是有點長，也有點趁layer熱度的趕腳，所以干脆去掉了er，直接叫 LayX.

介紹

Layx 是一款純原生Javascript編寫的網(wǎng)頁彈窗插件，完全模仿Windows 10操作系統(tǒng)窗口進行設計開發(fā)。

目前Layx具備以下功能

• 支持文本窗口、頁面窗口（iframe）

• 支持最大化、最小化、恢復、關(guān)閉、置頂功能

• 支持窗口拖動及四個方向拖動控制

• 支持8個方向的窗口拖曳改變大?。ㄉ希?，下，左，左上，左下，右上，右下）

• 窗口最小寬度、最大寬度控制

• 窗口焦點激活控制

• 支持窗口陰影控制

• 窗口自動記錄上次位置

• 支持雙擊標題切換窗口

• 支持拖曳窗口到頂部自動最大化、最大化拖曳自動恢復正常窗口

• 支持MDI多級嵌套窗口

• 支持窗口外觀控制（背景顏色、透明度、邊框顏色、狀態(tài)欄等）

• 支持窗口圖標自定義、操作按鈕自定義

• 支持窗口之間相互通訊

• 支持窗口操作監(jiān)聽（最小化監(jiān)聽、最大化監(jiān)聽、恢復監(jiān)聽、置頂監(jiān)聽、拖動監(jiān)聽、改變大小監(jiān)聽、加載監(jiān)聽等）

• 支持窗口打開初始化位置控制（中間，左上、右上、左下、右下、自定義上邊和左邊）

• 支持窗口阻隔、遮罩

• 支持自動獲取iframe頁面標題填充窗口標題

• 支持窗口狀態(tài)攔截器，可以攔截窗口所有操作功能

• 支持窗口加載提示控制

• 支持窗口自動關(guān)閉控制

• 支持消息提示窗口（alert,confirm,prompt,loadding,error) 只完成了alert

• 兼容IE9+、Chrome、Edge、FF、Opera等現(xiàn)代主流瀏覽器

未來擁有的功能遠不止這些...

參數(shù)

// layx 默認配置參數(shù)

    var defaults = {
        id: 'layx', // 唯一id
        icon: '', // 圖標，設置false不啟用，這里支持html代碼
        title: '', // 窗口標題
        bgColor: '#fff', // 背景顏色，iframe頁面背景為透明有效
        borderColor: '#3baced', // 邊框顏色
        opacity: 1, // 透明度
        type: 'html', // 窗口類型：支持iframe,alert,confirm,error,load,prompt
        url: '', // iframe類型地址，type=iframe 時有效
        content: '', // 非iframe類型內(nèi)容，支持text,html
        width: 800, // 初始化寬度
        height: 600, // 初始化高度
        loaddingText: '內(nèi)容加載中...', // 內(nèi)容加載文本內(nèi)容，支持html
        position: 'center', // 初始化位置，支持'center', 'lt', 'rt', 'lb', 'rb'以及 [top,left]數(shù)組
        useFrameTitle: false, // 是否自動獲取iframe頁面標題填充窗口標題
        minWidth: 150, // 拖曳大小最小寬度
        minHeight: 150, // 拖曳大小最大寬度
        shadable: false, // 是否啟用窗口阻隔
        alwaysOnTop: false, // 是否總是置頂
        pinable: false, // 是否顯示圖釘按鈕，當 alwaysOnTop為true的時候，pinable自動顯示
        minimizable: true, // 是否允許最小化
        maximizable: true, // 是否允許最大化
        closable: true, // 是否允許關(guān)閉
        resizable: true, // 是否允許拖曳大小
        autoDestroy: false, // 窗口自動關(guān)閉，如果false不啟用，參數(shù)可以是毫秒時間，比如3000=>3秒
        // 拖曳方向控制
        resizeLimit: {
            t: true, // 是否允許上邊拖曳大小，true允許
            r: true, // 是否允許右邊拖曳大小，true允許
            b: true, // 是否允許下邊拖曳大小，true允許
            l: true, // 是否允許左邊拖曳大小，true允許
            lt: true, // 是否允許左上邊拖曳大小，true允許
            rt: true, // 是否允許右上邊拖曳大小，true允許
            lb: true, // 是否允許左下邊拖曳大小，true允許
            rb: true // 是否允許右下邊拖曳大小，true允許
        },
        movable: true, // 是否允許拖動窗口
        // 拖動窗口顯示，vertical為true表示禁止水平拖動，horizontal為true表示禁止垂直拖動
        moveLimit: {
            vertical: false, // 是否禁止垂直拖動，false不禁止
            horizontal: false, // 是否禁止水平拖動，false不禁止
            leftOut: true, // 是否允許左邊拖出，true允許
            rightOut: true, // 是否允許右邊拖出，true允許
            topOut: true, // 是否允許上邊拖出，true允許，此設置不管是false還是true，窗口都不能拖出窗體
            bottomOut: true, // 是否允許下邊拖出，true允許
        },
        statusBar: false, // 是否顯示狀態(tài)欄
        focusable: true, // 是否啟用iframe頁面點擊置頂
        // scaleAnimatable: false, // 是否啟用窗口縮放動畫，開發(fā)中....
        allowTitleDblclickToRestore: true, // 是否允許標題雙擊恢復窗體
        // parent: null, // 父窗體id，設置此選項時，窗體將在窗體內(nèi)部頁面打開（MDI模式）并和父窗口共用同一個生命周期；注意：只支持非跨域頁面。開發(fā)中...
        // menuItems: [], // 自定義頂部下拉菜單，支持無限極，開發(fā)中....
        // 攔截器，可以監(jiān)聽窗口各個狀態(tài)
        intercept: {
            // iframe頁面加載監(jiān)聽
            load: {
                // 加載之前，return false；禁止加載
                before: function(windowDom, winform) {},
                // 加載之后
                after: function(windowDom, winform, iframe) {}
            },
            // 最小化監(jiān)聽
            min: {
                // 最小化之前，return false；禁止最小化
                before: function(windowDom, winform) {},
                // 最小化之后
                after: function(windowDom, winform) {}
            },
            // 最大化監(jiān)聽
            max: {
                // 最大化之前，return false；禁止最大化
                before: function(windowDom, winform) {},
                // 最大化之后
                after: function(windowDom, winform) {}
            },
            // 恢復監(jiān)聽
            restore: {
                // 恢復之前，return false；禁止恢復
                before: function(windowDom, winform) {},
                // 恢復之后
                after: function(windowDom, winform) {}
            },
            // 關(guān)閉監(jiān)聽
            destroy: {
                // 關(guān)閉之前，return false；禁止關(guān)閉
                before: function(windowDom, winform) {},
                // 關(guān)閉之后
                after: function(windowDom, winform) {}
            },
            // 置頂監(jiān)聽
            pin: {
                // 置頂之前，return false；禁止操作
                before: function(windowDom, winform) {},
                // 置頂之后
                after: function(windowDom, winform) {}
            },
            // 移動窗口監(jiān)聽
            move: {
                // 移動之前
                before: function(windowDom, winform) {},
                // 移動中
                moveing: function(windowDom, winform) {},
                // 移動結(jié)束
                after: function(windowDom, winform) {}
            },
            // 拖曳窗口大小監(jiān)聽
            resize: {
                // 拖曳之前
                before: function(windowDom, winform) {},
                // 拖曳中
                resizing: function(windowDom, winform) {},
                // 拖曳結(jié)束
                after: function(windowDom, winform) {}
            }
        }
    };