仿真 Windows 界面的网页弹窗 Layx

MIT
JavaScript 查看源码»
跨平台
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) {}
            }
        }
    };
的码云指数为
超过 的项目
加载中

评论(27)

lichoking
lichoking
简单试了下,弹窗默认固定大小。翻了文档和示例都没找到怎么配置自适应大小。
伟大的旗哥
伟大的旗哥

引用来自“百小僧”的评论

#Layx# Layx 上榜了,多多支持。

引用来自“伟大的旗哥”的评论

小僧,怎么样设置每次新打开都是默认大小呢?
😆有个属性可以设置的。不过我直接改了源码里的默认true
伟大的旗哥
伟大的旗哥

引用来自“百小僧”的评论

#Layx# Layx 上榜了,多多支持。
小僧,怎么样设置每次新打开都是默认大小呢?
百小僧
百小僧 软件作者
#Layx# Layx 上榜了,多多支持。
xiaoyan2015
xiaoyan2015
这个弹窗貌似很强大,而且UI也挺不错的。不知道兼容性及扩展性怎么样。 https://www.cnblogs.com/xiaoyan2017/p/10227798.html
有福
有福
很卡啊 喂
百小僧
百小僧 软件作者
#Layx# Layx会是您下一次弹窗的选择吗?
BossKiller
BossKiller
prompt 可以增加一个选项,设置输入框是textarea还是input text吗?另外,prompt方法,在输入框内输入一些内容直接打Enter,获取的输入字串为空?
小涵ky
支持微信小程序吗?@百小僧
开普勒452b
开普勒452b
看起来不错,继续加油

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

Layx 是一款在浏览器上实现桌面弹窗的强大弹窗组件,基于原生Javascript开发,不依赖任何第三方框架。GZIP版本仅仅13k多。 Layx 发布短短5个多月,已经收获了不少关注和用户使用,开发群目前...

2018/11/03 08:50

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

她是谁 Layx 是面向Web的下一代弹窗组件。Gzip压缩版仅 13.5kb,非常小巧。 她体积小、无依赖、功能强、易拓展。 她拥有和C/S弹窗一样的体验,又兼容触摸屏手势操作。 她可能是目前互联网上功...

2018/10/10 09:14

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

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 Layx和Layer的区别 Layer 是贤心基于JQuery开发的优秀前端框架,基本实现了我们弹窗需要的常规功能。 Layx是在Layer无法满足企业级系...

2018/09/29 12:46

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

从2018年05月01号v1.0.0版本发布到现在,Layx丰富强大的功能吸引多越来越多的开发者,目前码云关注量已突破720个star,Layx 相关群也破千人大群。 在这里,非常感谢大家的支持! Layx 是基于...

2018/09/17 12:46

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

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 预览地址:http://layx.baiqian.ltd/ 更新日志 - [新增] options.existFlicker参数,可以配置是否开启窗口存在闪烁 - [新增] o...

2018/07/17 17:12

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

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 预览地址 http://layx.baiqian.ltd/ 更新日志 - [新增] 有操作按钮的窗口都能触发键盘回车操作 - [新增] 新增 tip 提示窗口 ...

2018/06/21 09:51

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

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 此次版本做了大量的UI优化、去除默认的Windows风格,采用非常柔和的Web风格。 预览地址 http://monksoul.gitee.io/layx/doc/ 更新日...

2018/06/04 12:14

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

我们在开发B/S架构企业管理系统时经常用到弹窗、目前市场上主要有两大弹窗:layer/artdialog,这两款做的都非常的棒。由于我们ERP系统比较复杂、需要能够拥有和Windows弹窗一样的弹窗组件。这...

2018/06/02 10:09

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

Layx 企业级弹窗组件。 gzip压缩版仅 13.5kb,非常小巧。 Layx 是一款B/S架构弹窗组件。集成了Windows优秀的弹窗功能以及支持触摸操作,是企业管理系统开发首选弹窗组件。 目前 Layx发布整整...

2018/05/31 09:24

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

Layx 一款再熟悉不过的Web弹窗插件。 gzip压缩版仅 13.5kb,非常小巧。 更新日志 - [新增] 提示框图标设置 - [新增] options.dialogIcon,设置提示框图标,支持alert,confirm,msg - [...

2018/05/29 12:56

没有更多内容

加载失败,请刷新页面

暂无问答

2018 年度新增开源软件排行榜之国产 TOP 50

2018 年开源中国社区「新增」开源软件排行榜之国产 TOP 50 终于发布了! 榜单根据 2018 年开源中国社区新收录的开源项目的关注度、活跃度,以及所属分类整理而来,相信在一定程度上反映了国内...

01/23 09:43
768
3

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部