代码拉取完成,页面将自动刷新
同步操作将从 百小僧/Layx 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Layx 网页弹窗最佳选择.
Layx 诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初,我们想在B/S架构上实现类C/S架构窗口功能,但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了 Layx 。
目前 Layx 拥有和C/S架构一样灵活的操作方式,支持网页多窗口、多任务协同操作,支持窗口各种事件。
原创作者
:百小僧开源协议
:MIT当前版本
:v2.0.1发布日期
:2018.05.15交流Q群
:18863883html:文本窗口
,url:页面窗口
,alert:提示窗口
,msg:消息窗口
,confirm:询问窗口
,prompt:输入窗口
,load:加载窗口
第一步:引入 layx.css / layx.min.css
<link href="layx.css" rel="stylesheet" type="text/css" />
第二步:引入 layx.js / layx.min.js
<script src="layx.js" type="text/javascript"></script>
第三步:打开一个窗口试试
layx.open({
id: 'new-window',
title: 'Layx 网页弹窗最佳选择.',
content: 'Hello World!'
});
id
:窗口唯一Id,String 类型。icon
:窗口图标,Boolean 或 String 类型。false:不启用窗口图标,支持 TEXT/HTML 字符串,默认值:空字符串title
:窗口标题,String 类型。支持 TEXT/HTML 字符串,默认值:空字符串width
:窗口初始化宽度,Number 或 百分比字符串 类型。支持 正整数或 百分比(如:50%
),默认值:800height
:窗口初始化高度,Number 或 百分比字符串 类型。支持 正整数或 百分比(如:50%
),默认值:600minWidth
:窗口最小宽度,Number 或 百分比字符串 类型。支持 正整数或 百分比(如:50%
),默认值:100minHeight
:窗口最小高度,Number 或 百分比字符串 类型。支持 正整数或 百分比(如:50%
),默认值:100position
:窗口初始化位置,Array[Number/Enum,Number/Enum] 或 Enum 类型。Enum 枚举类型有: ct:浏览器正中间
、lt:浏览器左上角
、rt:浏览器右上角
、lb:浏览器左下角
、rb:浏览器右下角
、lc:浏览器左中间
、tc:浏览器上中间
、rc:浏览器右中间
、bc:浏览器下中间
,也支持自定义上边、左边距离,如:[100,200]
,表示上边距离100px、左边距离200px,还可以更组合配置,如:[100,'tc']
,表示顶部中间并距离顶部 100px,默认值:ctcontrol
:是否显示控制栏(标题栏),Boolean 类型。默认值:truecontrolStyle
:控制栏(标题栏)样式,String 类型。支持 color:#f00;font-size:14px;
,默认值:空字符串bgColor
:窗口背景颜色,String 类型。支持 css 颜色值,透明颜色为:transparent
,默认值:#fffshadow
:是否显示窗口阴影,Boolean 类型。默认值:trueborder
:窗口边框,Boolean 或 String 类型。false:不启用边框,默认值:1px solid #3bacedtype
:窗口类型,Enum 类型。Enum枚举类型有:html:html窗口
、url:页面窗口
,默认值:htmlcontent
:窗口内容,String 或 HTMLElement 类型。type:'html'
时有效,支持 TEXT/HTML 字符串,同时也支持 HTMLElement 元素对象,默认值:空字符串url
:窗口页面地址,URL 类型, type:'url'
时有效,默认值:空字符串useFrameTitle
:是否自动获取 iframe 页面标题设置为当前窗口标题,Boolean 类型,只支持同域页面标题获取,默认值:falseopacity
:窗口透明度,Float 类型,取值:0~1
,0:完全不可见
,0.5:半透明
,1:可见
,默认值:1shadable
:是否显示窗口阻隔/遮罩,Boolean 类型。true:阻隔非当前窗口的所有操作直至关闭才释放,默认值:falseloaddingText
:窗口内容加载中提示符,String 或 HTMLElement 类型。支持 TEXT/HTML 字符串,同时也支持 HTMLElement 元素对象,默认值:内容正在加载中,请稍后...stickMenu
:是否显示置顶按钮,Boolean 类型。默认值:falsestickable
:是否允许置顶操作,Boolean 类型。默认值:trueminMenu
:是否显示最小化按钮,Boolean 类型。默认值:trueminable
:是否允许最小化操作,Boolean 类型。默认值:truemaxMenu
:是否显示最大化按钮,Boolean 类型。默认值:truemaxable
:是否允许最大化操作,Boolean 类型。默认值:truecloseMenu
:是否显示关闭按钮,Boolean 类型。默认值:trueclosable
:是否允许关闭操作,Boolean 类型。默认值:truerestorable
:是否允许恢复操作,Boolean 类型。默认值:trueresizable
:是否允许窗口拖曳调整大小,Boolean 类型。默认值:trueresizeLimit
:窗口拖曳调整大小方向限制,Object/Class 类型。可选值:
t
:是否限制上边拖曳调整大小,Boolean类型。默认值:falser
:是否限制右边拖曳调整大小,Boolean类型。默认值:falseb
:是否限制下边拖曳调整大小,Boolean类型。默认值:falsel:
:是否限制左边拖曳调整大小,Boolean类型。默认值:falselt:
:是否限制左上边拖曳调整大小,Boolean类型。默认值:falsert:
:是否限制右上边拖曳调整大小,Boolean类型。默认值:falselb:
:是否限制左下边拖曳调整大小,Boolean类型。默认值:falserb:
:是否限制右下边拖曳调整大小,Boolean类型。默认值:falsemovable
:是否允许窗口拖动位置,Boolean 类型。默认值:falsemoveLimit
:窗口拖动方向、范围限制,Object/Class 类型。可选值:
vertical
:是否禁止垂直拖动,Boolean类型。默认值:falsehorizontal
:是否禁止水平拖动,Boolean类型。默认值:falseleftOut
:是否允许窗口拖出浏览器左边可视区域,Boolean类型。默认值:truerightOut
:是否允许窗口拖出浏览器右边可视区域,Boolean类型。默认值:truetopOut
:是否允许窗口拖出浏览器上边可视区域,Boolean类型。默认值:true,不管这个值设置为true或false,窗口总时不能拖出浏览器可视区域顶部
bottomOut
:是否允许窗口拖出浏览器下边可视区域,Boolean类型。默认值:true,下边拖出时至少露出 15px 的窗口可视区域
autodestroy
:窗口自动关闭时间,Boolean 或 Number 类型。false:不自动关闭,Number 类型时表示 多少毫秒后关闭,如:5000,表示5秒后自动关闭窗口,默认值:falseautodestroyText
:窗口自动关闭提示文字(在窗口右下角显示),Boolean 或 String 类型。false:不显示,默认值:'<div style="padding: 0 8px; ">此窗口将在 <strong>{second}</strong> 秒内自动关闭.</div>'
,{second}
占位符代表 autodestroy
的秒数focusable
:窗口是否允许获取焦点,Boolean 类型。窗口获取焦点后会自动显示在顶层,默认值:true,只支持同域页面获取焦点
alwaysOnTop
:是否总是置顶,Boolean 类型。默认值 true,置顶之后将位于所有窗口之上(同级别除外)allowControlDbclick
:是否允许控制栏双击切换窗口大小,Boolean 类型。默认值:truestatusBar
:是否显示窗口状态栏,Boolean 或 String 或 HTMLElement 类型。支持 TEXT/HTML 字符串,同时也支持 HTMLElement 元素对象,默认值:falsestatusBarStyle
:窗口状态栏样式 ,String 类型。支持 color:#f00;font-size:14px;
,默认值:空字符串event
:窗口事件,Object/Class 类型。可选值:
onload
:内容加载事件,Object/Class 类型。可选值:
before
:内容加载之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
after
:内容加载之后,Function(layxWindow,winform) 类型onmin
:窗口最小化事件,Object/Class 类型。可选值:
before
:最小化之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
after
:最小化之后,Function(layxWindow,winform) 类型onmax
:窗口最大化事件,Object/Class 类型。可选值:
before
:最大化之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
after
:最大化之后,Function(layxWindow,winform) 类型onrestore
:窗口恢复事件,Object/Class 类型。可选值:
before
:恢复之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
after
:恢复之后,Function(layxWindow,winform) 类型ondestroy
:窗口关闭事件,Object/Class 类型。可选值:
before
:关闭之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
after
:关闭之后,Function() 类型onmove
:窗口拖动事件,Object/Class 类型。可选值:
before
:拖动之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
progress
:拖动中,Function(layxWindow,winform) 类型after
:拖动之后,Function(layxWindow,winform) 类型onresize
:窗口拖曳调整大小事件,Object/Class 类型。可选值:
before
:拖曳调整大小之前,Function(layxWindow,winform) 类型,设置 return false 禁止后续所有操作
progress
:拖曳调整大小中,Function(layxWindow,winform) 类型after
:拖曳调整大小之后,Function(layxWindow,winform) 类型layxWindow 是窗口的 HTMLElment对象
winform 是窗口信息对象,包含属性:
id
:窗口IdwindowId
:layxWindow 对象Idwindow
:layxWindow 对象createDate
:创建时间status
:窗口当前状态:可选值:normal:正常
、min:最小化
、max:最大化
type
:窗口类型,可选值:html:文本窗口
、url:页面窗口
area
:窗口位置信息,包含属性:
width
:窗口宽度height
:窗口高度minWidth
:窗口最小宽度minHeight
:窗口最小高度top
:窗口上边距离left
:窗口左边距离isStick
:是否置顶状态zIndex
:窗口层级别movable
:窗口是否可拖动位置moveLimit
:窗口拖动位置限制,包含属性:
vertical
:是否禁止垂直拖动horizontal
:是否禁止水平拖动leftOut
:是否允许窗口拖出浏览器左边可视区域rightOut
:是否允许窗口拖出浏览器右边可视区域topOut
:是否允许窗口拖出浏览器上边可视区域bottomOut
:是否允许窗口拖出浏览器下边可视区域resizable
:窗口是否可拖曳调整大小resizeLimit
:窗口拖曳调整大小限制,包含属性:
t
:是否限制上边拖曳调整大小r
:是否限制右边拖曳调整大小b
:是否限制下边拖曳调整大小l:
:是否限制左边拖曳调整大小lt:
:是否限制左上边拖曳调整大小rt:
:是否限制右上边拖曳调整大小lb:
:是否限制左下边拖曳调整大小rb:
:是否限制右下边拖曳调整大小stickable
:是否允许窗口置顶操作minable
:是否允许窗口最小化操作maxable
:是否允许窗口最大化操作restorable
:是否允许窗口恢复操作closable
:是否允许窗口关闭操作currentWindow
:当前窗口的 Window 对象event
:窗口事件,包含属性
onload
:内容加载事件
before
:内容加载之前after
:内容加载之后onmin
:窗口最小化事件
before
:最小化之前after
:最小化之后onmax
:窗口最大化事件
before
:最大化之前after
:最大化之后onrestore
:窗口恢复事件
before
:恢复之前after
:恢复之后ondestroy
:窗口关闭事件
before
:关闭之前after
:关闭之后onmove
:窗口拖动事件
before
:拖动之前progress
:拖动中after
:拖动之后onresize
:窗口拖曳调整大小事件
before
:拖曳调整大小之前progress
:拖曳调整大小中after
:拖曳调整大小之后var version = layx.v
:获取 layx 版本号,返回值:字符串var winform = layx.open(options)
:打开一个窗口,options:配置参数,返回值:winform 对象var winform = layx.html(id,title,content,options)
:打开一个文本窗口,id:窗口Id;title:窗口标题;content:窗口内容;options:配置参数,返回值:winform 对象var winform = layx.iframe(id,title,url,options)
:打开一个网页窗口,id:窗口Id;title:窗口标题;url:窗口地址;options:配置参数,返回值:winform 对象var windows = layx.windows()
:获取所有打开的窗口,返回值:{ 窗口Id:winform对象,窗口Id2:winform对象,...}var winform = layx.getWindow(id)
:获取当前窗口 winform 对象,id:窗口Idlayx.destroy(id)
:关闭窗口,id:窗口Idlayx.max(id)
:最大化窗口,id:窗口Idlayx.setTitle(id,title,useFrameTitle)
:设置窗口标题,id:窗口Id;title:标题,支持html;useFrameTitle:是否自动获取 iframe页面标题填充,默认值:falselayx.flicker(id)
:闪烁窗口,id:窗口Idlayx.restore(id)
:恢复窗口,id:窗口Idlayx.updateZIndex(id)
:更新窗口层级别,id:窗口Idlayx.updateMinLayout()
:更新窗口最小化排版layx.stickToggle(id)
:窗口置顶切换,id:窗口Idlayx.setPosition(id,position)
:设置窗口位置,id:窗口Id;position:见参数中positionvar iframe = layx.getChildContext(id)
:获取 iframe 页面 Window 对象,id:窗口Id,窗口通讯
var iframeParent = layx.getParentContext(id)
:获取iframe 页面上级 Window 对象 ,id:窗口Id,窗口通讯
layx.setContent(id, content)
:设置文本窗口内容,id:窗口Id;content:String 或 HTMLElementlayx.setUrl(id,url)
:设置页面窗口url地址,id:窗口Id;url:网址 或 文件路径layx.destroyAll()
:关闭所有窗口var winform = layx.msg(msg,options)
:打开一个消息框,msg,消息,String类型;options:配置参数var winform = layx.alert(title,msg,yes,buttons,options)
:打开一个提示框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id){}
;buttons,Object类型,可选值:[{ label:'', callback:function(id){}}]
;options:配置参数var winform = layx.confirm(title,msg,yes,buttons,options)
:打开一个询问框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id){}
;buttons,Object类型,可选值:[{ label:'', callback:function(id){}}]
;options:配置参数var winform = layx.prompt(title,msg,yes,buttons,options)
:打开一个输入框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id,value,textarea){}
;buttons,Object类型,可选值:[{ label:'', callback:function(id){}}]
;options:配置参数var promptTextare = layx.getPromptTextArea(id)
:获取输入框 textarea
对象 ,id:窗口Id,通常在 prompt 输入框点击按钮回调函数中使用var winform = layx.load(id,msg,options)
: 打开一个加载框,id:窗口Id;msg,消息,String类型;options:配置参数默认窗口带有点击事件,如果窗口内部包含其他事件打开新窗口,该事件需要取消向上冒泡,如:
document.getElementById('btn').onclick=function(e){
e=e||window.event;
// 打开新窗口代码
// 停止冒泡
e.stopPropagation();
}
# 2018.05.15 v2.0.1 发布
- [新增] var winform = layx.html(id,title,content,options) 快捷打开文本窗口方法
- [新增] var winform = layx.iframe(id,title,url,options) 快捷打开网页窗口方法
- [新增] 窗口自动关闭文本可自定义功能:autodestroyText
- [新增] 打开一个存在的窗口时窗口闪烁获取焦点
- [更新] 调整最小化后显示宽度为:240px
- [修复] 点击文本窗口内容无法置顶 bug
- [修复] 置顶按钮点击切换 title 提示 bug
- [修复] 置顶层带有阻隔层时没有阻隔的bug
# 2018.05.12 v2.0.0 发布
- [新增] v2.0.0 正式发布
# 2018.05.06 v1.0.0 发布
- [新增] v1.0.0 正式发布
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。