目录导航

## 简单入门

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

id：唯一ID

类型：String
必需：是
默认值：无
说明：无

icon：图标 或 标题栏左边内容

类型：String/HTMLString/Boolean
必需：否
默认值：true，默认窗口图标
说明：设置 false 将不启用窗口标题

title：标题

类型：String/HTMLString
必需：否
默认值：''
说明：无

width：初始化宽度

类型：Number/百分比
必需：否
默认值：800
说明：支持传入百分比，百分比是相对于浏览器可视区域宽度

height：初始化高度

类型：Number/百分比
必需：否
默认值：600
说明：支持传入百分比，百分比是相对于浏览器可视区域高度

minWidth：最小宽度

类型：Number/百分比
必需：否
默认值：100
说明：支持传入百分比，百分比是相对于浏览器可视区域宽度。如果宽度小于最小宽度，则宽度强制性设置为最小宽度。最小宽度作用于拖曳调整窗口大小时。

minHeight：最小高度

类型：Number/百分比
必需：否
默认值：100
说明：支持传入百分比，百分比是相对于浏览器可视区域高度。如果宽度小于最小高度，则高度强制性设置为最小高度。最小高度作用于拖曳调整窗口大小时。

position：窗口位置

类型：Enum/Array[top/Enum,left/Enum]
必需：否
默认值：'ct'
说明：内置Enum参数：

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

control：是否显示控制标题栏

类型：Boolean
必需：否
默认值：true
说明：设置 false 将不显示控制标题栏，同时窗口拖动功能失效，需手动调用关闭方法关闭窗口。

style：嵌入窗口样式

类型：String/CssString
必需：否
默认值：''
说明：支持强大的CSS样式表、如需插入多行可用 layx.multiLine(function(){/* 多行样式 */})。通过修改此属性可以获得最大外观修改效果。

controlStyle：控制标题栏样式

类型：String/CssString
必需：否
默认值：''
说明：修改控制标题栏样式，如：background-color:#f00;color:#fff;

bgColor：窗口背景颜色

类型：String
必需：否
默认值：#fff
说明：支持css颜色样式值，包括 transparent 透明背景。

shadow：窗口阴影

类型：Boolean
必需：否
默认值：true
说明：设置是否显示窗口阴影。

border：窗口边框

类型：Boolean/String
必需：否
默认值：1px solid #3baced
说明：设置false将不启用边框，支持css边框设置属性。

type：窗口类型

类型：Enum
必需：否
默认值：html
说明：内置 Enum参数有：

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

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

frames：窗口组子窗口数组

类型：Array
必需：否
默认值：[]
说明：设置 type:group 有效，配置见 子窗口参数 frames 说明

frameIndex：窗口组默认显示子窗口索引

类型：Number
必需：否
默认值：0
说明：设置 type:group 有效，设置窗口组默认初始化显示索引

content：文本窗口内容

类型：String/HTMLString/HTMLElement
必需：否
默认值：''
说明：设置 type:html 有效，支持传入字符串、HTML代码以及DOM对象

cloneElementContent：设置文本窗口DOM对象拷贝模式

类型：Boolean
必需：否
默认值：true
说明：设置 type:html 有效，如果content传入的是DOM对象并且DOM对象包含触发事件，需设置false采用原对象填充content内容。设置为true拷贝一份填充content内容，但所有事件失效。

url：页面窗口地址

类型：String/Path
必需：否
默认值：''
说明：设置 type:url 有效，设置页面窗口URL地址，支持本地路径、互联网路径以及 'about:blank'

useFrameTitle：是否自动获取页面标题

类型：Boolean
必需：否
默认值：false
说明：设置 type:url 有效，设置true将自动获取iframe页面的标题填充主窗口标题，只支持同域url地址

opacity：主窗口透明度

类型：Number
必需：否
默认值：1
说明：设置主窗口透明度、取值0~1 浮点值

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

shadable：窗口阻隔、遮罩

类型：Boolean
必需：否
默认值：false
说明：设置true窗口以外的区域将不能操作

loaddingText：窗口内容加载时显示文本

类型：String/Boolean/HTMLString/HTMLElement
必需：否
默认值：内容正在加载中，请稍后
说明：设置false将不启用加载提示。如果设置为String/HtmlString类型，将自动追加 ... 加载效果，支持传入DOM对象

stickMenu：置顶按钮

类型：Boolean
必需：否
默认值：false
说明：设置false不显示置顶按钮

stickable：是否允许置顶/取消置顶操作

类型：Boolean
必需：否
默认值：true
说明：设置false置顶功能将失效

minMenu：最小化按钮

类型：Boolean
必需：否
默认值：true
说明：设置false不显示最小化按钮

minable：是否允许最小化操作

类型：Boolean
必需：否
默认值：true
说明：设置false最小化功能将失效

maxMenu：最大化按钮

类型：Boolean
必需：否
默认值：true
说明：设置false不显示最大化按钮

maxable：是否允许最大化操作

类型：Boolean
必需：否
默认值：true
说明：设置false最大化功能将失效

closeMenu：关闭按钮

类型：Boolean
必需：否
默认值：true
说明：设置false不显示关闭按钮

closable：是否允许关闭操作

类型：Boolean
必需：否
默认值：true
说明：设置false关闭功能将失效

restorable：是否允许恢复操作

类型：Boolean
必需：否
默认值：true
说明：设置false恢复功能将失效

autodestroy：自动关闭窗口

类型：Boolean/Number
必需：否
默认值：false
说明：设置窗口关闭等待秒数，如5000毫秒。设置false需手动关闭窗口。

autodestroyText：自动关闭提示文本

类型：String/HTMLString/Boolean
必需：否
默认值：'<div style="padding: 0 8px; ">此窗口将在 <strong>{second}</strong> 秒内自动关闭.
说明：设置false启用倒计时提示。倒计时提示默认在右下角显示。{second} 表示 autodestroy 设置的秒数。

resizable：是否允许拖曳调整大小

类型：Boolean
必需：否
默认值：true
说明：设置false拖曳调整大小功能失效

resizeLimit：设置拖曳调整大小限制项

类型：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 个方向拖曳改变窗口大小。

buttons：状态栏按钮数组

类型：Array
必需：否
默认值：[]
说明：设置 statusBar:true 有效，配置见 按钮参数 buttons

isPrompt：是否输入框

类型：Boolean
必需：否
默认值：false
说明：标识是否是输入框、Layx 内部使用。设置 true 将会影响 buttons中对象 callback的传入参数。

movable：是否允许拖动窗口位置

类型：Boolean
必需：否
默认值：true
说明：设置false控制标题栏拖动功能失效

moveLimit：设置拖动窗口位置限制项

类型：Object
必需：否
默认值：

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

说明：支持控制窗口拖动方向及拖出属性。

focusable：窗口获取焦点

类型：Boolean
必需：否
默认值：true
说明：设置true将启用点击窗口内容将在所有层上面显示。只支持同域页面。

alwaysOnTop：是否总是置顶

类型：Boolean
必需：否
默认值：false
说明：设置true窗口将置顶显示，如果stickMenu:true，则置顶按钮处于选中状态。

allowControlDbclick：允许双击控制栏功能

类型：Boolean
必需：否
默认值：true
说明：设置true双击控制标题栏将最大化/恢复窗口，设置false不启用。

statusBar：状态栏

类型：String/Boolean/HTMLString/HTMLElement
必需：否
默认值：''
说明：设置false将不启用状态栏。支持传入HTML字符串、DOM对象

statusBarStyle：控制状态栏样式

类型：String/CssString
必需：否
默认值：''
说明：修改状态栏样式，如：background-color:#f00;color:#fff;

### 主窗口参数 options.event 事件

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 不执行
            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

label：按钮标签名

类型：String
必需：是
默认值：确定
说明：设置按钮显示名称

callback：按钮操作回调函数

类型：Function(id)/Function(id,value,textarea)
必需：是
默认值：function(id){ }
说明：按钮点击回调函数，

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

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

### 子窗口参数 frames

id：窗口组窗口唯一ID

类型：String
必需：是
默认值：无
说明：无

title：窗口组窗口标题

类型：String/HTMLString
必需：否
默认值：''
说明：无

type：窗口组窗口类型

类型：Enum
必需：否
默认值：html
说明：内置 Enum参数有：

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

content：窗口组文本窗口内容

类型：String/HTMLString/HTMLElement
必需：否
默认值：''
说明：设置 type:html 有效，支持传入字符串、HTML代码以及DOM对象

cloneElementContent：设置窗口组文本窗口DOM对象拷贝模式

类型：Boolean
必需：否
默认值：true
说明：设置 type:html 有效，如果content传入的是DOM对象并且DOM对象包含触发事件，需设置false采用原对象填充content内容。设置为true拷贝一份填充content内容，但所有事件失效。

url：窗口组页面窗口地址

类型：String/Path
必需：否
默认值：''
说明：设置 type:url 有效，设置页面窗口URL地址，支持本地路径、互联网路径以及 'about:blank'

useFrameTitle：是否自动获取窗口组页面标题

类型：Boolean
必需：否
默认值：false
说明：设置 type:url 有效，设置true将自动获取iframe页面的标题填充主窗口标题，只支持同域url地址

## 内置对象

### layxWindow 窗口DOM对象

layxWindow 表示当前DOM对象，通过layxWindow可以操作窗口HTML元素及节点，HTMLElement类型

### winform 窗口对象

winform记录了窗口所有主要信息，Object 类型，包含属性有：

    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样式吧

通过窗口的 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;
            }

    */})
    });