頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

純JS實現 Windows 界面的網頁彈窗 Layx

窗口特效 HTML我幫您 2月前  次瀏覽

Layx 是一款仿Windows系統窗口的Web彈窗插件。gzip壓縮版僅 13.5kb,非常小巧。

 前言

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



介紹

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

純JS實現 Windows 界面的網頁彈窗 Layx 

目前Layx具備以下功能

  • 支持文本窗口、頁面窗口(iframe)

  • 支持最大化、最小化、恢復、關閉、置頂功能

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

  • 支持8個方向的窗口拖曳改變大小(上,右,下,左,左上,左下,右上,右下)

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

  • 窗口焦點激活控制

  • 支持窗口陰影控制

  • 窗口自動記錄上次位置

  • 支持雙擊標題切換窗口

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

  • 支持MDI多級嵌套窗口

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

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

  • 支持窗口之間相互通訊

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

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

  • 支持窗口阻隔、遮罩

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

  • 支持窗口狀態攔截器,可以攔截窗口所有操作功能

  • 支持窗口加載提示控制

  • 支持窗口自動關閉控制

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

  • 兼容IE9+、Chrome、Edge、FF、Opera等現代主流瀏覽器

// layx 默認配置參數

    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類型內容,支持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, // 是否允許拖曳大小
        autoDestroy: false, // 窗口自動關閉,如果false不啟用,參數可以是毫秒時間,比如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, // 是否顯示狀態欄
        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) {}
            }
        }
    };


相關鏈接

發表評論

经典黑杰克游戏 爸爸赚钱不容易歌 美国赚钱回来花 娱网棋牌游戏下载安装 福彩欢乐生肖走势图 双色球复式最新中奖加奖规则 内蒙古十一选五预测软件 2019宝宝浙江游戏下载 3d赚钱吗 河南22选5好运3奖金 街机电玩捕鱼游戏加盟 广州福彩36选7中奖查询 741彩票 发表视频的人怎么赚钱的 建迅教育加盟赚钱吗 哪个台能看大乐透直播 6场半全场胜负