LayX
/
index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <title></title>
    <link href="layx.css" rel="stylesheet" />
</head>
<body>
    <div style="width:48%;float:left;">

        <p><strong>目前还未测试兼容性，推荐使用Chrome浏览，后续补回所有主流浏览器兼容处理</strong></p>
        <p><a href="https://gitee.com/monksoul/LayX" target="_blank">Gitee 开源地址</a></p>
        <p>
            目前有非常成熟的Layer，但是Layer依然没能和Windows窗口一样强大，或者说没有模拟到Windows窗口的大部分功能，<br />
            所以本人亲自操刀，自己写一个类似Windows窗口的插件 —— <strong>Layx</strong>
        </p>
        <p>
            <strong>目前完成的功能有</strong>：<br />
            1. 最小化、最大化、关闭、最小化最大化切换<br />
            2. 双击标题切换<br />
            3. 拖动窗口，支持拖动到顶部自动最大化；最大化拖动自动切换正常窗口<br />
            4. 拖动窗口限制功能，目前支持限制水平和垂直方向。<br />
            5. 窗口位置自动记录<br />
            6. 8个方向拖曳窗口大小（上，右，下，左，左上，左下，右上，右下）<br />
            7. 拖曳窗口大小最小宽度、最小高度控制<br />
            8. 最大化窗口禁止拖曳改变大小，其他非最大化窗口支持拖曳<br />
            9. 窗口获取焦点激活<br />
            10. 窗口置顶<br />
            11. 支持本地iframe点击激活窗口（iframe页面需引入 layx.iframe.js）<br />
            12. 支持窗口初始化打开位置控制<br />
            13. 支持获取窗口信息（默认存储所有窗口状态）通过 layx.windows[窗口id]可以获取窗口信息<br />
            14. 窗口最小化自动计算<br />
            15. 支持窗口通讯<br />
            16. 最小化/最大化按钮控制<br />
        </p>
        <p>
            <strong>即将开发功能</strong>：<br />
            1. 提示框，询问框，加载框<br />
            2. 窗口菜单<br />
            3. 窗口图标<br />
            4. 自定义操作按钮<br />
        </p>
    </div>
    <div style="width:48%;float:right;">
        <p><strong>演示案例</strong></p>
        <button id="btn1">打开新窗口（默认屏幕中间）</button>
        <button id="btn2">打开新窗口（左上）</button>
        <button id="btn3">打开新窗口（右上）</button>
        <button id="btn4">打开新窗口（左下）</button>
        <button id="btn5">打开新窗口（右下）</button>
        <button id="btn6">打开新窗口  top:20 left:200</button>
        <br />
        <br />
        <button id="btn7">不能拖动窗口</button>
        <button id="btn8">只能水平拖动</button>
        <button id="btn9">只能垂直拖动</button>
        <button id="btn10">可以水平垂直拖动</button>
        <button id="btn11">不允许拖出可视窗口</button>
        <br />
        <br />
        <button id="btn12">禁止拖曳改变大小</button>
        <button id="btn13">允许拖曳改变大小</button>
        <button id="btn14">限制拖曳最小宽度和最小高度 width:300 height:300</button>
        <br />
        <br />
        <button id="btn15">页面加载完成回调</button>
        <button id="btn16">关闭事件（return false；禁止关闭）</button>
        <button id="btn17">最小化事件（return false；禁止最小化）</button>
        <button id="btn18">最大化/正常事件（return false；禁止最大化/正常）</button>
        <br />
        <br />
        <button id="btn19">获取父窗口内容</button>
        <br />
        <br />
        <button id="btn20">没有最小化按钮</button>
        <button id="btn21">没有最大化按钮</button>
        <button id="btn22">只有关闭按钮</button>
    </div>
    <script src="layx.js" type="text/javascript"></script>
    <script type="text/javascript">
        document.getElementById('btn1').onclick = function () {
            layx.open({
                id: 'demo-center',
                title: '打开新窗口（默认屏幕中间）',
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn2').onclick = function () {
            layx.open({
                id: 'demo-lt',
                title: '打开新窗口（左上）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                screen: 'lt'
            });
        };

        document.getElementById('btn3').onclick = function () {
            layx.open({
                id: 'demo-rt',
                title: '打开新窗口（右上）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                screen: 'rt'
            });
        };

        document.getElementById('btn4').onclick = function () {
            layx.open({
                id: 'demo-lb',
                title: '打开新窗口（左下）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                screen: 'lb'
            });
        };

        document.getElementById('btn5').onclick = function () {
            layx.open({
                id: 'demo-rb',
                title: '打开新窗口（右下）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                screen: 'rb'
            });
        };

        document.getElementById('btn6').onclick = function () {
            layx.open({
                id: 'demo-custom1',
                title: '打开新窗口  top:20 left:200',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                screen: [20, 200]
            });
        };

        document.getElementById('btn7').onclick = function () {
            layx.open({
                id: 'demo-custom2',
                title: '不能拖动窗口',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                move: false
            });
        };

        document.getElementById('btn8').onclick = function () {
            layx.open({
                id: 'demo-custom3',
                title: '只能水平拖动',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                moveLock: { y: true }
            });
        };

        document.getElementById('btn9').onclick = function () {
            layx.open({
                id: 'demo-custom4',
                title: '只能垂直拖动',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                moveLock: { x: true }
            });
        };

        document.getElementById('btn10').onclick = function () {
            layx.open({
                id: 'demo-custom5',
                title: '可以水平垂直拖动',
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn11').onclick = function () {
            layx.open({
                id: 'demo-custom6',
                title: '不允许拖出可视窗口',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                moveLock: { limit: true }
            });
        };

        document.getElementById('btn12').onclick = function () {
            layx.open({
                id: 'demo-custom7',
                title: '禁止拖曳改变大小',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                resize: false
            });
        };

        document.getElementById('btn13').onclick = function () {
            layx.open({
                id: 'demo-custom8',
                title: '运行拖曳改变大小',
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn14').onclick = function () {
            layx.open({
                id: 'demo-custom9',
                title: '限制拖曳最小宽度和最小高度 width:300 height:300',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                minWidth: 300,
                minHeight: 300
            });
        };

        document.getElementById('btn15').onclick = function () {
            layx.open({
                id: 'demo-custom10',
                title: '页面加载完成回调',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                events: {
                    load: function (container) {
                        alert('我加载完成了');
                    }
                }
            });
        };

        document.getElementById('btn16').onclick = function () {
            layx.open({
                id: 'demo-custom11',
                title: '关闭事件（return false；不会关闭）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                events: {
                    destroy: function (context, container) {
                        alert("我准备要关闭了...");
                    }
                }
            });
        };

        document.getElementById('btn17').onclick = function () {
            layx.open({
                id: 'demo-custom12',
                title: '最小化事件（return false；不会最小化）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                events: {
                    min: function (context, container) {
                        alert("我准备要最小化了...");
                    }
                }
            });
        };

        document.getElementById('btn18').onclick = function () {
            layx.open({
                id: 'demo-custom13',
                title: '最大化/正常事件（return false；禁止最大化/正常）',
                content: ['iframe', './demo/iframe.html'],  // iframe为类型，预留字段，后续将有其他类型
                events: {
                    maxOrNormal: function (context, status, container) {
                        alert("我准备切换最大化/最小化了...");
                    }
                }
            });
        };

        document.getElementById('btn19').onclick = function () {
            layx.open({
                id: 'demo-custom14',
                title: '获取父窗口内容',
                content: ['iframe', './demo/message.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn20').onclick = function () {
            layx.open({
                id: 'demo-custom15',
                title: '没有最小化按钮',
                min: false,
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn21').onclick = function () {
            layx.open({
                id: 'demo-custom16',
                title: '没有最大化按钮',
                max: false,
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };

        document.getElementById('btn22').onclick = function () {
            layx.open({
                id: 'demo-custom17',
                title: '只有关闭按钮',
                min: false,
                max: false,
                content: ['iframe', './demo/iframe.html']  // iframe为类型，预留字段，后续将有其他类型
            });
        };
    </script>
</body>
</html>