Layx 新一代Web弹窗组件

打开一个字符串文本

layx.html('str','字符串文本','Hello Layx!');

打开一个HTMLElement 窗口，默认拷贝模式

layx.html('dom','HTMLElement 窗口',document.getElementById('dom'));

Layx 新一代Web弹窗组件。

打开一个HTMLElement 窗口，取用模式

layx.html('dom-get','HTMLElement 窗口',document.getElementById('dom-get'),{cloneElementContent:false});

Layx 新一代Web弹窗组件。

HTML字符串窗口

layx.html('htmlstr','HTML字符串窗口',layx.multiLine(function () {/*
             
             <style type="text/css">
             #about-layx{
                    padding:10px;
                    line-height:1.5;
            }

            #about-layx h2{
                border-bottom:1px solid #ccc;
            }

            #about-layx label {
                margin: 0 2px;
                padding: 0 5px;
                white-space: nowrap;
                border: 0;
                background-color: #f8f8f8;
                border-radius: 3px;
                display:inline-block;
            }
             </style>

             <div id="about-layx">
                <h2>序言</h2>
                <p>Layx 诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了 Layx 。</p>
                <p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
                <h2>信息</h2>
                <ul>
                    <li><label>原创作者</label>：百小僧</li>
                    <li><label>开源协议</label>：MIT</li>
                    <li><label>当前版本</label>：v2.5.0</li>
                    <li><label>发布日期</label>：2018.09.17</li>
                    <li><label>交流Q群</label>：18863883</li>
                    <li><label>版权所有</label>：百签软件（中山）有限公司</li>
                </ul>
                <h2>特性</h2>
                <ul>
                    <li>纯原生Javascript实现，不依赖任何第三方框架</li>
                    <li>支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge等主流浏览器</li>
                    <li>支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口</li>
                    <li>支持窗口最大化、最小化、恢复、置顶、关闭控制及事件监听</li>
                    <li>支持窗口阻隔、窗口闪烁功能</li>
                    <li>支持窗口点击标题获取焦点、点击内容/页面获取焦点</li>
                    <li>支持窗口图标定制、操作按钮定制</li>
                    <li>支持窗口四个方向拖动及方向控制</li>
                    <li>支持窗口八个方向拖曳大小及拖曳方向控制</li>
                    <li>支持窗口自动获取页面标题</li>
                    <li>支持窗口位置记录及恢复</li>
                    <li>支持窗口相互通讯</li>
                    <li>支持窗口设定自动关闭</li>
                    <li>支持窗口外观控制、状态栏、透明度控制</li>
                    <li>支持窗口操作拦截器、可以拦截任何不正常操作</li>
                    <li>支持窗口初始化位置、宽高度、最小化宽高度控制</li>
                    <li>支持窗口加载文字控制</li>
                    <li>支持窗口滚动条自能判断</li>
                    <li>支持窗口最小化统一管理</li>
                    <li>支持滚动条智能判断</li>
                </ul>
                <h2>项目</h2>
                <ul>
                    <li>Gitee：<a href="https://gitee.com/monksoul/LayX" target="_blank">https://gitee.com/monksoul/LayX</a></li>
                    <li>Github：<a href="https://github.com/MonkSoul/Layx"  target="_blank">https://github.com/MonkSoul/Layx</a></li>
                </ul>
                <h2>捐赠</h2>
                <p>如果 Layx 对您有帮助，可以请 作者 喝杯咖啡</p>
                <img src="./code.jpg" style="width:100%;display:block;" />
             </div>

            */}));

打开一个本地网页

layx.iframe('localsite','本地网页','./iframe.html');

打开百度官网

layx.iframe('taobaosite','百度官网','https://www.baidu.com');

上边 Tip 吸附

layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-top'),'top');

下边 Tip 吸附

layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-bottom'),'bottom');

左边 Tip 吸附

layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-left'),'left');

右边 Tip 吸附

layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-right'),'right');

打开一个消息窗口

layx.msg('Layx 新一代Web弹窗组件.');

带成功图标消息窗口

layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'success'});

带警告图标消息窗口

layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'warn'});

带错误图标消息窗口

layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'error'});

带帮助图标消息窗口

layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'help'});

打开一个提示窗口

layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！');

带成功图标提示窗口

layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！',null,{dialogIcon:'success'});

带警告图标提示窗口

layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！',null,{dialogIcon:'warn'});

带错误图标提示窗口

layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！',null,{dialogIcon:'error'});

带帮助图标提示窗口

layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！',null,{dialogIcon:'help'});

打开一个询问窗口

layx.confirm('作何选择','你会在下一个系统使用 Layx 吗？',function(id){
    alert('您的支持是Layx发展的动力！');
    layx.destroy(id);
});

带成功图标询问窗口

layx.confirm('作何选择','你会在下一个系统使用 Layx 吗？',function(id){
    alert('您的支持是Layx发展的动力！');
    layx.destroy(id);
},{dialogIcon:'success'});

带警告图标询问窗口

layx.confirm('作何选择','你会在下一个系统使用 Layx 吗？',function(id){
    alert('您的支持是Layx发展的动力！');
    layx.destroy(id);
},{dialogIcon:'warn'});

带错误图标询问窗口

layx.confirm('作何选择','你会在下一个系统使用 Layx 吗？',function(id){
    alert('您的支持是Layx发展的动力！');
    layx.destroy(id);
},{dialogIcon:'error'});

带帮助图标询问窗口

layx.confirm('作何选择','你会在下一个系统使用 Layx 吗？',function(id){
    alert('您的支持是Layx发展的动力！');
    layx.destroy(id);
},{dialogIcon:'help'});

询问框按钮更多控制

layx.confirm('默认提示','Layx 会做为你下一个项目弹窗的首选吗？',null,{
    buttons:[
        {
            label:'确定',
            callback:function(id, button, event){
                alert("你点击了确定操作");
                layx.destroy(id);
            }
        },
        {
            label:'取消',
            callback:function(id, button, event){
                alert("你点击了取消操作");
                layx.destroy(id);
            }
        }
    ]
});

用户点击了取消或关闭

layx.confirm('监听操作','你关闭了窗口我都知道呢！',function(id,button){
    alert('你点击了确定');
    layx.destroy(id,{noTip:true});  // destroy可以设置参数，设置后可以在ondestroy.before中判断
},{
    event:{
        ondestroy:{
            before:function(layxWindow,winform,params,inside,escKey){
                if(params.noTip===true){
                        // 不需要提示
                }
                else{
                        alert("我被关闭了");
                }
            }
        }
    }
});

打开一个输入窗口

layx.prompt('Layx 体验报告','写下您对 Layx 的建议：',function(id,value,textarea, button, event){
    alert(value);
});

输入窗口带默认值

layx.prompt('有默认值的输入框','你喜欢Layx吗？',function(id,value,textarea, button, event){
    alert(value);
},'非常喜欢');

打开一个加载窗口

layx.load('loadId','数据正在加载中，请稍后');

// 5 秒后自动关闭
setTimeout(function(){
    layx.destroy('loadId');
},5000);

打开一个操作窗口

layx.iframe('operator','带操作按钮窗口','./iframe.html',{
    statusBar:true,
    buttons:[
        {
            label:'保存',
            callback:function(id, button, event){
                // 获取 iframe 页面 window对象
                var contentWindow=layx.getFrameContext(id);
                alert(contentWindow.document.body.innerHTML);

                layx.destroy(id);    
            }
        },
        {
            label:'取消',
            callback:function(id, button, event){
                layx.destroy(id);
            }
        }
    ]
});

打开一个窗口组窗口

layx.group('group',[
    {
        id:'group1',
        title:'文本窗口',
        content:'Layx 新一代Web弹窗组件.'
    },
    {
        id:'group2',
        title:'网页窗口',
        type:'url',
        url:'./iframe.html'
    },
    {
        id:'taobao',
        title:'百度官网',
        type:'url',
        url:'https://www.baidu.com'
    }
],1);

打开一个窗口组窗口，不合并标题

layx.group('group-nomerge',[
    {
        id:'group1',
        title:'文本窗口',
        content:'Layx 新一代Web弹窗组件.'
    },
    {
        id:'group2',
        title:'网页窗口',
        type:'url',
        url:'./iframe.html'
    },
    {
        id:'taobao',
        title:'百度官网',
        type:'url',
        url:'https://www.baidu.com'
    }
],1,{
    mergeTitle:false,
    title:'我是不合并的标题'
});

打开一个倒计时关闭窗口

layx.iframe('settimeout','打开一个倒计时关闭窗口','./iframe.html',{
    autodestroy:5000
});

打开一个遮罩、阻隔窗口

layx.iframe('shadow','打开一个遮罩、阻隔窗口，点击窗口外试试','./iframe.html',{
    shadable:true
});

设置阻隔背景透明度

layx.iframe('shadow-color','设置阻隔背景透明度','./iframe.html',{
    shadable:0.8
});

点击阻隔空白地方关闭窗口

layx.iframe('shadow-click','点击阻隔空白地方关闭窗口','./iframe.html',{
    shadable:0.8,
    control:false,
    border:false,
    shadow:false,
    shadeDestroy:true   // 点击空白地方关闭
});

打开一个置顶窗口

layx.iframe('sticktop','打开一个置顶窗口，再打开另外的窗口试试','./iframe.html',{
    alwaysOnTop:true,
    stickMenu:true,  // 可选，是否显示切换置顶按钮
    position:[100,100]
});

打开一个带调试的窗口

layx.iframe('debugwin','打开一个带调试的窗口','./iframe.html',{
    debugMenu:true
});

打开一个只读窗口

layx.iframe('readonly','打开一个只读窗口','./iframe.html',{
    readonly:true
});

打开一个下边浮动窗口

var btnTarget= document.getElementById('floatThat-bottom');
var winform = layx.iframe('float-bottom','打开一个下边浮动窗口','./iframe.html',{
    floatTarget:btnTarget,  // 被吸附的DOM对象
    width:357,
    height:200,
    alwaysOnTop:true,
    floatDirection: 'bottom',   // 设置方向
     event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) { 
                    if(inside===false){
                        layx.visual(winform.id,false);  // 隐藏窗口
                         layx.updateFloatWinPosition(winform.id);
                         return false;
                    }
             }
        },
        onexist: function (layxWindow, winform) { 
            layx.visual(winform.id,true);   // 显示窗口
        }
    }
});

打开一个上边浮动窗口

var btnTarget= document.getElementById('floatThat-top');
var winform = layx.iframe('float-top','打开一个上边浮动窗口','./iframe.html',{
    floatTarget:btnTarget,  // 被吸附的DOM对象
    width:357,
    height:200,
    alwaysOnTop:true,
    floatDirection: 'top',   // 设置方向
     event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) { 
                   if(inside===false){
                        layx.visual(winform.id,false);  // 隐藏窗口
                         layx.updateFloatWinPosition(winform.id);
                         return false;
                    }
             }
        },
        onexist: function (layxWindow, winform) { 
            layx.visual(winform.id,true);   // 显示窗口
        }
    }
});

打开一个右边浮动窗口

var btnTarget= document.getElementById('floatThat-right');
var winform = layx.iframe('float-right','打开一个右边浮动窗口','./iframe.html',{
    floatTarget:btnTarget,  // 被吸附的DOM对象
    width:357,
    height:200,
    alwaysOnTop:true,
    floatDirection: 'right',   // 设置方向
     event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) { 
                   if(inside===false){
                        layx.visual(winform.id,false);  // 隐藏窗口
                         layx.updateFloatWinPosition(winform.id);
                         return false;
                    }
             }
        },
        onexist: function (layxWindow, winform) { 
            layx.visual(winform.id,true);   // 显示窗口
        }
    }
});

打开一个左边浮动窗口

var btnTarget= document.getElementById('floatThat-left');
var winform = layx.iframe('float-left','打开一个左边浮动窗口','./iframe.html',{
    floatTarget:btnTarget,  // 被吸附的DOM对象
    width:357,
    height:200,
    alwaysOnTop:true,
    floatDirection: 'left',   // 设置方向
     event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) { 
                    if(inside===false){
                        layx.visual(winform.id,false);  // 隐藏窗口
                         layx.updateFloatWinPosition(winform.id);
                         return false;
                    }
             }
        },
        onexist: function (layxWindow, winform) { 
            layx.visual(winform.id,true);   // 显示窗口
        }
    }
});

更新左边浮动窗口为右边显示

layx.updateFloatWinPosition('float-left','right');

重新打开上面的浮动窗口试试！

default

layx.iframe('default-skin','皮肤：default','./iframe.html',{skin:'default'});

cloud

layx.iframe('cloud-skin','皮肤：cloud','./iframe.html',{skin:'cloud'});

turquoise

layx.iframe('turquoise-skin','皮肤：turquoise','./iframe.html',{skin:'turquoise'});

river

layx.iframe('river-skin','皮肤：river','./iframe.html',{skin:'river'});

asphalt

layx.iframe('asphalt-skin','皮肤：asphalt','./iframe.html',{skin:'asphalt'});

自定义皮肤

/* 窗口 */
.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 {
}

默认外观

layx.iframe('default-style','默认外观','./iframe.html');

灰色背景

layx.iframe('gray-style','灰色背景','./iframe.html',{
    bgColor:'#ccc'
});

透明窗口

layx.iframe('opacity-style','透明窗口','./iframe.html',{
    opacity:0.5
});

无边框

layx.iframe('noborder-style','无边框','./iframe.html',{
    border:false
});

无阴影

layx.iframe('noshadow-style','无阴影','./iframe.html',{
    shadow:false
});

红色边框

layx.iframe('redborder-style','红色边框','./iframe.html',{
    border:'1px solid #f00'
});

无标题栏

layx.html('nocontrol-style','无标题栏','<button style="margin:10px;" onclick="layx.destroy(\'nocontrol-style\');">关闭</button>',{
    control:false
});

带状态栏

layx.iframe('statusbar-style','带状态栏','./iframe.html',{
    statusBar:'<div style="line-height:25px;padding:0 10px;" >我是状态栏内容</div>'
});

自定义外观，比如圆角

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

*/})
});

在这里，可以尽情写 css 样式了，改成任何您想要的外观

紫色标题栏

layx.iframe('purple-control-style','紫色标题栏','./iframe.html',{
    controlStyle:'background-color: #7719aa; color:#fff;',
    border:false,
    style:layx.multiLine(function(){/*
    #layx-purple-control-style .layx-inlay-menus .layx-icon:hover {
        background-color: #9953c0;
    }   
     
*/})
});

没有窗口图标

layx.iframe('no-icon','没有窗口图标','./iframe.html',{
    icon:false
});

自定义图标

layx.iframe('custom-icon','自定义图标','./iframe.html',{
    icon:'<img src="logo.png" style="height:22px;display:block;" />'
});

不显示标题、图标

layx.iframe('no-title',null,'./iframe.html',{
    icon:false
});

显示置顶按钮

layx.iframe('stick-show','显示置顶按钮','./iframe.html',{
    stickMenu:true
});

不显示最小化按钮

layx.iframe('minhide','不显示最小化按钮','./iframe.html',{
    minMenu:false
});

不显示最大化按钮

layx.iframe('maxhide','不显示最大化按钮','./iframe.html',{
    maxMenu:false
});

不显示关闭按钮

layx.html('closehide','不显示关闭按钮','<button style="margin:10px;" onclick="layx.destroy(\'closehide\');">关闭</button>',{
    closeMenu:false
});

只显示关闭按钮

layx.iframe('onlyclose','只显示关闭按钮','./iframe.html',{
    minMenu:false,
    maxMenu:false
});

自定义标题栏左边区域

layx.iframe('leftbar','自定义标题栏左边区域','./iframe.html',{
    icon:'<button>按钮一</button> <img src="logo.png" style="height:22px;vertical-align: middle;" /> <button>按钮二</button>'
});

自动获取iframe标题

layx.iframe('autotitle',null,'./iframe.html',{
   useFrameTitle:true
});

自定义按钮style样式

layx.html('custom-button-style','自定义按钮style样式','设置按钮字体大小和颜色',{
    width:300,
    height:300,
    statusBar:true,
    buttons:[
        {
            label:'确定',
            callback:function(id,button, event){
                layx.destroy(id);
            },
            style:'color:#f00;font-size:16px;'
        }
    ]
});

添加class样式

layx.html('custom-button-classes','添加class样式','为按钮添加custom-button 类',{
    width:300,
    height:300,
    statusBar:true,
    buttons:[
        {
            label:'确定',
            callback:function(id,button, event){
                layx.destroy(id);
            },
            classes:'custom-button'
        }
    ]
});

默认拖动

layx.iframe('defaultmove','鼠标拖动标题栏看看','./iframe.html');

只允许垂直拖动

layx.iframe('onlyvertical','只允许垂直拖动','./iframe.html',{
    moveLimit:{
        horizontal:true
    }
});

只允许水平拖动

layx.iframe('onlyhorizontal','只允许水平拖动','./iframe.html',{
    moveLimit:{
        vertical:true
    }
});

不允许拖出可视窗口

layx.iframe('noallowout','不允许拖出可视窗口','./iframe.html',{
    moveLimit:{
        leftOut: false, 
        rightOut: false,
        topOut: false,
        bottomOut: false, 
    }
});

不允许拖动

layx.iframe('nomove','不允许拖动','./iframe.html',{
    movable:false
});

四个方向限制，比如不允许拖出底部

layx.iframe('nomovebottom','四个方向限制，比如不允许拖出底部','./iframe.html',{
    moveLimit:{
        leftOut: true, 
        rightOut: true,
        topOut: true,
        bottomOut: false, 
    }
});

默认可以8个方向拖曳改变大小

layx.iframe('defaultresize','默认可以8个方向拖曳改变大小','./iframe.html');

8个方向拖曳大小控制，比如不允许顶部和底部拖曳改变

layx.iframe('notopbottomresize','8个方向拖曳大小控制，比如不允许顶部和底部拖曳改变','./iframe.html',{
    resizeLimit: {
        t: true, 
        r: false,
        b: true, 
        l: false, 
        lt: false,
        rt: false,
        lb: false, 
        rb: false 
    }
});

不允许改变大小

layx.iframe('noresize','不允许改变大小','./iframe.html',{
    resizable:false
});

默认大小

layx.iframe('defaultsize','默认大小（宽800px，高600px）','./iframe.html');

自定义宽度、高度

layx.iframe('customsize','自定义宽度、高度（宽300px，高300px）','./iframe.html',{
    width:300,
    height:300
});

最小高度、宽度

layx.iframe('minwidthheight','拖曳调整浏览器窗口大小试试，最小300px x 300px','./iframe.html',{
    minWidth:300,
    minHeight:300
});

中间打开

layx.iframe('resize-ct','中间打开','./iframe.html');

左上角打开

layx.iframe('resize-lt','左上角打开','./iframe.html',{
    position:'lt'
});

右上角打开

layx.iframe('resize-rt','右上角打开','./iframe.html',{
    position:'rt'
});

左下角打开

layx.iframe('resize-lb','左下角打开','./iframe.html',{
    position:'lb'
});

右下角打开

layx.iframe('resize-rb','右下角打开','./iframe.html',{
    position:'rb'
});

上边中间打开

layx.iframe('resize-tc','上边中间打开','./iframe.html',{
    position:'tc'
});

左边中间打开

layx.iframe('resize-lc','左边中间打开','./iframe.html',{
    position:'lc'
});

右边中间打开

layx.iframe('resize-rc','右边中间打开','./iframe.html',{
    position:'rc'
});

下边中间打开

layx.iframe('resize-bc','下边中间打开','./iframe.html',{
    position:'bc'
});

自定义位置

layx.iframe('resize-custom','自定义位置（上边100px，左边200px）','./iframe.html',{
    position:[100,200]
});

自定义位置（组合模式）

layx.iframe('resize-custom','自定义位置（组合模式，顶部中间并距离20px）','./iframe.html',{
    position:[20,'tc']
});

存储窗口位置、大小

layx.iframe('store-area','拖动或者调整窗口大小并刷新页面看看！','./iframe.html',{
    storeStatus:true
});

加载前后控制

layx.iframe('event-onload','加载前后控制','./iframe.html',{
    event:{
        onload:{
            before:function(layxWindow,winform){
                alert("加载之前");
                console.log(new Date()+"加载之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                alert("加载之后");
                console.log(new Date()+"加载之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

最小化事件

layx.iframe('event-onmin','最小化前后控制','./iframe.html',{
    event:{
        onmin:{
            before:function(layxWindow,winform){
                alert("最小化之前");
                console.log(new Date()+"最小化之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                alert("最小化之后");
                console.log(new Date()+"最小化之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

最大化事件

layx.iframe('event-onmax','最大化前后控制','./iframe.html',{
    event:{
        onmax:{
            before:function(layxWindow,winform){
                alert("最大化之前");
                console.log(new Date()+"最大化之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                alert("最大化之后");
                console.log(new Date()+"最大化之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

恢复事件

layx.iframe('event-onrestore','恢复前后控制','./iframe.html',{
    event:{
        onrestore:{
            before:function(layxWindow,winform){
                alert("恢复之前");
                console.log(new Date()+"恢复之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                alert("恢复之后");
                console.log(new Date()+"恢复之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

关闭事件

layx.iframe('event-ondestroy','关闭前后控制','./iframe.html',{
    event:{
        ondestroy:{
            before:function(layxWindow,winform,inside,escKey){
                alert("关闭之前");
                console.log(new Date()+"关闭之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function () {
                alert("关闭之后");
                console.log(new Date()+"关闭之后~")
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

显示/隐藏事件

layx.iframe('event-onvisual','显示/隐藏前后控制','./iframe.html',{
    event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) { 
                    if(params.ok===true){
                        // 彻底销毁
                    }
                    else{
                         layx.visual(winform.id,false);  // 隐藏窗口
                         return false;
                    }
             }
        },
        onexist: function (layxWindow, winform) { 
            layx.visual(winform.id,true);   // 显示窗口
        },
        onvisual:{
            before:function(layxWindow, winform, params, inside, status){
                if(status===true){
                     alert("显示之前");
                    console.log(new Date()+"显示之前~");
                }
                else{
                     alert("隐藏之前");
                     console.log(new Date()+"隐藏之前~");
                }
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform,status) {
                if(status===true){
                     alert("显示之后");
                    console.log(new Date()+"显示之后~");
                }
                else{
                     alert("隐藏之后");
                     console.log(new Date()+"隐藏之后~");
                }
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

拖动窗口试试

layx.iframe('event-onmove','拖动前中后控制','./iframe.html',{
    event:{
        onmove:{
            before:function(layxWindow,winform){
                console.log(new Date()+"拖动之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            progress:function(layxWindow,winform){
                console.log(new Date()+"拖动之中~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                console.log(new Date()+"拖动之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

改变窗口大小试试

layx.iframe('event-onresize','拖曳大小前中后控制','./iframe.html',{
    event:{
        onresize:{
            before:function(layxWindow,winform){
                console.log(new Date()+"拖曳大小之前~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            progress:function(layxWindow,winform){
                console.log(new Date()+"拖动大小之中~")
                console.log(winform);
                console.log("=============分割线===============");
            },
            after: function (layxWindow, winform) {
                console.log(new Date()+"拖曳大小之后~")
                console.log(winform);
                console.log("=============分割线===============");
            }
        }
    }
});

请打开控制台查看

点击窗口看看

layx.iframe('event-onfocus','点击窗口看看','./iframe.html',{
    event:{
        onfocus:function(layxWindow,winform){
    alert("我获取焦点啦，我的窗口Id是："+winform.id);
}
    }
});

再点击创建相同的窗口看看

layx.iframe('event-onexist','再点击创建相同的窗口看看','./iframe.html',{
    event:{
        onexist:function(layxWindow,winform){
    alert("我已经打开啦");
}
    }
});

切换窗口时触发切换事件

layx.group('group-switch',[
    {
        id:'group1',
        title:'文本窗口',
        content:'Layx 新一代Web弹窗组件.'
    },
    {
        id:'group2',
        title:'网页窗口',
        type:'url',
        url:'./iframe.html'
    },
    {
        id:'taobao',
        title:'百度官网',
        type:'url',
        url:'https://www.baidu.com'
    }
],1,{
    event:{
                onswitch: {
                    before: function (layxWindow, winform, frameId) {
                        alert("切换之前");
                     },
                    after: function (layxWindow, winform, frameId) { 
                        alert("切换之后");
                    }
                }
    }
});

点击置顶按钮触发事件

layx.iframe('stick-event','打开一个置顶窗口，再打开另外的窗口试试','./iframe.html',{
    alwaysOnTop:true,
    stickMenu:true,
    event:{
                onstick: {
                    before: function (layxWindow, winform, frameId) {
                        alert("置顶之前");
                     },
                    after: function (layxWindow, winform, frameId) { 
                        alert("置顶之后");
                    }
                }
    }
});

自动最大化窗口

layx.iframe('maxauto','自动最大化窗口','./iframe.html',{
    event:{
        onload:{
            after:function(layxWindow,winform){
                layx.max(winform.id);
            }
        }
    }
});

只有输入Layx才能关闭窗口

layx.prompt('请输入当前框架的名称','请输入Layx名字：',function(id,value,textarea, button, event){
    layx.destroy(id);
},'Layx',{
    event:{
        ondestroy: {
             before: function (layxWindow, winform, params, inside,escKey) {
                var textarea=layx.getPromptTextArea(winform.id);
                if(textarea.value==="Layx"){
                    alert("你正确输入了 Layx");
                }
                else{
                    alert("您输入的是："+textarea.value+"，您必须输入 Layx 才能关闭 ");
                    return false;
                }
            }
        }
    }
});

定制加载提示文本

layx.iframe('loadtext','定制加载提示文本','https://www.baidu.com',{
    loadingText: '正在加载百度官网官方网站，请稍后哦'
});

定制倒计时文本

layx.iframe('destroysettimeout','定制倒计时文本','./iframe.html',{
    autodestroy:5000,
    autodestroyText: '<div style="padding: 0 8px; ">亲~，此窗口将在 <strong>{second}</strong> 秒内自动关闭哦.</div>'
});

定制询问框按钮

layx.confirm('温馨提示','你还为保存文本内容，请选择操作。',null,{
    buttons:[
        {
            label:'保存文本',
            callback:function(id, button, event){
                alert("你点击了保存文本");
            }
        },
        {
            label:'确定',
            callback:function(id, button, event){
                alert("你点击了确定");
            }
        },
        {
            label:'关闭',
            callback:function(id, button, event){
                alert("你点击了关闭");
                layx.destroy(id);
            }
        }
    ]
});

获取Layx版本

alert(layx.v);

通用打开窗口方法

layx.open({
    id:'common',
    title:'通用打开窗口方法',
    content:'<div style="padding:10px;">Layx 所有的窗口类型全部都是基于此操作方法创建的。</div>'
});

获取所有打开窗口列表

var windows=layx.windows();

var jsonStr=JSON.stringify(windows, null, 4);
console.log(jsonStr);
alert(jsonStr);

请打开控制台查看

获取单个窗口winform对象

// 第一种方法，直接接收返回值
var winform = layx.iframe('single','测试操作方法、通讯窗口','./iframe.html');
alert(JSON.stringify(winform, null, 4));

// 第二种方法，通过 layx.getWindow(id) 获取窗口的winform对象
var winform2 = layx.getWindow('single');
alert(JSON.stringify(winform2, null, 4));

请打开控制台查看

设置窗口标题

第一步：先打开窗口才能测试

第二步：设置窗口标题

layx.setTitle('iframe-demo','我是新的标题');

设置窗口标题（自动获取页面标题）

第一步：先打开窗口才能测试

第二步：设置窗口标题（自动获取页面标题）

layx.setTitle('iframe-demo',null,true);

设置文本窗口内容

第一步：先打开窗口才能测试

第二步：设置文本窗口内容

layx.setContent('text-demo',new Date()+' 我是新设置的内容 ');

设置文本窗口内容，取用模式

第一步：先打开窗口才能测试

第二步：设置文本窗口内容、取用模式

layx.setContent('text-demo',document.getElementById('dom-get'),false);

设置网页窗口地址

第一步：先打开窗口才能测试

第二步：设置网页窗口地址为 https://www.baidu.com/

layx.setUrl('iframe-demo','https://www.baidu.com/');

设置网页窗口地址（自动获取标题）

第一步：先打开窗口才能测试

第二步：设置网页窗口地址为 ./child.html

layx.setUrl('iframe-demo1','./child.html');

测试窗口必须设置 useFrameTitle:true

闪烁一下窗口

layx.flicker('layx');

最大化窗口

layx.max('layx');

恢复窗口

layx.restore('layx');

最小化窗口

第一步：先打开窗口才能测试

第二步：设置最小化

layx.min('iframe-demo');

置顶/取消置顶

layx.stickToggle('layx');

注意看 Layx 演示案例右上角置顶图标颜色变化

设置窗口位置

layx.setPosition('layx','ct');

设置窗口宽度、高度

layx.setSize('layx',{width:300,height:300});

关闭窗口

第一步：先打开窗口才能测试

第二步：关闭窗口

layx.destroy('iframe-demo');

重载页面窗口

第一步：先打开窗口才能测试

第二步：重载页面窗口

layx.reloadFrame('iframe-demo');

关闭所有窗口

第一步：先打开窗口才能测试

第二步：关闭所有窗口

layx.destroyAll();

注意看设置 closable:false 窗口不可关闭

设置窗口组标题

layx.setGroupTitle('layx','demo','演示示例');

注意看当前文档的标题哦

设置窗口组文本内容

第一步：先打开窗口组才能测试

第二步：设置窗口组一内容

layx.setGroupContent('group-demo','group1','我是新设置的内容');

设置窗口组文本内容、取用模式

第一步：先打开窗口组才能测试

第二步：设置窗口组一内容、取用模式

layx.setGroupContent('group-demo','group1',document.getElementById('dom-get'),false);

设置窗口组页面窗口URL地址

第一步：先打开窗口组才能测试

第二步：设置窗口组二URL地址

layx.setGroupUrl('group-demo','group2','https://www.baidu.com');

设置窗口组页面窗口URL地址（自动获取标题）

第一步：先打开窗口组才能测试

第二步：设置窗口组二URL地址

layx.setGroupUrl('group-demo2','group2','./child.html');

窗口组二必须设置 useFrameTitle:true

设置窗口组索引

layx.setGroupIndex('layx','info');

重载窗口组页面窗口

第一步：先打开窗口组才能测试

第二步：重载窗口组页面窗口

layx.reloadGroupFrame('group-demo','group2');

在顶层打开窗口

layx.iframe('topiframe','在topopen.html内部打开调用 top.layx 打开新窗口','./topopen.html');

获取页面窗口对象，并获取页面HTML

第一步：先打开窗口才能测试

第二步：获取页面HTML

var win = layx.getFrameContext('iframe-demo');
alert(win.document.body.innerHTML);

获取页面窗口对象，并设置页面HTML

第一步：先打开窗口才能测试

第二步：设置页面HTML

var win = layx.getFrameContext('iframe-demo');
win.document.body.innerHTML='<label>Hello Layx!</label>';

获取页面窗口对象，并调用页面定义方法

第一步：先打开窗口才能测试

第二步：调用页面定义方法 iframeFunc

var win = layx.getFrameContext('iframe-demo');
win.iframeFunc();

获取窗口组页面窗口HTML

第一步：先打开窗口组才能测试

第二步：获取窗口组二HTML

var win = layx.getGroupFrameContext('group-demo','group2');
alert(win.document.body.innerHTML);

设置窗口组页面窗口HTML

第一步：先打开窗口组才能测试

第二步：设置窗口组二HTML

var win = layx.getGroupFrameContext('group-demo','group2');
win.document.querySelector("label").innerHTML="Hello Layx!";

调用窗口组页面窗口定义的方法

第一步：先打开窗口组才能测试

第二步：调用页面定义方法 iframeFunc

var win = layx.getGroupFrameContext('group-demo','group2');
win.iframeFunc();

窗口类型

文本窗口

打开一个字符串文本

打开一个HTMLElement 窗口，默认拷贝模式

打开一个HTMLElement 窗口，取用模式

HTML字符串窗口

网页窗口

打开一个本地网页

打开百度官网

Tip吸附消息

上边 Tip 吸附

下边 Tip 吸附

左边 Tip 吸附

右边 Tip 吸附

消息窗口

打开一个消息窗口

带成功图标消息窗口

带警告图标消息窗口

带错误图标消息窗口

带帮助图标消息窗口

提示窗口

打开一个提示窗口

带成功图标提示窗口

带警告图标提示窗口

带错误图标提示窗口

带帮助图标提示窗口

询问窗口

打开一个询问窗口

带成功图标询问窗口

带警告图标询问窗口

带错误图标询问窗口

带帮助图标询问窗口

询问框按钮更多控制

用户点击了取消或关闭

输入窗口

打开一个输入窗口

输入窗口带默认值

加载窗口

打开一个加载窗口

操作窗口

打开一个操作窗口

窗口组

打开一个窗口组窗口

打开一个窗口组窗口，不合并标题

倒计时窗口

打开一个倒计时关闭窗口

遮罩、阻隔窗口

打开一个遮罩、阻隔窗口

设置阻隔背景透明度

点击阻隔空白地方关闭窗口

置顶窗口

打开一个置顶窗口

带调试窗口

打开一个带调试的窗口

只读窗口

打开一个只读窗口

浮动窗口

打开一个下边浮动窗口

打开一个上边浮动窗口

打开一个右边浮动窗口

打开一个左边浮动窗口

更新左边浮动窗口为右边显示

窗口外观

皮肤设置

default

cloud

turquoise

river

asphalt

自定义皮肤

主窗口外观

默认外观

灰色背景

透明窗口

无边框

无阴影

红色边框

无标题栏

带状态栏

自定义外观，比如圆角