Layx v1.0.0 发布，仿真 Windows 界面的网页弹窗组件

内容简介：前言 大家好，我叫百小僧，是一名C#开发工程师，同时也擅长多种程序语言。平时的工作都是开发企业管理系统（ERP、CRM）。目前企业管理系统更多都是C/S架构的，而且C/S架构多窗口处理数据更加灵活。刚好公司为了顺...

前言

大家好，我叫百小僧，是一名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操作系统窗口进行设计开发。

• 支持文本窗口、页面窗口（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) {}
            }
        }
    };

演示

http://baisoft.gotoip11.com/layx/doc/

开源

Gitee：https://gitee.com/monksoul/LayX

【声明】文章转载自：开源中国社区 [http://www.oschina.net]

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• ModelSim仿真入门
• OpenModelica仿真
• MATLAB与SIMULINK仿真
• 人工智能生成仿真人脸
• MATLAB电路仿真搭建教程
• 仿真环境/流量回放/全链路压测

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。