Layx 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Layx 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Layx 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网页组件
开源组织
地区 国产
投 递 者 百小僧
适用人群 未知
收录时间 2018-05-06

软件简介

Layx 是一款仿Windows系统窗口的Web弹窗插件。gzip压缩版仅 13.5kb,非常小巧。

 前言

大家好,我叫百小僧,是一名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页面标题填充窗口标题

  • 支持窗口状态拦截器,可以拦截窗口所有操作功能

  • 支持窗口加载提示控制

  • 支持窗口自动关闭控制

  • 支持消息提示窗口(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) {}
            }
        }
    };
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(28)
发表于大前端专区
2018/11/03 08:50

Layx Web 弹窗组件 v2.5.4 常规更新

Layx 是一款在浏览器上实现桌面弹窗的强大弹窗组件,基于原生Javascript开发,不依赖任何第三方框架。GZIP版本仅仅13k多。 Layx 发布短短5个多月,已经收获了不少关注和用户使用,开发群目前也持续活越中,已逾1000人大群。 演示官网 http://layx.baiqian.ltd/ 本次更新 - [修复] 关闭窗口、最小化窗口不能恢复页面滚动动态bug 开源地址 Gitee:https://gitee.com/monksoul/LayX Github:https://github.com/MonkSoul/Layx/ 如...

3
32
发表于大前端专区
2018/10/10 09:14

下一代 Web 弹窗 Layx v2.5.3 更新,大大提升窗口性能

她是谁 Layx 是面向Web的下一代弹窗组件。Gzip压缩版仅 13.5kb,非常小巧。 她体积小、无依赖、功能强、易拓展。 她拥有和C/S弹窗一样的体验,又兼容触摸屏手势操作。 她可能是目前互联网上功能最全的Web弹窗了。 我的匠心之作——她还年轻,需要你慢慢品味。 去了解 http://layx.baiqian.ltd/ 新特性 - [更新] 大大优化拖动窗口、拖曳大小性能 - [修复] 储存窗口大小位置bug,感谢 QQ:315976369 找到她 Gite...

41
38
发表于大前端专区
2018/09/29 12:46

企业级弹窗 Layx v2.5.2 常规更新

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 Layx和Layer的区别 Layer 是贤心基于JQuery开发的优秀前端框架,基本实现了我们弹窗需要的常规功能。 Layx是在Layer无法满足企业级系统弹窗从而开发的Web弹窗,并且不依赖任何第三方Javascript框架,目前实现了C/S弹窗95%的功能,也兼容了移动端手势操作。 目前Layx的功能远在Layer之上,是目前企业级B/S系统弹窗的首选。 演示地址 http://layx.baiqian.ltd/ 更新日志 ...

29
30
发表于大前端专区
2018/09/17 12:46

“山竹”狂吹不止,码农加班不停!Layx v2.5.0 发布

从2018年05月01号v1.0.0版本发布到现在,Layx丰富强大的功能吸引多越来越多的开发者,目前码云关注量已突破720个star,Layx 相关群也破千人大群。 在这里,非常感谢大家的支持! Layx 是基于原生Javascript开发的Web弹窗插件,目前已经实现了C/S架构弹窗的90%以上的功能,是B/S企业管理系统(ERP/OA/CRM/MES等)开发首选。 Layx 非常小巧,GZIP版本仅 13.5kb,支持移动端触摸屏操作。 Layx 文档地址 http://layx.baiqian.ltd/ L...

29
22
发表于大前端专区
2018/07/17 17:12

Layx 企业级弹窗 v2.4.9 版本发布

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 预览地址:http://layx.baiqian.ltd/ 更新日志 - [新增] options.existFlicker参数,可以配置是否开启窗口存在闪烁 - [新增] options.enableDomainFocus参数,设置是否支持跨域点击,默认为true,建议设置为false - [新增] 强制关闭窗口方法:layx.destroy(id,params,force),设置force为true表示强制关闭 - [更新] 代码优化 - [修复] alert窗口滚动条 b...

13
20
发表于大前端专区
2018/06/21 09:51

Layx v2.4.8 发布!支持按钮“键盘回车”触发

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 预览地址 http://layx.baiqian.ltd/ 更新日志 - [新增] 有操作按钮的窗口都能触发键盘回车操作 - [新增] 新增 tip 提示窗口 - [新增] options.focusToReveal 参数,设置是否获取焦点后前置 - [新增] options.dialogType 内置参数,配置alert,prompt,confirm支持Enter回车键触发按钮 - [更新] 输入框prompt快捷键为:Ctrl+Enter,避免和多行文本tex...

9
11
发表于大前端专区
2018/06/04 12:14

Layx v2.4.0 发布,终于~终于~支持皮肤功能了!!!

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 此次版本做了大量的UI优化、去除默认的Windows风格,采用非常柔和的Web风格。 预览地址 http://monksoul.gitee.io/layx/doc/ 更新日志 - [新增] options.skin 内置皮肤设置,支持default、cloud、turquoise、river、asphalt - [新增] 自定义皮肤功能 - [新增] options.borderRadius 圆角设置 - [新增] 阻隔层禁止右键,避免恶意修改 - [更新] 网页窗口加...

28
16
发表于大前端专区
2018/06/02 10:09

企业级弹窗组件:Layx v2.3.5 LTS版本发布

我们在开发B/S架构企业管理系统时经常用到弹窗、目前市场上主要有两大弹窗:layer/artdialog,这两款做的都非常的棒。由于我们ERP系统比较复杂、需要能够拥有和Windows弹窗一样的弹窗组件。这两款目前不足以担当的起。一个企业级的ERP弹窗至少需要以下特点: 1、支持跨域获取焦点 2、支持窗口自动记录位置 3、支持8个方向拖曳调整窗口位置 4、支持触摸屏操作、包括移动端、触摸屏电脑 5、支持丰富的弹窗类型、提示框、对话框、消...

10
30
发表于大前端专区
2018/05/31 09:24

满月了!Layx v2.3.2 新增加载动画、窗口组预加载设置

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 Layx 是一款B/S架构弹窗组件。集成了Windows优秀的弹窗功能以及支持触摸操作,是企业管理系统开发首选弹窗组件。 目前 Layx发布整整31天、提交了423次功能新增及修复。Gitee和Github关注量也破千。QQ交流群也是千人大群。如果您需要开发企业管理系统不妨试试Layx。 预览地址:http://monksoul.gitee.io/layx/doc/ 更新日志 - [新增] 窗口组 options.preload参数,可以...

21
11
发表于大前端专区
2018/05/29 12:56

弹窗组件 Layx v2.2.9 发布,支持触摸操作和图标设置

Layx 一款再熟悉不过的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 更新日志 - [新增] 提示框图标设置 - [新增] options.dialogIcon,设置提示框图标,支持alert,confirm,msg - [新增] 按钮title提示 - [新增] ESC关闭获取焦点的窗口 - [新增] options.escKey 开关,设置是否启用esc关闭窗口功能 - [新增] event.ondestroy.before参数 escKey,表示是否按下esc键 - [新增] 自动判断拷贝DOM元素如果d...

33
12
发表于大前端专区
2018/05/28 06:37

弹窗组件 Layx v2.2.5 稳定版发布,支持触摸屏操作!

Layx 一款再熟悉不过的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 内置特性 纯原生Javascript实现,不依赖任何第三方框架 支持IE10+(含IE10)、Chrome、Firefox、Opera、Edge等主流浏览器 支持多种窗口类型:文本窗口,页面窗口,窗口组,提示窗口,消息窗口,询问窗口,输入窗口,加载窗口、浮动窗口、置顶窗口、倒计时窗口 支持窗口最大化、最小化、恢复、置顶、关闭控制及事件监听 支持窗口阻隔、窗口闪烁功能 支持窗口...

3
6
发表于大前端专区
2018/05/25 10:39

弹窗插件 Layx v2.2.0 新增浮动窗口、窗口组合并等功能

Layx 一款熟悉但又不太一样的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 更新日志 - [新增] 浮动窗口类型 - [新增] 浮动窗口options.floatTarget参数,floatTarget 用来设置吸附到那个元素上 - [新增] options.mergeTitle 参数,表示窗口组标题是合并还是不合并 - [新增] 窗口调试信息按钮,开发阶段非常方便调试工作 - [新增] 窗口最小化状态下不显示置顶按钮、调试按钮 - [新增] 更新浮动窗口位置方法...

24
11
发表于大前端专区
2018/05/24 10:13

弹窗插件 Layx v2.1.5 版本发布,UI 大量优化

Layx 一款熟悉但又不太一样的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 更新日志 - [新增] 提示框、消息框、询问框、输入框、加载框 宽度高度自适应功能 - [新增] buttons配置参数id、classes、style属性、提供按钮更多定制功能 - [新增] buttons配置参数callback中提供按钮自身DOM对象 - [新增] ondestroy.before回调参数inside参数,用来判断是点击内置按钮关闭还是用户调用关闭 - [新增] ondestroy.bef...

26
24
发表于大前端专区
2018/05/23 09:46

弹窗插件 Layx v2.1.3 版本发布,新增诸多特性

Layx 一款熟悉但又不太一样的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 更新日志 - [新增] storeStatus 配置参数,记录窗口位置信息,即使刷新页面还能保存(基于sessionStorage存储) - [新增] isOverToMax 配置参数、控制初始化窗口时 超出可视区域自动最大化 - [新增] 支持跨域网站获取焦点事件 - [新增] onfocus焦点事件监听 - [更新] 拖动窗口、拖曳窗口流畅度 - [更新] layx.css样式,添加各个...

19
11
发表于大前端专区
2018/05/20 09:26

对不起,我来晚了!Layx v2.1.0 稳定版发布

Layx v2.1.0 稳定版发布了,完善了所有示例、文档以及修复了大量 bug 文档地址: http://monksoul.gitee.io/layx/doc/ 开源地址: https://gitee.com/monksoul/LayX 更新日志: # 2018.05.19 v2.1.0 发布 - [新增] cloneElementContent 参数,可配置 HTMLElement 是拷贝模式还是取用模式 - [新增] 多行字符串处理方法 - [新增] 内容正在加载中动态提示 - [新增] 重载页面窗口方法 - [更新] 提示框、询问...

58
34
发表于大前端专区
2018/05/18 13:09

Layx 原生网页弹窗插件 v2.0.5 发布,新增窗口组

Layx 原生网页弹窗插件 v2.0.5 发布,新增窗口组,具体更新内容如下: [新增] 窗口组类型 [新增] buttons 配置属性 [新增] frames,frameIndex 配置参数 [新增] setGroupContent,setGroupTitle,setGroupUrl,setGroupIndex,group方法 [更新] 提示框、询问框、输入框代码 [更新] layx.css 样式表 [修复] 最小化样式 下载地址: Source code...

5
4
发表于大前端专区
2018/05/16 19:24

Layx 原生网页弹窗插件 v2.0.3 发布

更新内容 - [新增] style 参数,可以嵌入css样式表 - [更新] 优化窗口拖动、拖曳性能,支持变态拖曳 - [修复] 多窗口拖动层、拖曳层调整大小冲突bug - [修复] 部分浏览器页面窗口不能自适应 bug - [修复] 低版本Chrome 浏览器bug 预览地址 http://monksoul.gitee.io/layx/doc/ 文档地址 https://gitee.com/monksoul/LayX 开源地址 https://gitee.com/monksoul/LayX...

9
14
发表于大前端专区
2018/05/15 00:35

Layx 原生网页弹窗插件 v2.0.1 发布

v2.0.1 更新日志: [新增] var winform = layx.html(id,title,content,options) 快捷打开文本窗口方法 [新增] var winform = layx.iframe(id,title,url,options) 快捷打开网页窗口方法 [新增] 窗口自动关闭文本可自定义功能:autodestroyText [新增] 打开一个存在的窗口时窗口闪烁获取焦点 [更新] 调整最小化后显示宽度为:240px [修复] 点击文本窗口内容无法置顶 bug [修复] 置顶按钮点击切换 title 提示 bug [修复] 置顶层带有...

11
7
发表于大前端专区
2018/05/06 17:55

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

前言 大家好,我叫百小僧,是一名C#开发工程师,同时也擅长多种程序语言。平时的工作都是开发企业管理系统(ERP、CRM)。目前企业管理系统更多都是C/S架构的,而且C/S架构多窗口处理数据更加灵活。刚好公司为了顺应潮流将现有的企业管理系统采用全新B/S架构全新开发,我们最初的想法是在B/S结构界面中采用类似浏览器多标签页模式进行设计,但是交给客户试用时大部分都否决了,这些客户一致认为客户端多窗口操作模式比较好。所以...

12
28
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
28 评论
192 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部