開源文檔地址

開源地址：https://gitee.com/monksoul/LayX

文檔地址：http://baisoft.gotoip11.com/layx/doc/

前言

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

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

兩天後，Layx誕生了...

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

功能介紹

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

目前Layx具備以下功能

• 支持文本窗口、頁面窗口（iframe）
• 支持最大化、最小化、恢復、關閉、置頂功能
• 支持窗口拖動及四個方向拖動控制
• 支持8個方向的窗口拖曳改變大小（上，右，下，左，左上，左下，右上，右下）
• 窗口最小寬度、最大寬度控制
• 窗口焦點激活控制
• 支持窗口陰影控制
• 窗口自動記錄上次位置
• 支持雙擊標題切換窗口
• 支持拖曳窗口到頂部自動最大化、最大化拖曳自動恢復正常窗口
• 支持MDI多級嵌套窗口
• 支持窗口外觀控制（背景顏色、透明度、邊框顏色、狀態欄等）
• 支持窗口圖標自定義、操作按鈕自定義
• 支持窗口之間相互通訊
• 支持窗口操作監聽（最小化監聽、最大化監聽、恢復監聽、置頂監聽、拖動監聽、改變大小監聽、加載監聽等）
• 支持窗口打開初始化位置控制（中間，左上、右上、左下、右下、自定義上邊和左邊）
• 支持窗口阻隔、遮罩
• 支持自動獲取iframe頁面標題填充窗口標題
• 支持窗口狀態攔截器，可以攔截窗口所有操作功能
• 支持窗口加載提示控制
• 兼容IE9+、Chrome、Edge、FF、Opera等現代主流瀏覽器

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

配置參數

// layx 默認配置參數

    var defaults = {
        id: ‘layx‘, // 唯一id
        icon: ‘‘, // 圖標，設置false不啟用，這裏支持html代碼
        title: ‘‘, // 窗口標題
        bgColor: ‘#fff‘, // 背景顏色，iframe頁面背景為透明有效
        borderColor: ‘#3baced‘, // 邊框顏色
        opacity: 1, // 透明度
        type: ‘iframe‘, // 窗口類型：支持iframe,alert,confirm,error,load,prompt
        url: ‘‘, // iframe類型地址，type=iframe 時有效
        content: ‘‘, // 非iframe類型內容，支持text,html
        width: 800, // 初始化寬度
        height: 600, // 初始化高度
        loaddingText: ‘內容加載中...‘, // 內容加載文本內容，支持html
        position: ‘center‘, // 初始化位置，支持‘center‘, ‘lt‘, ‘rt‘, ‘lb‘, ‘rb‘以及 [top,left]數組
        useFrameTitle: false, // 是否自動獲取iframe頁面標題填充窗口標題
        minWidth: 150, // 拖曳大小最小寬度
        minHeight: 150, // 拖曳大小最大寬度
        shadable: false, // 是否啟用窗口阻隔
        alwaysOnTop: false, // 是否總是置頂
        pinable: false, // 是否顯示圖釘按鈕，當 alwaysOnTop為true的時候，pinable自動顯示
        minimizable: true, // 是否允許最小化
        maximizable: true, // 是否允許最大化
        closable: true, // 是否允許關閉
        resizable: true, // 是否允許拖曳大小
        // 拖曳方向控制
        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, // 是否顯示狀態欄
        focusable: true, // 是否啟用iframe頁面點擊置頂
        // scaleAnimatable: false, // 是否啟用窗口縮放動畫，開發中....
        allowTitleDblclickToRestore: true, // 是否允許標題雙擊恢復窗體
        // parent: null, // 父窗體id，設置此選項時，窗體將在窗體內部頁面打開（MDI模式）並和父窗口共用同一個生命周期；註意：只支持非跨域頁面。開發中...
        // menuItems: [], // 自定義頂部下拉菜單，支持無限極，開發中....
        // 攔截器，可以監聽窗口各個狀態
        intercept: {
            // iframe頁面加載監聽
            load: {
                // 加載之前，return false；禁止加載
                before: function(windowDom, winform) {},
                // 加載之後
                after: function(windowDom, winform, iframe) {}
            },
            // 最小化監聽
            min: {
                // 最小化之前，return false；禁止最小化
                before: function(windowDom, winform) {},
                // 最小化之後
                after: function(windowDom, winform) {}
            },
            // 最大化監聽
            max: {
                // 最大化之前，return false；禁止最大化
                before: function(windowDom, winform) {},
                // 最大化之後
                after: function(windowDom, winform) {}
            },
            // 恢復監聽
            restore: {
                // 恢復之前，return false；禁止恢復
                before: function(windowDom, winform) {},
                // 恢復之後
                after: function(windowDom, winform) {}
            },
            // 關閉監聽
            destroy: {
                // 關閉之前，return false；禁止關閉
                before: function(windowDom, winform) {},
                // 關閉之後
                after: function(windowDom, winform) {}
            },
            // 置頂監聽
            pin: {
                // 置頂之前，return false；禁止操作
                before: function(windowDom, winform) {},
                // 置頂之後
                after: function(windowDom, winform) {}
            },
            // 移動窗口監聽
            move: {
                // 移動之前
                before: function(windowDom, winform) {},
                // 移動中
                moveing: function(windowDom, winform) {},
                // 移動結束
                after: function(windowDom, winform) {}
            },
            // 拖曳窗口大小監聽
            resize: {
                // 移動之前
                before: function(windowDom, winform) {},
                // 移動中
                resizing: function(windowDom, winform) {},
                // 移動結束
                after: function(windowDom, winform) {}
            }
        }
    };

Layx——網頁彈窗最佳選擇.