Layx——网页弹窗最佳选择.
开源地址:https://gitee.com/monksoul/LayX
文档地址:http://baisoft.gotoip11.com/layx/doc/
大家好,我叫百小僧,是一名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页面标题填充窗口标题
支持窗口状态拦截器,可以拦截窗口所有操作功能
支持窗口加载提示控制
兼容IE9+、Chrome、Edge、FF、Opera等现代主流浏览器
未来拥有的功能远不止这些...
// layx 默认配置参数 var defaults = { id: 'layx', // 唯一id icon: '', // 图标,设置false不启用,这里支持html代码 title: '', // 窗口标题 bgColor: '#fff', // 背景颜色,iframe页面背景为透明有效 borderColor: '#3baced', // 边框颜色 opacity: 1, // 透明度 type: 'iframe', // 窗口类型:支持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, // 是否允许拖曳大小 // 拖曳方向控制 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) {} } } };
Layx——网页弹窗最佳选择.的更多相关文章
- QQ网页弹窗
QQ网页弹窗 1.网址:http://shang.qq.com/v3/index.html 2.选推广工具,提示语随便写 3.建一个html 网页,并把代码拷进去. 4.双击网页,就可以打开了.(用E ...
- 3星|《商业周刊中文版:2017商业人物(下)》:酒店才应该是出行住宿的最佳选择,Airbnb不是
商业周刊/中文版:2017商业人物(下) 对一些知名商业人物的访谈的合辑. 总体评价3星,有一些参考价值. 以下是本期一些内容的摘抄: 1:段永平是一位隐秘的亿万富豪,去年,他创立的智能手机姊妹品牌O ...
- Forrester:华为云容器是容器混合云最佳选择
近日,国际权威咨询机构Forrester发布<The Forrester New WaveTM: Public Cloud Enterprise Container Platforms, Q3 ...
- CSS 网页字体最佳实践
一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...
- 助力ASP.NET Core 2.1开发!Layx 企业级弹窗插件发布!
我们在开发B/S架构企业管理系统时经常用到弹窗.目前市场上主要有两大弹窗:layer/artdialog,这两款做的都非常的棒.由于我们ERP系统比较复杂.需要能够拥有和Windows弹窗一样的弹窗组 ...
- http网页性能最佳实践
你愿意为打开一个网页等待多长时间?我一秒也不愿意等.但是事实上大多数网站在响应速度方面都让人失望.现在越来越多的人开始建立自己的网站,博客,你的网页响应速度如何呢?在这篇文章中我们来介绍一下提高网页性 ...
- [JS]九种网页弹窗代码
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"><!--window.open ("pag ...
- Envoy如何打败Linkerd成为L7负载平衡器的最佳选择?
本文转自:http://www.servicemesh.cn/?/article/41 作者:MIKE WHITE 翻译:姚炳雄 原文:Using Envoy to Load Balance gRPC ...
- PAT 甲级 1068 Find More Coins (30 分) (dp,01背包问题记录最佳选择方案)***
1068 Find More Coins (30 分) Eva loves to collect coins from all over the universe, including some ...
随机推荐
- java编程小记
http://blog.csdn.net/pipisorry/article/details/51050189 很久没写java,什么都不会了,小记一下. 类型转换 字符串转int类型:Integer ...
- 网站开发进阶(四十三)html中,路径前加“/” 与不加“/”的区别
网站开发进阶(四十三)html中,路径前加"/" 与不加"/"的区别 前言 <script src="js/downloadify.js&quo ...
- java 之容器
在Java中,我们想要保存对象可以使用很多种手段.我们之前了解过的数组就是其中之一.但是数组具有固定的尺寸,而通常来说,程序总是在运行时根据条件来创建对象,我们无法预知将要创建对象的个数以及类型,所以 ...
- 快速高分辨率图像的立体匹配方法Effective large scale stereo matching
<Effective large scale stereo matching> In this paper we propose a novel approach to binocular ...
- 一个Bootstrap的例子--关于validate
</pre><pre name="code" class="html"><%@ page language="java& ...
- 安装mysql到服务器的linux环境下
1·安装mysql 命令:yum -y install httpd php mysql mysql-server 2·配置mysql 配置开机启动服务 /sbin/chkconfig --add my ...
- Socket编程实践(1) --TCP/IP简述
ISO的OSI OSI(open system interconnection)开放系统互联模型是由ISO国际标准化组织定义的网络分层模型,共七层, 从下往上为: OSI七层参考模型 物理层(Phys ...
- 【一天一道LeetCode】#71. Simplify Path
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...
- 敏捷测试(8)--ATDD整体研发流程
ATDD整体研发流程 有了前面的基于story的敏捷基础,接下来来介绍一下验收测试驱动开发的整个流程. 名词解释: ATD,即验收测试设计(acceptancetest design) PM,即需求整 ...
- 【翻译】Ext JS最新技巧
原文:Top Support Tips Mitchell Simoens:控制滚动指示器的自动隐藏 Sencha Touch有一个跨平台的,在所有平台看起来和工作效果都一样的滚动条.两条轴(x和y,水 ...