代码拉取完成,页面将自动刷新
同步操作将从 百小僧/Layx 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Layx 网页弹窗最佳选择.
Layx 诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初,我们想在B/S架构上实现类C/S架构窗口功能,但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了 Layx 。
目前 Layx 拥有和C/S架构一样灵活的操作方式,支持网页多窗口、多任务协同操作,支持窗口各种事件。
原创作者
:百小僧开源协议
:MIT当前版本
:v2.0.5发布日期
:2018.05.18交流Q群
:18863883html:文本窗口
,url:页面窗口
,group:窗口组
,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,默认值:ctstyle
:定义窗口的css样式,通过style可以定制窗口所有的外观属性,是一个非常强大的功能,String 类型。如:.layx-window:{border-radius:4px;}
默认值:空字符串control
:是否显示控制栏(标题栏),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:页面窗口
,group:窗口组
,默认值: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 类型。默认值:trueframes
:窗口组页面配置,type:'group'
有效,Array(Frame) 类型,Frame 类型可选值:
id
:窗口组窗口唯一Id,String 类型。title
:窗口组窗口标题,String 类型。支持 TEXT/HTML 字符串,默认值:空字符串type
:窗口组窗口类型,Enum 类型。Enum枚举类型有:html:html窗口
、url:页面窗口
,默认值:htmlcontent
:窗口组窗口内容,String 或 HTMLElement 类型。type:'html'
时有效,支持 TEXT/HTML 字符串,同时也支持 HTMLElement 元素对象,默认值:空字符串url
:窗口页面地址,URL 类型, type:'url'
时有效,默认值:空字符串useFrameTitle
:是否自动获取 iframe 页面标题设置为当前窗口标题,Boolean 类型,只支持同域页面标题获取,默认值:falseframeIndex
:窗口组默认显示索引,Number 类型,默认值:0buttons
:窗口按钮组,需设置 statusBar:true
才有效,Array(Button) 类型,Button 对象可选值:
label
:按钮名称,String 类型callback
:按钮点击回调函数,如:function(id){}
,id 表示窗口Id,注意:如果窗口是 prompt 类型时,callback参赛为:function(id, value, textarea){}; id:窗口Id,value:输入框值,textarea:输入框对象
传入示例:
buttons:[
{
label:'确定',
callback:function(id){
// your code...
// 关闭窗口
layx.destroy(id);
}
},
{
label:'取消',
callback:function(id){
// 关闭窗口
layx.destroy(id);
}
}
]
如果是 prompt 输入框
buttons:[
{
label:'确定',
cackback:function(id,value,textarea){
// your code...
// 关闭窗口
layx.destroy(id);
}
},
{
label:'取消',
cackback:function(id,value,textarea){
// 关闭窗口
layx.destroy(id);
}
}
]
statusBar
:是否显示窗口状态栏,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
:是否允许窗口关闭操作frames
:窗口组页面配置
id
:窗口组窗口唯一Idtitle
:窗口组窗口标题type
:窗口组窗口类型content
:窗口组窗口内容url
:窗口页面地址useFrameTitle
:是否自动获取 iframe 页面标题设置为当前窗口标题groupCurrentId
:当前窗口组激活窗口Idbuttons
:窗口组页面配置
label
:按钮名称callback
:按钮点击回调函数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 winfrom = layx.group(id, frames, frameIndex, options)
:打开一个窗口组,id:窗口Id;frames:窗口组数组对象;frameIndex:窗口组默认显示索引;options:配置参数,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,options)
:打开一个提示框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id){}
;options:配置参数var winform = layx.confirm(title,msg,yes,options)
:打开一个询问框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id){}
;options:配置参数var winform = layx.prompt(title,msg,yes,options)
:打开一个输入框,title:提示框标题,String类型;msg,消息,String类型;yes:点击确定回调函数,function(id,value,textarea){}
;options:配置参数var promptTextare = layx.getPromptTextArea(id)
:获取输入框 textarea
对象 ,id:窗口Id,通常在 prompt 输入框点击按钮回调函数中使用var winform = layx.load(id,msg,options)
: 打开一个加载框,id:窗口Id;msg,消息,String类型;options:配置参数layx.setGroupContent(id, frameId,content)
:设置窗口组文本窗口内容,id:窗口Id;frameId:窗口组窗口Id;content:String 或 HTMLElementlayx.setGroupTitle(id,frameId,title,useFrameTitle)
:设置窗口组窗口标题,id:窗口Id;frameId:窗口组窗口Id;title:标题,支持html;useFrameTitle:是否自动获取 iframe页面标题填充,默认值:falselayx.setGroupUrl(id,frameId,url)
:设置窗口组页面窗口url地址,id:窗口Id;frameId:窗口组窗口Id;url:网址 或 文件路径layx.setGroupIndex(id,frameId)
:设置窗口组显示哪个窗口,id:窗口Id;frameId:窗口组窗口Id;通过窗口的 style
属性可以定义窗口的外观,可以定制成任何您需要的样子。如:
style:`
#layx-窗口Id{border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;}
`
窗口css选择器说明:
#layx-窗口Id
:特定窗口最外层 div
.layx-window
:所有窗口最外层 div
.layx-control-bar
:所有窗口状态栏 div
,如果需置顶窗口,则:#layx-窗口Id .layx-control-bar
.layx-title
:所有窗口标题 div
,指定窗口同上。.layx-inlay-menus
:所有窗口内置按钮(最小化,最大化,置顶、关闭、恢复)外层 div
,指定窗口同上
...
...
...如果你想修改更多外观,可以使用 Chrome 浏览器 F12检查元素获取您想要修改部分的标签名,然后写进 style
属性即可。如:
默认窗口带有点击事件,如果窗口内部包含其他事件打开新窗口,该事件需要取消向上冒泡,如:
document.getElementById('btn').onclick=function(e){
e=e||window.event;
// 打开新窗口代码
// 停止冒泡
e.stopPropagation();
}
# 2018.05.18 v2.0.5 发布
- [新增] 窗口组类型
- [新增] frames,frameIndex 配置参数
- [新增] setGroupContent,setGroupTitle,setGroupUrl,setGroupIndex,group方法
- [更新] layx.css 样式表
- [修复] 最小化样式
- [修复] 窗口组加载完成bug
# 2018.05.17 v2.0.4 发布
- [新增] buttons 配置属性
- [更新] 提示框、询问框、输入框代码
# 2018.05.16 v2.0.3 发布
- [新增] style 参数,可以嵌入css样式表
- [新增] 打开新窗口时如果可视区域小于窗口初始化宽高度,默认最大化
- [修复] 拖动层、拖曳层调整大小多窗口冲突bug
- [修复] 部分浏览器页面窗口不能自适应 bug
- [修复] 文本窗口样式被全局应用 bug
# 2018.05.15 v2.0.2 发布
- [修复] 低版本Chrome 浏览器bug
# 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 正式发布
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。