同步操作将从 百小僧/Layx 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Layx 网页弹窗最佳选择.
大家好,我叫百小僧,是一名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具备以下功能
未来拥有的功能远不止这些...
正在整理...
// 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) {}
}
}
};
正在整理...
正在整理...
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。