简单入门

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

ct：正中间
lt：左上角
rt：右上角
lb：左下角
rb：右下角
lc：左中间
rc：右中间
tc：上中间
bc：下中间
也可以传入 [100,200] 数组类型，组合数组类型 ['tc',20]

html：文本类型
url：页面类型
group：窗口组类型

目前所有的窗口都是通过设定 type实现的

0：完全透明
1：不透明
0.5：半透明

{
    t: false, // 是否限制上边拖曳大小，false不限制
    r: false, // 是否限制右边拖曳大小，false不限制
    b: false, // 是否限制下边拖曳大小，false不限制
    l: false, // 是否限制左边拖曳大小，false不限制
    lt: false, // 是否限制左上边拖曳大小，false不限制
    rt: false, // 是否限制右上边拖曳大小，false不限制
    lb: false, // 是否限制左下边拖曳大小，false不限制
    rb: false // 是否限制右下边拖曳大小，false不限制
}

{
    vertical: false, // 是否禁止垂直拖动，false不禁止
    horizontal: false, // 是否禁止水平拖动，false不禁止
    leftOut: true, // 是否允许左边拖出，true允许
    rightOut: true, // 是否允许右边拖出，true允许
    topOut: true, // 是否允许上边拖出，true允许，此设置不管是false还是true，窗口都不能拖出窗体
    bottomOut: true, // 是否允许下边拖出，true允许
}

主窗口参数 options.event 事件

{
    // 加载事件
    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 不执行
        before: function (layxWindow, winform) {
        },
        // 关闭之后
        after: function () {
        }
    },
    // 移动事件
    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) {
        }
    }
}

按钮参数 buttons

// 普通按钮回调函数
callback:function(id){
}

// 输入框按钮回调函数
callback:function(id,value,textarae){
}

子窗口参数 frames

html：文本类型
url：页面类型

内置对象

layxWindow 窗口DOM对象

winform 窗口对象

winform.id // Id
winform.title // 标题
winform.windowId // layxWindow对象id属性
winform.window // 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.loaddingText // 加载文本
winform.focusable // 焦点状态
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);

窗口最小化

layx.min(id);

窗口最大化

layx.max(id);

设置标题

layx.setTitle(id, title, useFrameTitle);

闪烁窗口

layx.flicker(id);

恢复窗口

layx.restore(id);

更新层级别

layx.updateMinLayout(id);

置顶切换

layx.stickToggle(id);

设置窗口位置

layx.setPosition(id, position);

获取页面窗口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);

设置页面窗口地址

layx.setUrl(id,url);

设置窗口组文本窗口内容

layx.setGroupContent(id,frameId,content); // 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 不可关闭

消息框

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, options);    // yes 默认确定按钮回调函数

加载框

layx.load(id,msg, options);

多行字符串

var mulitStr = layx.multiLine(f);  // f：function(){/* 你的多行代码 */}

重载页面窗口

layx.reloadFrame(id);

重载窗口组页面窗口

layx.reloadGroupFrame(id,frameId); // frameId：窗口组窗口id

窗口冒泡

解决打开新窗口层索引冲突

document.getElementById('btn').onclick=function(e){
    e=e||window.event;
    
    // 打开新窗口代码
    
    // 停止冒泡
    e.stopPropagation();
}

外观定制

尽情写您的外观css样式吧

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

*/})
});