目录导航
简单入门
引入layx组件
<link href="layx.min.css" rel="stylesheet" type="text/css" />
<script src="layx.min.js" type="text/javascript"></script>
输出 Hello Layx!
layx.html('str','字符串文本','Hello Layx!');
配置参数
主窗口参数 options
类型:String
必需:是
默认值:无
说明:无
类型:String/HTMLString/Boolean
必需:否
默认值:true,默认窗口图标
说明:设置 false 将不启用窗口标题
类型:String/HTMLString
必需:否
默认值:''
说明:无
类型:Number/百分比
必需:否
默认值:800
说明:支持传入百分比,百分比是相对于浏览器可视区域宽度
类型:Number/百分比
必需:否
默认值:600
说明:支持传入百分比,百分比是相对于浏览器可视区域高度
类型:Number/百分比
必需:否
默认值:200
说明:支持传入百分比,百分比是相对于浏览器可视区域宽度。如果宽度小于最小宽度,则宽度强制性设置为最小宽度。最小宽度作用于拖曳调整窗口大小时。
类型:Number/百分比
必需:否
默认值:200
说明:支持传入百分比,百分比是相对于浏览器可视区域高度。如果宽度小于最小高度,则高度强制性设置为最小高度。最小高度作用于拖曳调整窗口大小时。
类型:Boolean
必需:否
默认值:true
说明:设置true时,将自动记录窗口位置、大小信息、下次打开时自动恢复、即使刷新页面也能保持。基于sessionStorage存储
类型:Boolean
必需:否
默认值:true
说明:默认窗口到顶部时自动最大化
类型:Boolean
必需:否
默认值:true
说明:默认超出可视区域窗口自动最大化,设置false不启用
类型:Enum/Array[top/Enum,left/Enum]
必需:否
默认值:'ct'
说明:内置Enum参数:
ct:正中间
lt:左上角
rt:右上角
lb:左下角
rb:右下角
lc:左中间
rc:右中间
tc:上中间
bc:下中间
也可以传入 [100,200] 数组类型,组合数组类型 ['tc',20]
类型:Boolean
必需:否
默认值:true
说明:设置 false 将不显示控制标题栏,同时窗口拖动功能失效,需手动调用关闭方法关闭窗口。
类型:Boolean
必需:否
默认值:true
说明:设置false将禁用此功能
类型:String/CssString
必需:否
默认值:''
说明:支持强大的CSS样式表、如需插入多行可用 layx.multiLine(function(){/* 多行样式 */})。通过修改此属性可以获得最大外观修改效果。
类型:String/CssString
必需:否
默认值:''
说明:修改控制标题栏样式,如:background-color:#f00;color:#fff;
类型:String
必需:否
默认值:#fff
说明:支持css颜色样式值,包括 transparent 透明背景。
类型:Boolean
必需:否
默认值:true
说明:设置是否显示窗口阴影。
类型:Boolean/String
必需:否
默认值:true
说明:设置false将不启用边框,支持css边框设置属性。
类型:String
必需:否
默认值:3px
说明:设置 0px将不启用圆角,圆角必须带 px单位
类型:String
必需:否
默认值:'default'
说明:内置皮肤:
default
cloud
turquoise
river
asphalt
类型:Enum
必需:否
默认值:true
说明:设置false后,窗口将不能前置
类型:Enum
必需:否
默认值:html
说明:内置 Enum参数有:
html:文本类型
url:页面类型
group:窗口组类型
目前所有的窗口都是通过设定 type实现的
类型:Boolean/Enum
必需:否
默认值:''
说明:支持alert,confirm,msg内置 Enum参数有:
success:成功图标
warn:警告图标
error:错误图标
help: 帮助图标
类型:Boolean/HTMLElement
必需:否
默认值:false
说明:设置为DOM对象时,窗口将吸附到按钮上
类型:Enum
必需:否
默认值:'ct'
说明:内置Enum参数:
top:上边
left:左边
right:右边
bottom:下边
类型:Boolean
必需:否
默认值:true
说明:设置false后打开已存在的窗口将不会闪烁。
类型:Boolean
必需:否
默认值:true
说明:设置false后将不支持非同源网站点击切换窗口,设置true有少许性能问题,如果没有涉及到第三方网页,建议设置为false。
类型:Array
必需:否
默认值:[]
说明:设置 type:group 有效,配置见 子窗口参数 frames 说明
类型:Number
必需:否
默认值:0
说明:设置 type:group 有效,设置窗口组默认初始化显示索引
类型:Number/Boolean
必需:否
默认值:1
说明:设置 type:group 有效,设置窗口组默认加载个数。设置false将全部加载
类型:Boolean
必需:否
默认值:true
说明:默认合并,设置false不合并
类型:String/HTMLString/HTMLElement
必需:否
默认值:''
说明:设置 type:html 有效,支持传入字符串、HTML代码以及DOM对象
类型:Boolean
必需:否
默认值:true
说明:设置 type:html 有效,如果content传入的是DOM对象并且DOM对象包含触发事件,需设置false采用原对象填充content内容。设置为true拷贝一份填充content内容,但所有事件失效。
类型:String/Path
必需:否
默认值:''
说明:设置 type:url 有效,设置页面窗口URL地址,支持本地路径、互联网路径以及 'about:blank'
类型:Boolean
必需:否
默认值:false
说明:设置 type:url 有效,设置true将自动获取iframe页面的标题填充主窗口标题,只支持同域url地址
类型:Number
必需:否
默认值:1
说明:设置主窗口透明度、取值0~1 浮点值
0:完全透明
1:不透明
0.5:半透明
类型:Boolean/Float
必需:否
默认值:false
说明:设置true窗口以外的区域将不能操作,支持传入0-1浮点范围数值,用来设置阻隔透明度
类型:Boolean
必需:否
默认值:false
说明:设置true点击空白地方将关闭窗口
类型:Boolean
必需:否
默认值:false
说明:设置true窗口将为只读、窗口将禁止右键功能
类型:String/Boolean/HTMLString/HTMLElement/Array[Boolean,String/HTMLString/HTMLElement]
必需:否
默认值:内容正在加载中,请稍后
说明:设置false将不启用加载提示。如果设置为String/HtmlString类型,将自动追加 ... 加载效果,支持传入DOM对象,如果需要自定义需传入数组,数组格式:[true,自定义字符串/对象],必须设置第一个参数为true
类型:Boolean
必需:否
默认值:false
说明:设置false不显示置顶按钮
类型:Boolean
必需:否
默认值:true
说明:设置false置顶功能将失效
类型:Boolean
必需:否
默认值:true
说明:设置false不显示最小化按钮
类型:Boolean
必需:否
默认值:true
说明:设置false最小化功能将失效
类型:Boolean
必需:否
默认值:true
说明:设置false不显示最大化按钮
类型:Boolean
必需:否
默认值:true
说明:设置false最大化功能将失效
类型:Boolean
必需:否
默认值:true
说明:设置false不显示调试按钮
类型:Boolean
必需:否
默认值:true
说明:设置false不显示关闭按钮
类型:Boolean
必需:否
默认值:true
说明:设置false关闭功能将失效
类型:Boolean
必需:否
默认值:true
说明:设置false恢复功能将失效
类型:Boolean/Number
必需:否
默认值:false
说明:设置窗口关闭等待秒数,如5000毫秒。设置false需手动关闭窗口。
类型:String/HTMLString/Boolean
必需:否
默认值:此窗口将在 <strong>{second}</strong> 秒内自动关闭.
说明:设置false启用倒计时提示。倒计时提示默认在右下角显示。{second} 表示 autodestroy 设置的秒数。
类型:Boolean
必需:否
默认值:true
说明:设置false拖曳调整大小功能失效
类型:Object
必需:否
默认值:
{
t: false, // 是否限制上边拖曳大小,false不限制
r: false, // 是否限制右边拖曳大小,false不限制
b: false, // 是否限制下边拖曳大小,false不限制
l: false, // 是否限制左边拖曳大小,false不限制
lt: false, // 是否限制左上边拖曳大小,false不限制
rt: false, // 是否限制右上边拖曳大小,false不限制
lb: false, // 是否限制左下边拖曳大小,false不限制
rb: false // 是否限制右下边拖曳大小,false不限制
}
说明:支持 8 个方向拖曳改变窗口大小。
类型:String/Boolean
必需:否
默认值:enter
说明:设置false不启用快捷键触发按钮,支持:enter 和 ctrl+enter
类型:Array
必需:否
默认值:[]
说明:设置 statusBar:true 有效,配置见 按钮参数 buttons
类型:Boolean
必需:否
默认值:false
说明:标识是否是输入框、Layx 内部使用。设置 true 将会影响 buttons中对象 callback的传入参数。
类型:Boolean
必需:否
默认值:true
说明:设置false控制标题栏拖动功能失效
类型:Object
必需:否
默认值:
{
vertical: false, // 是否禁止垂直拖动,false不禁止
horizontal: false, // 是否禁止水平拖动,false不禁止
leftOut: true, // 是否允许左边拖出,true允许
rightOut: true, // 是否允许右边拖出,true允许
topOut: true, // 是否允许上边拖出,true允许,此设置不管是false还是true,窗口都不能拖出窗体
bottomOut: true, // 是否允许下边拖出,true允许
}
说明:支持控制窗口拖动方向及拖出属性。
类型:Boolean
必需:否
默认值:true
说明:设置true将启用点击窗口内容将在所有层上面显示
类型:Boolean
必需:否
默认值:false
说明:设置true窗口将置顶显示,如果stickMenu:true,则置顶按钮处于选中状态。
类型:Boolean
必需:否
默认值:true
说明:设置true双击控制标题栏将最大化/恢复窗口,设置false不启用。
类型:String/Boolean/HTMLString/HTMLElement
必需:否
默认值:''
说明:设置false将不启用状态栏。支持传入HTML字符串、DOM对象
类型:String/CssString
必需:否
默认值:''
说明:修改状态栏样式,如:background-color:#f00;color:#fff;
事件监听 options.event
类型:Object
必需:否
默认值:
{
// 加载事件
onload: {
// 加载之前,return false 不执行
before: function (layxWindow, winform) {
},
// 加载之后
after: function (layxWindow, winform) {
}
},
// 最小化事件
onmin: {
// 最小化之前,return false 不执行
before: function (layxWindow, winform) {
},
// 最小化之后
after: function (layxWindow, winform) {
}
},
// 最大化事件
onmax: {
// 最大化之前,return false 不执行
before: function (layxWindow, winform) {
},
// 最大化之后
after: function (layxWindow, winform) {
}
},
// 恢复事件
onrestore: {
// 恢复之前,return false 不执行
before: function (layxWindow, winform) {
},
// 恢复之后
after: function (layxWindow, winform) {
}
},
// 关闭事件
ondestroy: {
// 关闭之前,return false 不执行,inside 区分用户点击内置关闭按钮还是自动调用,用户关闭之前传递的参数,escKey表示是否是按下esc触发
before: function (layxWindow, winform,params,inside,escKey) {
},
// 关闭之后
after: function () {
}
},
// 隐藏/显示窗口时间,return false不执行
onvisual: {
before: function (layxWindow, winform, params, inside, status) { },
after: function (layxWindow, winform, status) { }
},
// 移动事件
onmove: {
// 移动之前,return false 不执行
before: function (layxWindow, winform) {
},
// 移动中
progress: function (layxWindow, winform) {
},
// 移动之后
after: function (layxWindow, winform) {
}
},
// 拖曳事件
onresize: {
// 拖曳之前,return false 不执行
before: function (layxWindow, winform) {
},
// 拖曳中
progress: function (layxWindow, winform) {
},
// 拖曳之后
after: function (layxWindow, winform) {
}
},
// 获取焦点事件、return false 不置顶
onfocus: function (layxWindow, winform) {
},
// 窗口存在事件
onexist: function (layxWindow, winform) {
},
// 窗口组切换事件
onswitch: {
// 切换之前,return false 不执行操作
before: function (layxWindow, winform, frameId) {
},
// 切换之后
after: function (layxWindow, winform, frameId) {
}
},
// 置顶事件
onstick: {
// 置顶之前,return false 不执行操作
before: function (layxWindow, winform) {
},
// 置顶之后
after: function (layxWindow, winform) {
}
}
}
说明:监听窗口事件
按钮参数 buttons
类型:String
必需:是
默认值:确定
说明:设置按钮显示名称
类型:String
必需:否
默认值:''
说明:设置按钮的id属性,最终生成的Id为:layx-窗口Id-button-按钮Id
类型:Array/String
必需:否
默认值:[]
说明:设置按钮的class属性,支持字符串和数组类型,字符串类型时只能添加一个;如需设置多个class,传递数组类型,如:["layx-button","red-button"],默认会生成 class="layx-button red-button"
类型:String/CssString
必需:否
默认值:''
说明:控制按钮内联样式,如:background-color:#f00;color:#fff;
类型:Function(id, button, event)/Function(id,value,textarea, button, event)
必需:是
默认值:function(id, button){ }
说明:按钮点击回调函数,
// 普通按钮回调函数
callback:function(id, button, event){
}
// 输入框按钮回调函数
callback:function(id,value,textarea, button, event){
}
子窗口参数 frames
类型:String
必需:是
默认值:无
说明:无
类型:String/HTMLString
必需:否
默认值:''
说明:无
类型:Enum
必需:否
默认值:html
说明:内置 Enum参数有:
html:文本类型
url:页面类型
类型:String/HTMLString/HTMLElement
必需:否
默认值:''
说明:设置 type:html 有效,支持传入字符串、HTML代码以及DOM对象
类型:Boolean
必需:否
默认值:true
说明:设置 type:html 有效,如果content传入的是DOM对象并且DOM对象包含触发事件,需设置false采用原对象填充content内容。设置为true拷贝一份填充content内容,但所有事件失效。
类型:String/Path
必需:否
默认值:''
说明:设置 type:url 有效,设置页面窗口URL地址,支持本地路径、互联网路径以及 'about:blank'
类型:Boolean
必需:否
默认值:false
说明:设置 type:url 有效,设置true将自动获取iframe页面的标题填充主窗口标题,只支持同域url地址
类型:String
必需:否
默认值:#fff
说明:支持css颜色样式值,包括 transparent 透明背景。
内置对象
layxWindow 窗口DOM对象
layxWindow 表示当前DOM对象,通过layxWindow可以操作窗口HTML元素及节点,HTMLElement类型
winform 窗口对象
winform记录了窗口所有主要信息,Object 类型,包含属性有:
winform.id // Id
winform.title // 标题
winform.layxWindowId // layxWindow对象id属性
winform.layxWindow // layxWindow 对象
winform.createDate // 创建时间
winform.status // 状态:min、max、normal
winform.type // 窗口类型
winform.frames // 窗口组窗口数组
winform.useFrameTitle // 标题应用模式
winform.cloneElementContent // 内容拷贝模式
winform.groupCurrentId // 当前窗口组索引
winform.area // 位置大小 { width , height , minWidth , minHeight , top , left}
winform.loadingText // 加载文本
winform.focusable // 焦点状态
winform.isFloatTarget // 是否浮动窗口
winform.floatTarget // 吸附的DOM对象
winform.url // 窗口url地址
winform.content // 窗口内容
winform.isStick // 置顶状态
winform.zIndex // 层级别
winform.movable // 拖动状态
winform.moveLimit // 拖动限制
winform.resizable // 拖曳状态
winform.resizeLimit // 拖曳大小限制
winform.stickable // 置顶操作
winform.minable // 最小化操作
winform.maxable // 最大化操作
winform.restorable // 恢复操作
winform.closable // 关闭操作
winform.event // 窗口事件
操作方法
获取版本号
var version = layx.v;
打开新窗口
var winform = layx.open(options);
打开文本窗口
var winform = layx.html(id, title, content, options);
打开页面窗口
var winform = layx.iframe(id, title, url, options);
打开窗口组
var winform = layx.group(id, frames, frameIndex, options);
获取窗口列表
var windows = layx.windows();
获取当前窗口对象
var winform = layx.getWindow(id);
关闭窗口
layx.destroy(id,params,force); // 设置了params参数,可以在event.ondestroy.before中监听;force表示强制关闭窗口,也就是return false失效。
显示/隐藏窗口
layx.visual(id, status, params); // status:true显示,false隐藏。设置了params参数,可以在event.onvisual.before中监听
窗口最小化
layx.min(id);
窗口最大化
layx.max(id);
设置标题
layx.setTitle(id, title, useFrameTitle);
闪烁窗口
layx.flicker(id);
恢复窗口
layx.restore(id);
更新层级别
layx.updateMinLayout();
置顶切换
layx.stickToggle(id);
设置窗口位置
layx.setPosition(id, position,isFloatTarget); // ,isFloatTarget 是否是浮动窗口
设置窗口宽度高度
layx.setSize(id, area); // ,area为json对象 {width:300,height:300}
更新浮动窗口位置
layx.updateFloatWinPosition(id,direction); // direction,浮动方向
获取页面窗口window对象
var contentWindow = layx.getFrameContext(id);
获取窗口组页面窗口window对象
var contentWindow = layx.getGroupFrameContext(id, frameId); // frameId:窗口组窗口id
获取页面窗口parent对象
var parentContentWindow = layx.getParentContext(id);
设置文本窗口内容
layx.setContent(id,content, cloneElementContent);
设置页面窗口地址
layx.setUrl(id,url);
设置窗口组文本窗口内容
layx.setGroupContent(id,frameId,content, cloneElementContent); // frameId:窗口组窗口id
设置窗口组标题
layx.setGroupTitle(id, frameId, title, useFrameTitle); // frameId:窗口组窗口id
设置窗口组页面窗口地址
layx.setGroupUrl(id, frameId, url); // frameId:窗口组窗口id
设置窗口组索引
layx.setGroupIndex(id, frameId); // frameId:窗口组窗口id
关闭所有窗口
layx.destroyAll(); // closable:false 不可关闭
Tip提示框
layx.tip(msg, target, direction, options);
消息框
layx.msg(msg, options);
提示框
layx.msg(title, msg, yes, options); // yes 默认确定按钮回调函数
询问框
layx.confirm(title, msg, yes, options); // yes 默认确定按钮回调函数
获取输入框textarea对象
var textarea = layx.getPromptTextArea(id);
输入框
layx.prompt(title, msg, yes,defaultValue, options); // yes 默认确定按钮回调函数 defaultValue 默认值
加载框
layx.load(id,msg, options);
多行字符串
var mulitStr = layx.multiLine(f); // f:function(){/* 你的多行代码 */}
重载页面窗口
layx.reloadFrame(id);
重载窗口组页面窗口
layx.reloadGroupFrame(id,frameId); // frameId:窗口组窗口id
设置按钮状态
layx.setButtonStatus(id, buttonId, isEnable) // buttonId:按钮Id
获取元素的绝对坐标
var pos = layx.getElementPos(el); // { x:'',y:''}
调用关闭按钮关闭窗口
layx.destroyInlay(id);
检查元素是否在某个元素区域内,并且屏幕可见
layx.checkVisual(pEle, ele, allContain); // pEle:区域;ele:元素;allContain 表示是否完全包含,设置false时,只要元素在区域有任何可见都返回true
获取状态栏按钮对象
var btn = layx.getButton(id,buttonId); // 按钮Id
窗口冒泡
解决打开新窗口层索引冲突
由于默认窗口带有点击事件,如果窗口内部包含其他事件打开新窗口,该事件需要取消向上冒泡:
document.getElementById('btn').onclick=function(e){
e=e||window.event;
// 打开新窗口代码
// 停止冒泡
e.stopPropagation();
}
外观定制
自定义皮肤
自定义皮肤建议写到一个单独的css文件中,且必须在layx.css后面引入,自定义皮肤规范:
/* 窗口 */
.layx-window.layx-皮肤名称-river {
}
/* 标题栏 */
.layx-window.layx-skin-皮肤名称 .layx-control-bar {
}
/* 内部按钮激活 */
.layx-window.layx-skin-皮肤名称 .layx-inlay-menus .layx-icon:hover {
}
/* 底部工具栏按钮 */
.layx-window.layx-skin-皮肤名称 .layx-button-item {
}
/* 底部工具栏按钮激活 */
.layx-window.layx-skin-皮肤名称 .layx-button-item:hover {
}
尽情写您的外观css样式吧
通过窗口的
options. style 属性可以定义窗口的外观,可以定制成任何您需要的样子,如:
layx.iframe('radiu-style','自定义外观,比如圆角','./iframe.html',{
style:layx.multiLine(function(){/*
#layx-radiu-style{
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-ms-border-radius:4px;
}
#layx-radiu-style .layx-window-icon{
color:#f00;
}
*/})
});