目录导航

简单入门

引入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;
        }

*/})
});