├── doc ├── code.jpg ├── logo.png ├── hello.png ├── child.html ├── iframe.html ├── topopen.html ├── layxjs.html ├── layxcss.html ├── help.html ├── doc.css ├── doc.js ├── doc.html └── index.html ├── bundleconfig.json ├── LICENSE ├── README.md ├── layx.min.css └── layx.css /doc/code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monksoul/Layx/HEAD/doc/code.jpg -------------------------------------------------------------------------------- /doc/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monksoul/Layx/HEAD/doc/logo.png -------------------------------------------------------------------------------- /doc/hello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monksoul/Layx/HEAD/doc/hello.png -------------------------------------------------------------------------------- /bundleconfig.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "outputFileName": "layx.min.js", 4 | "inputFiles": [ 5 | "layx.js" 6 | ] 7 | }, 8 | { 9 | "outputFileName": "layx.min.css", 10 | "inputFiles": [ 11 | "layx.css" 12 | ] 13 | } 14 | ] 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 百小僧 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /doc/child.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 我是 child.html 标题 10 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /doc/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Layx 新一代Web弹窗组件 v2.5.4 10 | 42 | 43 | 44 | 45 | 46 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Layx v3.x 版本开发中，[v3.x 预览地址](https://monksoul.gitee.io/layx/dist/) 2 | 3 | # [v3.x 进度](https://gitee.com/monksoul/LayX/issues/IRK3V) 4 | 5 | # [v3.x 项目地址](https://gitee.com/monksoul/LayX/tree/dev/) 6 | 7 | ![输入图片说明](https://images.gitee.com/uploads/images/2019/0226/200029_9516065b_974299.png "Layx v3.x Final 2 (1).png") 8 | 9 | # 序言 10 | 11 | Layx 新一代Web弹窗组件。 12 | 13 | gzip压缩版仅 `13.5kb`，非常小巧。 14 | 15 | ## 信息 16 | 17 | - `原创作者`：百小僧 18 | - `开源协议`：MIT 19 | - `当前版本`：v2.5.4 20 | - `发布日期`：2018.11.03 21 | 22 | # 特性 23 | 24 | - 纯原生Javascript实现，不依赖任何第三方框架 25 | - 支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge、Safari等主流浏览器 26 | - 支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口、浮动窗口、置顶窗口、倒计时窗口、只读窗口 27 | - 支持窗口最大化、最小化、恢复、置顶、关闭、调试、双击控制及事件监听 28 | - 支持窗口阻隔、窗口闪烁功能 29 | - 支持窗口点击标题获取焦点、点击内容/页面获取焦点 30 | - 支持窗口图标定制、操作按钮定制 31 | - 支持窗口四个方向拖动及方向控制 32 | - 支持窗口八个方向拖曳大小及拖曳方向控制 33 | - 支持窗口自动获取页面标题 34 | - 支持窗口位置记录及恢复 35 | - 支持窗口相互通讯 36 | - 支持窗口设定自动关闭 37 | - 支持窗口外观控制、状态栏、透明度控制 38 | - 支持窗口操作拦截器、可以拦截任何不正常操作 39 | - 支持窗口初始化位置、宽高度、最小化宽高度控制 40 | - 支持窗口加载文字控制 41 | - 支持窗口滚动条智能判断 42 | - 支持窗口最小化统一管理 43 | - 支持窗口位置记录保存 44 | - 支持 `ESC` 快捷键退出窗口 45 | - 支持自定义皮肤，设置任何您想要的外观 46 | - **支持触摸屏手势拖曳、拖动** 47 | 48 | 49 | # 使用 50 | 51 | 第一步：引入 layx.css / layx.min.css 52 | 53 | ``` 54 | 55 | ``` 56 | 57 | 第二步：引入 layx.js / layx.min.js 58 | 59 | ``` 60 | 61 | ``` 62 | 63 | 第三步：打开一个窗口试试 64 | 65 | ``` 66 | layx.html('str','字符串文本','Hello Layx!'); 67 | ``` 68 | 69 | ![输入图片说明](https://images.gitee.com/uploads/images/2018/0929/130813_69a61025_974299.png "layx2.png") 70 | 71 | [查看更多示例](http://layx.baiqian.ltd) 72 | -------------------------------------------------------------------------------- /doc/topopen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Layx 新一代Web弹窗组件 v2.5.4 10 | 42 | 43 | 44 | 45 | 50 | 52 | 53 | -------------------------------------------------------------------------------- /doc/layxjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | layx.js 源代码 10 | 11 | 44 | 45 | 46 | 47 |
48 | 49 |
50 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /doc/layxcss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | layx.css 源代码 10 | 11 | 44 | 45 | 46 | 47 |
48 | 49 |
50 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /doc/help.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 常见问题 10 | 11 | 28 | 29 | 30 | 31 |
32 |

33 | 1. 如何在iframe页面中关闭当前窗口？ 34 | 

parent.layx.destroy(id);   // 方法一（推荐）
35 | top.layx.destroy(id);   // 方法二
36 |
37 |
用 还是 取决于 layx.js的引用位置。
38 |

39 |

40 | 2. 如何在iframe页面中动态获取窗口 id？ 41 |

42 | 
function getLayxId() {
43 |      var id;
44 |      if (self != top && self.frameElement && self.frameElement.tagName == "IFRAME") {
45 |          var layxWindow = $(self.frameElement).parents(".layx-window");
46 |          id = layxWindow.attr("id").substr(5);
47 |      }
48 |      return id;
49 |  }
50 |
51 |

52 |

53 | 3. 如何动态设置iframe窗口大小？ 54 | 

parent.layx.setSize(getLayxId(),{width:1000,height:500});        // 在iframe页面调用
55 |
56 |

57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /doc/doc.css: -------------------------------------------------------------------------------- 1 | ul { 2 | padding-left: 20px; 3 | } 4 | 5 | #demo { 6 | display: none; 7 | } 8 | 9 | #mulu { 10 | position: absolute; 11 | position: -webkit-sticky; 12 | position: sticky; 13 | top: 10px; 14 | right: 10px; 15 | font-weight: normal; 16 | background: #fff; 17 | cursor: pointer; 18 | font-size: 13px; 19 | border: 1px solid #ccc; 20 | display: inline-block; 21 | padding: 5px 10px; 22 | z-index: 2; 23 | float: right; 24 | -webkit-box-sizing: border-box; 25 | -moz-box-sizing: border-box; 26 | -ms-box-sizing: border-box; 27 | -o-box-sizing: border-box; 28 | } 29 | 30 | #toc { 31 | position: absolute; 32 | position: -webkit-sticky; 33 | position: sticky; 34 | left: 0; 35 | top: 0; 36 | bottom: 0; 37 | width: 190px; 38 | z-index: 3; 39 | background: #f9f9f9; 40 | border: 1px solid #ccc; 41 | display: none; 42 | overflow: auto; 43 | padding: 10px 0; 44 | max-height: 518px; 45 | white-space: nowrap; 46 | -webkit-box-sizing: border-box; 47 | -moz-box-sizing: border-box; 48 | -ms-box-sizing: border-box; 49 | -o-box-sizing: border-box; 50 | } 51 | 52 | #toc .toc-title { 53 | display: block; 54 | color: #000; 55 | padding: 5px 0; 56 | cursor: pointer; 57 | } 58 | 59 | #toc .toc-title:hover { 60 | text-decoration: underline; 61 | } 62 | 63 | #toc .toc-title[data-type='h1'] { 64 | padding-left: 5px; 65 | font-size: 20px; 66 | font-weight: bold; 67 | } 68 | 69 | #toc .toc-title[data-type='h2'] { 70 | padding-left: 10px; 71 | font-size: 20px; 72 | font-weight: bold; 73 | } 74 | 75 | #toc .toc-title[data-type='h3'] { 76 | padding-left: 15px; 77 | font-size: 16px; 78 | } 79 | 80 | #toc .toc-title[data-type='h4'] { 81 | padding-left: 25px; 82 | font-size: 14px; 83 | color: #0094ff; 84 | } 85 | 86 | #toc .toc-title[data-type='h5'] { 87 | padding-left: 35px; 88 | font-size: 12px; 89 | } 90 | 91 | #toc .toc-title[data-type='h6'] { 92 | padding-left: 45px; 93 | font-size: 10px; 94 | } 95 | 96 | #mulu:hover { 97 | background: #999; 98 | color: #fff; 99 | border: 1px solid #999; 100 | } 101 | 102 | #code, #code * { 103 | box-sizing: border-box; 104 | -webkit-box-sizing: border-box; 105 | -moz-box-sizing: border-box; 106 | -ms-box-sizing: border-box; 107 | -o-box-sizing: border-box; 108 | } 109 | 110 | .demo { 111 | } 112 | 113 | #code { 114 | padding: 10px; 115 | float: left; 116 | width: 100%; 117 | position: relative; 118 | overflow: auto; 119 | -webkit-overflow-scrolling: touch; 120 | -webkit-transform: translate3d(0,0,0); 121 | font-size: 14px; 122 | } 123 | 124 | .tip { 125 | color: #0094ff; 126 | } 127 | 128 | pre { 129 | border: 1px solid #dedede; 130 | padding: 10px; 131 | background: #f5f5f5; 132 | height: auto; 133 | overflow: auto; 134 | width: 100%; 135 | font-size: 14px; 136 | font-family: Arial; 137 | border-radius: 3px; 138 | -webkit-border-radius: 3px; 139 | -moz-border-radius: 3px; 140 | -ms-border-radius: 3px; 141 | -o-border-radius: 3px; 142 | display: block; 143 | /*white-space: pre-wrap; 144 | word-wrap: break-word;*/ 145 | -webkit-overflow-scrolling: touch; 146 | -webkit-transform: translate3d(0,0,0); 147 | box-sizing: border-box; 148 | -webkit-box-sizing: border-box; 149 | -moz-box-sizing: border-box; 150 | -ms-box-sizing: border-box; 151 | -o-box-sizing: border-box; 152 | } 153 | 154 | .doc-item { 155 | border-bottom: 1px dashed #dedede; 156 | } 157 | 158 | .doc-des { 159 | border: 1px solid #dedede; 160 | padding: 10px; 161 | background: #f5f5f5; 162 | border-radius: 3px; 163 | -webkit-border-radius: 3px; 164 | -moz-border-radius: 3px; 165 | -ms-border-radius: 3px; 166 | -o-border-radius: 3px; 167 | margin-bottom: 10px; 168 | word-break: break-all; 169 | } 170 | 171 | .doc-des span { 172 | display: inline-block; 173 | width: 50px; 174 | color: #666; 175 | } 176 | 177 | #code label { 178 | margin: 0 2px; 179 | padding: 0 5px; 180 | /*white-space: nowrap;*/ 181 | border: 0; 182 | background-color: #f8f8f8; 183 | border-radius: 3px; 184 | display: inline-block; 185 | color: #0094ff; 186 | } 187 | 188 | .custom-button { 189 | color: #fff; 190 | background: #0094ff; 191 | border: none; 192 | } 193 | 194 | .custom-button:hover { 195 | background: rgba(0, 148, 255,0.8) !important; 196 | border: none !important; 197 | color: #fff !important; 198 | } 199 | 200 | .custom-button1 { 201 | color: #fff; 202 | background: #FFB800; 203 | border: none; 204 | float: left; 205 | margin-left: 0; 206 | } 207 | 208 | .custom-button1:hover { 209 | background: rgba(255, 184, 0,0.8) !important; 210 | border: none !important; 211 | color: #fff !important; 212 | } 213 | -------------------------------------------------------------------------------- /layx.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * file : layx.css 3 | * gitee : https://gitee.com/monksoul/LayX 4 | * github : https://github.com/MonkSoul/Layx/ 5 | * author : 百小僧/MonkSoul 6 | * version : v2.5.4 7 | * create time : 2018.05.11 8 | * update time : 2018.11.03 9 | */ 10 | *[class^="layx-"]{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;outline:none;border:none;background-color:transparent}.layx-flexbox{display:-webkit-box;display:-ms-flexbox;display:flex;display:-webkit-flex}.layx-flex-vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-justify-content:flex-start}.layx-flex-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-justify-content:center}.layx-flexauto{flex:1;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1}.layx-shade,#layx-window-move{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:transparent}body.ilayx-body{overflow:hidden !important}.layx-window{position:fixed;overflow:visible !important;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:#000;-webkit-tap-highlight-color:rgba(0,0,0,0);visibility:visible;border:none}.layx-window.layx-flicker{animation-name:layx-flicker;-webkit-animation-name:layx-flicker;-moz-animation-name:layx-flicker;animation-duration:.12s;-webkit-animation-duration:.12s;-moz-animation-duration:.12s;animation-iteration-count:8;-webkit-animation-iteration-count:8;-moz-animation-iteration-count:8}.layx-window.layx-max-statu,.layx-window.layx-max-statu .layx-control-bar,.layx-window.layx-max-statu .layx-main,.layx-window.layx-max-statu .layx-statu-bar{border-radius:0 !important;-webkit-border-radius:0 !important;-moz-border-radius:0 !important}.layx-window.layx-min-statu{min-height:0 !important;overflow:hidden !important;min-width:0 !important}.layx-window.layx-min-statu .layx-title{overflow:hidden !important}.layx-window.layx-min-statu .layx-inlay-menus .layx-stick-menu,.layx-window.layx-min-statu .layx-inlay-menus .layx-debug-menu{display:none}.layx-window.layx-bubble-type{overflow:visible !important;position:absolute !important}.layx-window.layx-hide-statu{display:none !important}.layx-control-bar{min-height:30px;overflow:hidden;width:100%;padding-left:5px}.layx-iconfont{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden;font-size:14px;line-height:normal;display:block;line-height:normal}.layx-icon{text-align:center}.layx-icon *{pointer-events:none}.layx-left-bar{margin-right:5px}.layx-window-icon{-webkit-tap-highlight-color:rgba(0,0,0,0)}.layx-window-icon .layx-iconfont{font-size:16px}.layx-title,.layx-group-tab{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;min-width:0;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.layx-title{-webkit-app-region:drag}.layx-group-tab{-webkit-app-region:no-drag}.layx-title .layx-label,.layx-group-title .layx-label{line-height:normal;font-size:14px;max-width:100%;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:inline-block;pointer-events:none;visibility:visible;position:relative;top:-1px;top:0px\0}.layx-group-tab .layx-label{line-height:28px}.layx-group-tab.layx-type-group{overflow:visible;margin-right:0;border-bottom:1px solid #ddd}.layx-control-bar.layx-type-group{overflow:visible;border-bottom:1px solid #ddd}.layx-group-title{height:27px;line-height:25px;max-width:150px;width:150px;padding:0 8px;background-color:#f5f5f5;border:1px solid #ddd;border-width:1px 1px 0 0;position:relative;color:#666;white-space:nowrap;min-width:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.layx-title.layx-type-group .layx-group-title{height:30px;line-height:34px}.layx-title.layx-type-group{overflow:visible}.layx-title.layx-type-group .layx-group-title:first-child{border-left:1px solid #ddd}.layx-group-title[data-enable="1"]{background-color:#fff;color:#000}.layx-group-title[data-enable="1"]::after{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;content:'';border-bottom:1px solid #fff}.layx-inlay-menus{height:100%;height:30px;line-height:30px;position:relative;max-height:30px;z-index:2}.layx-inlay-menus .layx-icon{width:45px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.layx-inlay-menus .layx-icon:hover{background-color:#e5e5e5}.layx-inlay-menus .layx-icon.layx-destroy-menu:hover{background-color:#e81123 !important;color:#fff !important}.layx-inlay-menus .layx-icon.layx-stick-menu[data-enable='1']{color:#f00}.layx-main{overflow:auto;position:relative;clear:both;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(0,0,0);-webkit-app-region:no-drag}.layx-readonly{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:transparent;z-index:199205270356}.layx-group-main{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;z-index:0;visibility:hidden;overflow:auto;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(0,0,0)}.layx-group-main[data-enable="1"]{z-index:1;visibility:visible}.layx-mouse-preventDefault{position:absolute;z-index:3;height:100%;width:100%;left:0;top:0;right:0;bottom:0;overflow:hidden;background-color:transparent}.layx-content-shade{position:absolute;z-index:2;width:100%;height:100%;left:0;right:0;bottom:0;top:0;overflow:hidden;background-color:#fff}.layx-html{width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(0,0,0);overflow:auto}.layx-dialog-icon{margin-right:10px;position:relative;top:-5px}.layx-dialog-icon .layx-iconfont{font-size:40px !important}.layx-dialog-msg .layx-dialog-icon .layx-iconfont,.layx-dialog-tip .layx-dialog-icon .layx-iconfont{font-size:25px !important}.layx-dialog-msg .layx-dialog-icon,.layx-dialog-tip .layx-dialog-icon{top:0}.layx-dialog-icon-success{color:#01aaed}.layx-dialog-icon-warn{color:#ffb800}.layx-dialog-icon-error{color:#f00}.layx-dialog-icon-help{color:#009688}.layx-dialog-msg,.layx-dialog-tip,.layx-dialog-load{color:#000;padding:10px}.layx-dialog-alert,.layx-dialog-confirm,.layx-dialog-prompt{padding:10px;color:#039}.layx-dialog-prompt{width:100%}.layx-dialog-msg,.layx-dialog-tip{height:100%}.layx-dialog-content{font-size:14px}.layx-textarea{display:block;border:1px solid #ddd;width:100%;resize:none;height:60px;margin-top:8px;padding:8px;font-size:15px;color:#000;line-height:1.5}.layx-textarea:focus{border:1px solid #3baced}.layx-buttons{padding:8px 10px;text-align:right}.layx-button-item{padding:0 16px;height:24px;line-height:normal;color:#000;font-size:14px;border:1px solid #adadad;outline:none;margin-left:8px;display:inline-block;background-color:#e1e1e1;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.layx-buttons .layx-button-item:hover{background-color:#e5f1fb;border:1px solid #0078d7}.layx-buttons .layx-button-item[disabled]{color:#999;cursor:not-allowed}.layx-buttons .layx-button-item[disabled]:hover{background-color:#e1e1e1;border:1px solid #adadad}.layx-iframe{width:1px;min-width:100%;*width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.layx-statu-bar{border-top:1px solid #ddd;min-height:25px;background-color:#eeeef2}.layx-resizes[data-enable='0']{visibility:hidden}.layx-resizes>div{position:absolute;z-index:3;-ms-touch-action:none;touch-action:none}.layx-resize-top,.layx-resize-bottom{height:3px;left:3px;right:3px}.layx-resize-top{top:0;cursor:n-resize}.layx-resize-bottom{bottom:0;cursor:s-resize}.layx-resize-left,.layx-resize-right{width:3px;top:3px;bottom:3px}.layx-resize-left{left:0;cursor:w-resize}.layx-resize-right{right:0;cursor:e-resize}.layx-resize-left-top,.layx-resize-right-top,.layx-resize-left-bottom,.layx-resize-right-bottom{width:3px;height:3px}.layx-resize-left-top{left:0;top:0;cursor:nw-resize}.layx-resize-right-top{right:0;top:0;cursor:ne-resize}.layx-resize-left-bottom{left:0;bottom:0;cursor:sw-resize}.layx-resize-right-bottom{right:0;bottom:0;cursor:se-resize}.layx-resize-top.layx-reisize-touch,.layx-resize-bottom.layx-reisize-touch{height:16px;left:16px;right:16px}.layx-resize-left.layx-reisize-touch,.layx-resize-right.layx-reisize-touch{width:16px;top:16px;bottom:16px}.layx-resize-left-top.layx-reisize-touch,.layx-resize-right-top.layx-reisize-touch,.layx-resize-left-bottom.layx-reisize-touch,.layx-resize-right-bottom.layx-reisize-touch{width:16px;height:16px}.layx-resize-top.layx-reisize-touch{top:-8px}.layx-resize-bottom.layx-reisize-touch{bottom:-8px}.layx-resize-left.layx-reisize-touch{left:-8px}.layx-resize-right.layx-reisize-touch{right:-8px}.layx-resize-left-top.layx-reisize-touch{left:-8px;top:-8px}.layx-resize-right-top.layx-reisize-touch{right:-8px;top:-8px}.layx-resize-left-bottom.layx-reisize-touch{left:-8px;bottom:-8px}.layx-resize-right-bottom.layx-reisize-touch{right:-8px;bottom:-8px}.layx-resize-left[data-enable='0'],.layx-resize-top[data-enable='0'],.layx-resize-right[data-enable='0'],.layx-resize-bottom[data-enable='0'],.layx-resize-left-top[data-enable='0'],.layx-resize-left-bottom[data-enable='0'],.layx-resize-right-top[data-enable='0'],.layx-resize-right-bottom[data-enable='0']{visibility:hidden}.layx-auto-destroy-tip{position:absolute;bottom:3px;right:3px;height:25px;line-height:25px;z-index:5;color:#444;background-color:#f1f1f1;padding:0 8px;font-size:13px}.layx-code{border:1px solid #dedede;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;padding:10px;width:100%;height:100%;-webkit-overflow-scrolling:touch;-webkit-transform:translate3d(0,0,0);background:#f5f5f5;overflow:auto}.layx-bubble,.layx-bubble-inlay{position:absolute;width:0;height:0}.layx-bubble-bottom{top:-11px;left:2px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:11px solid transparent}.layx-bubble-inlay-bottom{top:2px;left:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid transparent}.layx-bubble-top{bottom:-11px;left:2px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:11px solid transparent}.layx-bubble-inlay-top{bottom:2px;left:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid transparent}.layx-bubble-right{top:2px;left:-11px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:11px solid transparent}.layx-bubble-inlay-right{top:-9px;left:2px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-right:9px solid transparent}.layx-bubble-left{top:2px;right:-11px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:11px solid transparent}.layx-bubble-inlay-left{top:-9px;right:2px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:9px solid transparent}.layx-pre{height:auto;width:100%;font-size:14px;font-family:Arial;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;display:block;font-family:Arial}.layx-dot{display:inline-block;width:25px}.layx-load-animate{width:32px;height:32px;position:relative;margin-right:10px}.layx-load-inner,.layx-load-inner2{position:absolute;width:100%;height:100%;border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;overflow:hidden;left:0;top:0}.layx-load-inner{opacity:1;background-color:#89abdd;-webkit-animation:layx-second-half-hide 1.6s steps(1,end) infinite;animation:layx-second-half-hide 1.6s steps(1,end) infinite;-moz-animation:layx-second-half-hide 1.6s steps(1,end) infinite}.layx-load-inner2{opacity:0;background-color:#4b86db;-webkit-animation:layx-second-half-show 1.6s steps(1,end) infinite;animation:layx-second-half-show 1.6s steps(1,end) infinite;-moz-animation:layx-second-half-show 1.6s steps(1,end) infinite}.layx-load-spiner,.layx-load-filler,.layx-load-masker{position:absolute;width:50%;height:100%}.layx-load-spiner{border-radius:40px 0 0 40px;-webkit-border-radius:40px 0 0 40px;-moz-border-radius:40px 0 0 40px;background-color:#4b86db;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center;-moz-transform-origin:right center;-webkit-animation:layx-spin 800ms infinite linear;animation:layx-spin 800ms infinite linear;-moz-animation:layx-spin 800ms infinite linear;left:0;top:0}.layx-load-filler{border-radius:0 40px 40px 0;-webkit-border-radius:0 40px 40px 0;-moz-border-radius:0 40px 40px 0;background-color:#4b86db;-webkit-animation:layx-second-half-hide 800ms steps(1,end) infinite;animation:layx-second-half-hide 800ms steps(1,end) infinite;-moz-animation:layx-second-half-hide 800ms steps(1,end) infinite;left:50%;top:0;opacity:1}.layx-load-masker{border-radius:40px 0 0 40px;-moz-border-radius:40px 0 0 40px;-webkit-border-radius:40px 0 0 40px;background-color:#89abdd;-webkit-animation:layx-second-half-show 800ms steps(1,end) infinite;animation:layx-second-half-show 800ms steps(1,end) infinite;-moz-animation:layx-second-half-show 800ms steps(1,end) infinite;left:0;top:0;opacity:0}.layx-load-inner2 .layx-load-spiner,.layx-load-inner2 .layx-load-filler{background-color:#89abdd}.layx-load-inner2 .layx-load-masker{background-color:#4b86db}.layx-window.layx-skin-default{border:1px solid #3baced}.layx-window.layx-skin-default .layx-control-bar{background-color:#fff}.layx-window.layx-skin-cloud .layx-control-bar{background-color:#ecf0f1}.layx-window.layx-skin-cloud .layx-inlay-menus .layx-icon:hover{background-color:#bdc3c7}.layx-window.layx-skin-cloud .layx-button-item{background-color:#ecf0f1;border:1px solid #ccc}.layx-window.layx-skin-cloud .layx-button-item:hover{background-color:#bdc3c7;color:#fff;border:1px solid #ecf0f1}.layx-window.layx-skin-turquoise .layx-control-bar{background-color:#1abc9c;color:#fff}.layx-window.layx-skin-turquoise .layx-inlay-menus .layx-icon:hover{background-color:#16a085}.layx-window.layx-skin-turquoise .layx-button-item{background-color:#1abc9c;color:#fff;border:1px solid #1abc9c}.layx-window.layx-skin-turquoise .layx-button-item:hover{background-color:#16a085;border:1px solid #1abc9c}.layx-window.layx-skin-river .layx-control-bar{background-color:#3498db;color:#fff}.layx-window.layx-skin-river .layx-inlay-menus .layx-icon:hover{background-color:#2980b9}.layx-window.layx-skin-river .layx-button-item{background-color:#3498db;color:#fff;border:1px solid #3498db}.layx-window.layx-skin-river .layx-button-item:hover{background-color:#2980b9;border:1px solid #3498db}.layx-window.layx-skin-asphalt .layx-control-bar{background-color:#34495e;color:#fff}.layx-window.layx-skin-asphalt .layx-inlay-menus .layx-icon:hover{background-color:#2c3e50}.layx-window.layx-skin-asphalt .layx-button-item{background-color:#34495e;color:#fff;border:1px solid #34495e}.layx-window.layx-skin-asphalt .layx-button-item:hover{background-color:#2c3e50;border:1px solid #34495e}@keyframes layx-flicker{from{-webkit-box-shadow:1px 1px 24px rgba(0,0,0,.3);box-shadow:1px 1px 24px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 24px rgba(0,0,0,.3)}to{-webkit-box-shadow:1px 1px 12px rgba(0,0,0,.3);box-shadow:1px 1px 12px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 12px rgba(0,0,0,.3)}}@-webkit-keyframes layx-flicker{from{-webkit-box-shadow:1px 1px 24px rgba(0,0,0,.3);box-shadow:1px 1px 24px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 24px rgba(0,0,0,.3)}to{-webkit-box-shadow:1px 1px 12px rgba(0,0,0,.3);box-shadow:1px 1px 12px rgba(0,0,0,.3);-moz-box-shadow:1px 1px 12px rgba(0,0,0,.3)}}@-webkit-keyframes layx-spin{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-moz-transform:rotate(360deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:rotate(0deg)}}@keyframes layx-spin{0%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-moz-transform:rotate(360deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:rotate(0deg)}}@-webkit-keyframes layx-second-half-hide{0%{opacity:1}50%,100%{opacity:0}}@keyframes layx-second-half-hide{0%{opacity:1}50%,100%{opacity:0}}@-webkit-keyframes layx-second-half-show{0%{opacity:0}50%,100%{opacity:1}}@keyframes layx-second-half-show{0%{opacity:0}50%,100%{opacity:1}} -------------------------------------------------------------------------------- /layx.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * file : layx.css 3 | * gitee : https://gitee.com/monksoul/LayX 4 | * github : https://github.com/MonkSoul/Layx/ 5 | * author : 百小僧/MonkSoul 6 | * version : v2.5.4 7 | * create time : 2018.05.11 8 | * update time : 2018.11.03 9 | */ 10 | 11 | *[class^="layx-"] { 12 | box-sizing: border-box; 13 | -webkit-box-sizing: border-box; 14 | -moz-box-sizing: border-box; 15 | margin: 0; 16 | padding: 0; 17 | outline: none; 18 | border: none; 19 | background-color: transparent; 20 | } 21 | 22 | .layx-flexbox { 23 | display: -webkit-box; 24 | display: -ms-flexbox; 25 | display: flex; 26 | display: -webkit-flex; 27 | } 28 | 29 | .layx-flex-vertical { 30 | -webkit-box-align: center; 31 | -ms-flex-align: center; 32 | align-items: center; 33 | -webkit-align-items: center; 34 | -webkit-box-pack: start; 35 | -ms-flex-pack: start; 36 | justify-content: flex-start; 37 | -webkit-justify-content: flex-start; 38 | } 39 | 40 | .layx-flex-center { 41 | -webkit-box-align: center; 42 | -ms-flex-align: center; 43 | align-items: center; 44 | -webkit-align-items: center; 45 | -webkit-box-pack: center; 46 | -ms-flex-pack: center; 47 | justify-content: center; 48 | -webkit-justify-content: center; 49 | } 50 | 51 | .layx-flexauto { 52 | flex: 1; 53 | -webkit-box-flex: 1; 54 | -moz-box-flex: 1; 55 | -webkit-flex: 1; 56 | -ms-flex: 1; 57 | } 58 | 59 | .layx-shade, 60 | #layx-window-move { 61 | position: fixed; 62 | top: 0; 63 | right: 0; 64 | bottom: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100%; 68 | background-color: transparent; 69 | } 70 | 71 | body.ilayx-body { 72 | overflow: hidden !important; 73 | } 74 | 75 | .layx-window { 76 | position: fixed; 77 | overflow: visible !important; 78 | -webkit-box-orient: vertical; 79 | -webkit-box-direction: normal; 80 | -ms-flex-direction: column; 81 | flex-direction: column; 82 | color: #000; 83 | -webkit-tap-highlight-color: rgba(0,0,0,0); 84 | visibility: visible; 85 | border: none; 86 | } 87 | 88 | .layx-window.layx-flicker { 89 | animation-name: layx-flicker; 90 | -webkit-animation-name: layx-flicker; 91 | -moz-animation-name: layx-flicker; 92 | animation-duration: 0.12s; 93 | -webkit-animation-duration: 0.12s; 94 | -moz-animation-duration: 0.12s; 95 | animation-iteration-count: 8; 96 | -webkit-animation-iteration-count: 8; 97 | -moz-animation-iteration-count: 8; 98 | } 99 | 100 | .layx-window.layx-max-statu, .layx-window.layx-max-statu .layx-control-bar, .layx-window.layx-max-statu .layx-main, .layx-window.layx-max-statu .layx-statu-bar { 101 | border-radius: 0px !important; 102 | -webkit-border-radius: 0px !important; 103 | -moz-border-radius: 0px !important; 104 | } 105 | 106 | .layx-window.layx-min-statu { 107 | min-height: 0 !important; 108 | overflow: hidden !important; 109 | min-width: 0 !important; 110 | } 111 | 112 | .layx-window.layx-min-statu .layx-title { 113 | overflow: hidden !important; 114 | } 115 | 116 | .layx-window.layx-min-statu .layx-inlay-menus .layx-stick-menu, 117 | .layx-window.layx-min-statu .layx-inlay-menus .layx-debug-menu { 118 | display: none; 119 | } 120 | 121 | .layx-window.layx-bubble-type { 122 | overflow: visible !important; 123 | position: absolute !important; 124 | } 125 | 126 | .layx-window.layx-hide-statu { 127 | display: none !important; 128 | } 129 | 130 | .layx-control-bar { 131 | min-height: 30px; 132 | overflow: hidden; 133 | width: 100%; 134 | padding-left: 5px; 135 | } 136 | 137 | .layx-iconfont { 138 | width: 1em; 139 | height: 1em; 140 | vertical-align: -0.15em; 141 | fill: currentColor; 142 | overflow: hidden; 143 | font-size: 14px; 144 | line-height: normal; 145 | display: block; 146 | line-height: normal; 147 | } 148 | 149 | .layx-icon { 150 | text-align: center; 151 | } 152 | 153 | .layx-icon * { 154 | pointer-events: none; 155 | } 156 | 157 | .layx-left-bar { 158 | margin-right: 5px; 159 | } 160 | 161 | .layx-window-icon { 162 | -webkit-tap-highlight-color: rgba(0,0,0,0); 163 | } 164 | 165 | .layx-window-icon .layx-iconfont { 166 | font-size: 16px; 167 | } 168 | 169 | .layx-title, 170 | .layx-group-tab { 171 | -webkit-touch-callout: none; 172 | -webkit-user-select: none; 173 | -moz-user-select: none; 174 | -ms-user-select: none; 175 | user-select: none; 176 | margin-right: 5px; 177 | min-width: 0; 178 | -ms-touch-action: none; 179 | touch-action: none; 180 | -webkit-tap-highlight-color: rgba(0,0,0,0); 181 | } 182 | 183 | .layx-title { 184 | -webkit-app-region: drag; 185 | } 186 | 187 | .layx-group-tab { 188 | -webkit-app-region: no-drag; 189 | } 190 | 191 | .layx-title .layx-label, 192 | .layx-group-title .layx-label { 193 | line-height: normal; 194 | font-size: 14px; 195 | max-width: 100%; 196 | -webkit-line-clamp: 1; 197 | -webkit-box-orient: vertical; 198 | word-wrap: break-word; 199 | overflow: hidden; 200 | -o-text-overflow: ellipsis; 201 | text-overflow: ellipsis; 202 | white-space: nowrap; 203 | display: inline-block; 204 | pointer-events: none; 205 | visibility: visible; 206 | position: relative; 207 | top: -1px; 208 | top: 0px\0; 209 | } 210 | 211 | .layx-group-tab .layx-label { 212 | line-height: 28px; 213 | } 214 | 215 | .layx-group-tab.layx-type-group { 216 | overflow: visible; 217 | margin-right: 0; 218 | border-bottom: 1px solid #dddddd; 219 | } 220 | 221 | .layx-control-bar.layx-type-group { 222 | overflow: visible; 223 | border-bottom: 1px solid #dddddd; 224 | } 225 | 226 | .layx-group-title { 227 | height: 27px; 228 | line-height: 25px; 229 | max-width: 150px; 230 | width: 150px; 231 | padding: 0 8px; 232 | background-color: #f5f5f5; 233 | border: 1px solid #dddddd; 234 | border-width: 1px 1px 0 0; 235 | position: relative; 236 | color: #666; 237 | white-space: nowrap; 238 | min-width: 0; 239 | -webkit-tap-highlight-color: rgba(0,0,0,0); 240 | } 241 | 242 | .layx-title.layx-type-group .layx-group-title { 243 | height: 30px; 244 | line-height: 34px; 245 | } 246 | 247 | .layx-title.layx-type-group { 248 | overflow: visible; 249 | } 250 | 251 | .layx-title.layx-type-group .layx-group-title:first-child { 252 | border-left: 1px solid #dddddd; 253 | } 254 | 255 | .layx-group-title[data-enable="1"] { 256 | background-color: #fff; 257 | color: #000; 258 | } 259 | 260 | .layx-group-title[data-enable="1"]::after { 261 | position: absolute; 262 | top: 0; 263 | right: 0; 264 | bottom: 0; 265 | left: 0; 266 | height: 100%; 267 | width: 100%; 268 | content: ''; 269 | border-bottom: 1px solid #fff; 270 | } 271 | 272 | .layx-inlay-menus { 273 | height: 100%; 274 | height: 30px; 275 | line-height: 30px; 276 | position: relative; 277 | max-height: 30px; 278 | z-index: 2; 279 | } 280 | 281 | .layx-inlay-menus .layx-icon { 282 | width: 45px; 283 | -webkit-tap-highlight-color: rgba(0,0,0,0); 284 | } 285 | 286 | .layx-inlay-menus .layx-icon:hover { 287 | background-color: #e5e5e5; 288 | } 289 | 290 | .layx-inlay-menus .layx-icon.layx-destroy-menu:hover { 291 | background-color: #e81123 !important; 292 | color: #fff !important; 293 | } 294 | 295 | .layx-inlay-menus .layx-icon.layx-stick-menu[data-enable='1'] { 296 | color: #f00; 297 | } 298 | 299 | .layx-main { 300 | overflow: auto; 301 | position: relative; 302 | clear: both; 303 | -webkit-overflow-scrolling: touch; 304 | -webkit-transform: translate3d(0, 0, 0); 305 | -webkit-app-region: no-drag; 306 | } 307 | 308 | .layx-readonly { 309 | position: absolute; 310 | top: 0; 311 | right: 0; 312 | bottom: 0; 313 | left: 0; 314 | width: 100%; 315 | height: 100%; 316 | background: transparent; 317 | z-index: 199205270356; 318 | } 319 | 320 | .layx-group-main { 321 | position: absolute; 322 | top: 0; 323 | right: 0; 324 | bottom: 0; 325 | left: 0; 326 | height: 100%; 327 | width: 100%; 328 | z-index: 0; 329 | visibility: hidden; 330 | overflow: auto; 331 | -webkit-overflow-scrolling: touch; 332 | -webkit-transform: translate3d(0, 0, 0); 333 | } 334 | 335 | .layx-group-main[data-enable="1"] { 336 | z-index: 1; 337 | visibility: visible; 338 | } 339 | 340 | .layx-mouse-preventDefault { 341 | position: absolute; 342 | z-index: 3; 343 | height: 100%; 344 | width: 100%; 345 | left: 0; 346 | top: 0; 347 | right: 0; 348 | bottom: 0; 349 | overflow: hidden; 350 | background-color: transparent; 351 | } 352 | 353 | .layx-content-shade { 354 | position: absolute; 355 | z-index: 2; 356 | width: 100%; 357 | height: 100%; 358 | left: 0; 359 | right: 0; 360 | bottom: 0; 361 | top: 0; 362 | overflow: hidden; 363 | background-color: #fff; 364 | } 365 | 366 | .layx-html { 367 | width: 100%; 368 | height: 100%; 369 | position: absolute; 370 | top: 0; 371 | right: 0; 372 | bottom: 0; 373 | left: 0; 374 | z-index: 1; 375 | -webkit-overflow-scrolling: touch; 376 | -webkit-transform: translate3d(0, 0, 0); 377 | overflow: auto; 378 | } 379 | 380 | .layx-dialog-icon { 381 | margin-right: 10px; 382 | position: relative; 383 | top: -5px; 384 | } 385 | 386 | .layx-dialog-icon .layx-iconfont { 387 | font-size: 40px !important; 388 | } 389 | 390 | .layx-dialog-msg .layx-dialog-icon .layx-iconfont, .layx-dialog-tip .layx-dialog-icon .layx-iconfont { 391 | font-size: 25px !important; 392 | } 393 | 394 | .layx-dialog-msg .layx-dialog-icon, .layx-dialog-tip .layx-dialog-icon { 395 | top: 0; 396 | } 397 | 398 | .layx-dialog-icon-success { 399 | color: #01AAED; 400 | } 401 | 402 | .layx-dialog-icon-warn { 403 | color: #FFB800; 404 | } 405 | 406 | .layx-dialog-icon-error { 407 | color: #f00; 408 | } 409 | 410 | .layx-dialog-icon-help { 411 | color: #009688; 412 | } 413 | 414 | .layx-dialog-msg, 415 | .layx-dialog-tip, 416 | .layx-dialog-load { 417 | color: #000; 418 | padding: 10px; 419 | } 420 | 421 | .layx-dialog-alert, 422 | .layx-dialog-confirm, 423 | .layx-dialog-prompt { 424 | padding: 10px; 425 | color: #039; 426 | } 427 | 428 | .layx-dialog-prompt { 429 | width: 100%; 430 | } 431 | 432 | .layx-dialog-msg, .layx-dialog-tip { 433 | height: 100%; 434 | } 435 | 436 | .layx-dialog-content { 437 | font-size: 14px; 438 | } 439 | 440 | .layx-textarea { 441 | display: block; 442 | border: 1px solid #dddddd; 443 | width: 100%; 444 | resize: none; 445 | height: 60px; 446 | margin-top: 8px; 447 | padding: 8px; 448 | font-size: 15px; 449 | color: #000; 450 | line-height: 1.5; 451 | } 452 | 453 | .layx-textarea:focus { 454 | border: 1px solid #3baced; 455 | } 456 | 457 | .layx-buttons { 458 | padding: 8px 10px; 459 | text-align: right; 460 | } 461 | 462 | .layx-button-item { 463 | padding: 0 16px; 464 | height: 24px; 465 | line-height: normal; 466 | color: #000; 467 | font-size: 14px; 468 | border: 1px solid #adadad; 469 | outline: none; 470 | margin-left: 8px; 471 | display: inline-block; 472 | background-color: #e1e1e1; 473 | -webkit-tap-highlight-color: rgba(0,0,0,0); 474 | -webkit-user-select: none; 475 | -moz-user-select: none; 476 | -ms-user-select: none; 477 | user-select: none; 478 | } 479 | 480 | .layx-buttons .layx-button-item:hover { 481 | background-color: #e5f1fb; 482 | border: 1px solid #0078d7; 483 | } 484 | 485 | .layx-buttons .layx-button-item[disabled] { 486 | color: #999; 487 | cursor: not-allowed; 488 | } 489 | 490 | .layx-buttons .layx-button-item[disabled]:hover { 491 | background-color: #e1e1e1; 492 | border: 1px solid #adadad; 493 | } 494 | 495 | .layx-iframe { 496 | width: 1px; 497 | min-width: 100%; 498 | *width: 100%; 499 | height: 100%; 500 | position: absolute; 501 | top: 0; 502 | right: 0; 503 | bottom: 0; 504 | left: 0; 505 | z-index: 1; 506 | } 507 | 508 | .layx-statu-bar { 509 | border-top: 1px solid #dddddd; 510 | min-height: 25px; 511 | background-color: #eeeef2; 512 | } 513 | 514 | .layx-resizes[data-enable='0'] { 515 | visibility: hidden; 516 | } 517 | 518 | .layx-resizes > div { 519 | position: absolute; 520 | z-index: 3; 521 | -ms-touch-action: none; 522 | touch-action: none; 523 | } 524 | 525 | .layx-resize-top, 526 | .layx-resize-bottom { 527 | height: 3px; 528 | left: 3px; 529 | right: 3px; 530 | } 531 | 532 | .layx-resize-top { 533 | top: 0; 534 | cursor: n-resize; 535 | } 536 | 537 | .layx-resize-bottom { 538 | bottom: 0; 539 | cursor: s-resize; 540 | } 541 | 542 | .layx-resize-left, 543 | .layx-resize-right { 544 | width: 3px; 545 | top: 3px; 546 | bottom: 3px; 547 | } 548 | 549 | .layx-resize-left { 550 | left: 0; 551 | cursor: w-resize; 552 | } 553 | 554 | .layx-resize-right { 555 | right: 0; 556 | cursor: e-resize; 557 | } 558 | 559 | .layx-resize-left-top, 560 | .layx-resize-right-top, 561 | .layx-resize-left-bottom, 562 | .layx-resize-right-bottom { 563 | width: 3px; 564 | height: 3px; 565 | } 566 | 567 | .layx-resize-left-top { 568 | left: 0; 569 | top: 0; 570 | cursor: nw-resize; 571 | } 572 | 573 | .layx-resize-right-top { 574 | right: 0; 575 | top: 0; 576 | cursor: ne-resize; 577 | } 578 | 579 | .layx-resize-left-bottom { 580 | left: 0; 581 | bottom: 0; 582 | cursor: sw-resize; 583 | } 584 | 585 | .layx-resize-right-bottom { 586 | right: 0; 587 | bottom: 0; 588 | cursor: se-resize; 589 | } 590 | 591 | .layx-resize-top.layx-reisize-touch, 592 | .layx-resize-bottom.layx-reisize-touch { 593 | height: 16px; 594 | left: 16px; 595 | right: 16px; 596 | } 597 | 598 | .layx-resize-left.layx-reisize-touch, 599 | .layx-resize-right.layx-reisize-touch { 600 | width: 16px; 601 | top: 16px; 602 | bottom: 16px; 603 | } 604 | 605 | .layx-resize-left-top.layx-reisize-touch, 606 | .layx-resize-right-top.layx-reisize-touch, 607 | .layx-resize-left-bottom.layx-reisize-touch, 608 | .layx-resize-right-bottom.layx-reisize-touch { 609 | width: 16px; 610 | height: 16px; 611 | } 612 | 613 | .layx-resize-top.layx-reisize-touch { 614 | top: -8px; 615 | } 616 | 617 | .layx-resize-bottom.layx-reisize-touch { 618 | bottom: -8px; 619 | } 620 | 621 | .layx-resize-left.layx-reisize-touch { 622 | left: -8px; 623 | } 624 | 625 | .layx-resize-right.layx-reisize-touch { 626 | right: -8px; 627 | } 628 | 629 | .layx-resize-left-top.layx-reisize-touch { 630 | left: -8px; 631 | top: -8px; 632 | } 633 | 634 | .layx-resize-right-top.layx-reisize-touch { 635 | right: -8px; 636 | top: -8px; 637 | } 638 | 639 | .layx-resize-left-bottom.layx-reisize-touch { 640 | left: -8px; 641 | bottom: -8px; 642 | } 643 | 644 | .layx-resize-right-bottom.layx-reisize-touch { 645 | right: -8px; 646 | bottom: -8px; 647 | } 648 | 649 | .layx-resize-left[data-enable='0'], 650 | .layx-resize-top[data-enable='0'], 651 | .layx-resize-right[data-enable='0'], 652 | .layx-resize-bottom[data-enable='0'], 653 | .layx-resize-left-top[data-enable='0'], 654 | .layx-resize-left-bottom[data-enable='0'], 655 | .layx-resize-right-top[data-enable='0'], 656 | .layx-resize-right-bottom[data-enable='0'] { 657 | visibility: hidden; 658 | } 659 | 660 | .layx-auto-destroy-tip { 661 | position: absolute; 662 | bottom: 3px; 663 | right: 3px; 664 | height: 25px; 665 | line-height: 25px; 666 | z-index: 5; 667 | color: #444; 668 | background-color: #f1f1f1; 669 | padding: 0 8px; 670 | font-size: 13px; 671 | } 672 | 673 | .layx-code { 674 | border: 1px solid #dedede; 675 | border-radius: 3px; 676 | -webkit-border-radius: 3px; 677 | -moz-border-radius: 3px; 678 | padding: 10px; 679 | width: 100%; 680 | height: 100%; 681 | -webkit-overflow-scrolling: touch; 682 | -webkit-transform: translate3d(0, 0, 0); 683 | background: #f5f5f5; 684 | overflow: auto; 685 | } 686 | 687 | .layx-bubble, 688 | .layx-bubble-inlay { 689 | position: absolute; 690 | width: 0; 691 | height: 0; 692 | } 693 | 694 | .layx-bubble-bottom { 695 | top: -11px; 696 | left: 2px; 697 | border-left: 10px solid transparent; 698 | border-right: 10px solid transparent; 699 | border-bottom: 11px solid transparent; 700 | } 701 | 702 | .layx-bubble-inlay-bottom { 703 | top: 2px; 704 | left: -9px; 705 | border-left: 9px solid transparent; 706 | border-right: 9px solid transparent; 707 | border-bottom: 9px solid transparent; 708 | } 709 | 710 | .layx-bubble-top { 711 | bottom: -11px; 712 | left: 2px; 713 | border-left: 10px solid transparent; 714 | border-right: 10px solid transparent; 715 | border-top: 11px solid transparent; 716 | } 717 | 718 | .layx-bubble-inlay-top { 719 | bottom: 2px; 720 | left: -9px; 721 | border-left: 9px solid transparent; 722 | border-right: 9px solid transparent; 723 | border-top: 9px solid transparent; 724 | } 725 | 726 | .layx-bubble-right { 727 | top: 2px; 728 | left: -11px; 729 | border-top: 10px solid transparent; 730 | border-bottom: 10px solid transparent; 731 | border-right: 11px solid transparent; 732 | } 733 | 734 | .layx-bubble-inlay-right { 735 | top: -9px; 736 | left: 2px; 737 | border-top: 9px solid transparent; 738 | border-bottom: 9px solid transparent; 739 | border-right: 9px solid transparent; 740 | } 741 | 742 | .layx-bubble-left { 743 | top: 2px; 744 | right: -11px; 745 | border-top: 10px solid transparent; 746 | border-bottom: 10px solid transparent; 747 | border-left: 11px solid transparent; 748 | } 749 | 750 | .layx-bubble-inlay-left { 751 | top: -9px; 752 | right: 2px; 753 | border-top: 9px solid transparent; 754 | border-bottom: 9px solid transparent; 755 | border-left: 9px solid transparent; 756 | } 757 | 758 | .layx-pre { 759 | height: auto; 760 | width: 100%; 761 | font-size: 14px; 762 | font-family: Arial; 763 | border-radius: 3px; 764 | -webkit-border-radius: 3px; 765 | -moz-border-radius: 3px; 766 | display: block; 767 | font-family: Arial; 768 | } 769 | 770 | .layx-dot { 771 | display: inline-block; 772 | width: 25px; 773 | } 774 | 775 | .layx-load-animate { 776 | width: 32px; 777 | height: 32px; 778 | position: relative; 779 | margin-right: 10px; 780 | } 781 | 782 | .layx-load-inner, .layx-load-inner2 { 783 | position: absolute; 784 | width: 100%; 785 | height: 100%; 786 | border-radius: 40px; 787 | -webkit-border-radius: 40px; 788 | -moz-border-radius: 40px; 789 | overflow: hidden; 790 | left: 0; 791 | top: 0; 792 | } 793 | 794 | .layx-load-inner { 795 | opacity: 1; 796 | background-color: #89abdd; 797 | -webkit-animation: layx-second-half-hide 1.6s steps(1, end) infinite; 798 | animation: layx-second-half-hide 1.6s steps(1, end) infinite; 799 | -moz-animation: layx-second-half-hide 1.6s steps(1, end) infinite; 800 | } 801 | 802 | .layx-load-inner2 { 803 | opacity: 0; 804 | background-color: #4b86db; 805 | -webkit-animation: layx-second-half-show 1.6s steps(1, end) infinite; 806 | animation: layx-second-half-show 1.6s steps(1, end) infinite; 807 | -moz-animation: layx-second-half-show 1.6s steps(1, end) infinite; 808 | } 809 | 810 | .layx-load-spiner, .layx-load-filler, .layx-load-masker { 811 | position: absolute; 812 | width: 50%; 813 | height: 100%; 814 | } 815 | 816 | .layx-load-spiner { 817 | border-radius: 40px 0 0 40px; 818 | -webkit-border-radius: 40px 0 0 40px; 819 | -moz-border-radius: 40px 0 0 40px; 820 | background-color: #4b86db; 821 | -webkit-transform-origin: right center; 822 | -ms-transform-origin: right center; 823 | transform-origin: right center; 824 | -moz-transform-origin: right center; 825 | -webkit-animation: layx-spin 800ms infinite linear; 826 | animation: layx-spin 800ms infinite linear; 827 | -moz-animation: layx-spin 800ms infinite linear; 828 | left: 0; 829 | top: 0; 830 | } 831 | 832 | .layx-load-filler { 833 | border-radius: 0 40px 40px 0; 834 | -webkit-border-radius: 0 40px 40px 0; 835 | -moz-border-radius: 0 40px 40px 0; 836 | background-color: #4b86db; 837 | -webkit-animation: layx-second-half-hide 800ms steps(1, end) infinite; 838 | animation: layx-second-half-hide 800ms steps(1, end) infinite; 839 | -moz-animation: layx-second-half-hide 800ms steps(1, end) infinite; 840 | left: 50%; 841 | top: 0; 842 | opacity: 1; 843 | } 844 | 845 | .layx-load-masker { 846 | border-radius: 40px 0 0 40px; 847 | -moz-border-radius: 40px 0 0 40px; 848 | -webkit-border-radius: 40px 0 0 40px; 849 | background-color: #89abdd; 850 | -webkit-animation: layx-second-half-show 800ms steps(1, end) infinite; 851 | animation: layx-second-half-show 800ms steps(1, end) infinite; 852 | -moz-animation: layx-second-half-show 800ms steps(1, end) infinite; 853 | left: 0; 854 | top: 0; 855 | opacity: 0; 856 | } 857 | 858 | .layx-load-inner2 .layx-load-spiner, .layx-load-inner2 .layx-load-filler { 859 | background-color: #89abdd; 860 | } 861 | 862 | .layx-load-inner2 .layx-load-masker { 863 | background-color: #4b86db; 864 | } 865 | /*default 皮肤*/ 866 | .layx-window.layx-skin-default { 867 | border: 1px solid #3baced; 868 | } 869 | 870 | .layx-window.layx-skin-default .layx-control-bar { 871 | background-color: #fff; 872 | } 873 | 874 | .layx-window.layx-skin-default .layx-inlay-menus .layx-icon:hover { 875 | } 876 | 877 | .layx-window.layx-skin-default .layx-button-item { 878 | } 879 | 880 | .layx-window.layx-skin-default .layx-button-item:hover { 881 | } 882 | /*cloud 皮肤*/ 883 | .layx-window.layx-skin-cloud { 884 | } 885 | 886 | .layx-window.layx-skin-cloud .layx-control-bar { 887 | background-color: #ecf0f1; 888 | } 889 | 890 | .layx-window.layx-skin-cloud .layx-inlay-menus .layx-icon:hover { 891 | background-color: #bdc3c7; 892 | } 893 | 894 | .layx-window.layx-skin-cloud .layx-button-item { 895 | background-color: #ecf0f1; 896 | border: 1px solid #ccc; 897 | } 898 | 899 | .layx-window.layx-skin-cloud .layx-button-item:hover { 900 | background-color: #bdc3c7; 901 | color: #fff; 902 | border: 1px solid #ecf0f1; 903 | } 904 | 905 | /*turquoise 皮肤*/ 906 | .layx-window.layx-skin-turquoise { 907 | } 908 | 909 | .layx-window.layx-skin-turquoise .layx-control-bar { 910 | background-color: #1abc9c; 911 | color: #fff; 912 | } 913 | 914 | .layx-window.layx-skin-turquoise .layx-inlay-menus .layx-icon:hover { 915 | background-color: #16a085; 916 | } 917 | 918 | .layx-window.layx-skin-turquoise .layx-button-item { 919 | background-color: #1abc9c; 920 | color: #fff; 921 | border: 1px solid#1abc9c; 922 | } 923 | 924 | .layx-window.layx-skin-turquoise .layx-button-item:hover { 925 | background-color: #16a085; 926 | border: 1px solid #1abc9c; 927 | } 928 | /*river 皮肤*/ 929 | .layx-window.layx-skin-river { 930 | } 931 | 932 | .layx-window.layx-skin-river .layx-control-bar { 933 | background-color: #3498db; 934 | color: #fff; 935 | } 936 | 937 | .layx-window.layx-skin-river .layx-inlay-menus .layx-icon:hover { 938 | background-color: #2980b9; 939 | } 940 | 941 | .layx-window.layx-skin-river .layx-button-item { 942 | background-color: #3498db; 943 | color: #fff; 944 | border: 1px solid #3498db; 945 | } 946 | 947 | .layx-window.layx-skin-river .layx-button-item:hover { 948 | background-color: #2980b9; 949 | border: 1px solid #3498db; 950 | } 951 | 952 | /*asphalt 皮肤*/ 953 | .layx-window.layx-asphalt-river { 954 | } 955 | 956 | .layx-window.layx-skin-asphalt .layx-control-bar { 957 | background-color: #34495e; 958 | color: #fff; 959 | } 960 | 961 | .layx-window.layx-skin-asphalt .layx-inlay-menus .layx-icon:hover { 962 | background-color: #2c3e50; 963 | } 964 | 965 | .layx-window.layx-skin-asphalt .layx-button-item { 966 | background-color: #34495e; 967 | color: #fff; 968 | border: 1px solid #34495e; 969 | } 970 | 971 | .layx-window.layx-skin-asphalt .layx-button-item:hover { 972 | background-color: #2c3e50; 973 | border: 1px solid #34495e; 974 | } 975 | 976 | @keyframes layx-flicker { 977 | from { 978 | -webkit-box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 979 | box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 980 | -moz-box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 981 | } 982 | 983 | to { 984 | -webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 985 | box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 986 | -moz-box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 987 | } 988 | } 989 | 990 | @-webkit-keyframes layx-flicker { 991 | from { 992 | -webkit-box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 993 | box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 994 | -moz-box-shadow: 1px 1px 24px rgba(0, 0, 0, .3); 995 | } 996 | 997 | to { 998 | -webkit-box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 999 | box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 1000 | -moz-box-shadow: 1px 1px 12px rgba(0, 0, 0, .3); 1001 | } 1002 | } 1003 | 1004 | @-webkit-keyframes layx-spin { 1005 | 0% { 1006 | -webkit-transform: rotate(360deg); 1007 | transform: rotate(360deg); 1008 | -moz-transform: rotate(360deg); 1009 | } 1010 | 1011 | 100% { 1012 | -webkit-transform: rotate(0deg); 1013 | transform: rotate(0deg); 1014 | -moz-transform: rotate(0deg); 1015 | } 1016 | } 1017 | 1018 | @keyframes layx-spin { 1019 | 0% { 1020 | -webkit-transform: rotate(360deg); 1021 | transform: rotate(360deg); 1022 | -moz-transform: rotate(360deg); 1023 | } 1024 | 1025 | 100% { 1026 | -webkit-transform: rotate(0deg); 1027 | transform: rotate(0deg); 1028 | -moz-transform: rotate(0deg); 1029 | } 1030 | } 1031 | 1032 | @-webkit-keyframes layx-second-half-hide { 1033 | 0% { 1034 | opacity: 1; 1035 | } 1036 | 1037 | 50%, 100% { 1038 | opacity: 0; 1039 | } 1040 | } 1041 | 1042 | @keyframes layx-second-half-hide { 1043 | 0% { 1044 | opacity: 1; 1045 | } 1046 | 1047 | 50%, 100% { 1048 | opacity: 0; 1049 | } 1050 | } 1051 | 1052 | @-webkit-keyframes layx-second-half-show { 1053 | 0% { 1054 | opacity: 0; 1055 | } 1056 | 1057 | 50%, 100% { 1058 | opacity: 1; 1059 | } 1060 | } 1061 | 1062 | @keyframes layx-second-half-show { 1063 | 0% { 1064 | opacity: 0; 1065 | } 1066 | 1067 | 50%, 100% { 1068 | opacity: 1; 1069 | } 1070 | } 1071 | -------------------------------------------------------------------------------- /doc/doc.js: -------------------------------------------------------------------------------- 1 | if (!("classList" in document.documentElement)) { 2 | Object.defineProperty(HTMLElement.prototype, 'classList', { 3 | get: function () { 4 | var self = this; 5 | function update(fn) { 6 | return function (value) { 7 | var classes = self.className.split(/\s+/g), 8 | index = classes.indexOf(value); 9 | 10 | fn(classes, index, value); 11 | self.className = classes.join(" "); 12 | } 13 | } 14 | 15 | return { 16 | add: update(function (classes, index, value) { 17 | if (!~index) classes.push(value); 18 | }), 19 | 20 | remove: update(function (classes, index) { 21 | if (~index) classes.splice(index, 1); 22 | }), 23 | 24 | toggle: update(function (classes, index, value) { 25 | if (~index) 26 | classes.splice(index, 1); 27 | else 28 | classes.push(value); 29 | }), 30 | 31 | contains: function (value) { 32 | return !!~self.className.split(/\s+/g).indexOf(value); 33 | }, 34 | 35 | item: function (i) { 36 | return self.className.split(/\s+/g)[i] || null; 37 | } 38 | }; 39 | } 40 | }); 41 | } 42 | function updateFloat(triggerEle) { 43 | if (layx.checkVisual(triggerEle, document.getElementById("floatThat-bottom"), false)) { 44 | layx.visual("float-bottom"); 45 | layx.updateFloatWinPosition("float-bottom"); 46 | } 47 | else { 48 | layx.destroy("float-bottom"); 49 | } 50 | if (layx.checkVisual(triggerEle, document.getElementById("floatThat-left"), false)) { 51 | layx.visual("float-left"); 52 | layx.updateFloatWinPosition("float-left"); 53 | } 54 | else { 55 | layx.destroy("float-left"); 56 | } 57 | if (layx.checkVisual(triggerEle, document.getElementById("floatThat-right"), false)) { 58 | layx.visual("float-right"); 59 | layx.updateFloatWinPosition("float-right"); 60 | } 61 | else { 62 | layx.destroy("float-right"); 63 | } 64 | if (layx.checkVisual(triggerEle, document.getElementById("floatThat-top"), false)) { 65 | layx.visual("float-top"); 66 | layx.updateFloatWinPosition("float-top"); 67 | } 68 | else { 69 | layx.destroy("float-top"); 70 | } 71 | } 72 | window.onload = function () { 73 | if (window.layx) { 74 | layx.group('layx', [{ 75 | id: 'info', 76 | title: '关于', 77 | cloneElementContent: false, 78 | content: layx.multiLine(function () {/* 79 | 80 | 101 | 102 |
103 |

序言

104 |

Layx 新一代Web弹窗组件。

105 |

gzip压缩版仅 ，非常小巧。

106 |

项目

107 | 115 |

信息

116 | 124 |

特性

125 | 150 |
151 | 152 | */ }) 153 | }, { 154 | id: 'demo', 155 | title: '示例', 156 | cloneElementContent: false, 157 | content: document.getElementById('code') 158 | }, { 159 | id: 'doc', 160 | title: '文档', 161 | type: 'url', 162 | url: './doc.html' 163 | }, 164 | { 165 | id: 'help', 166 | title: '常见问题', 167 | type: 'url', 168 | url: './help.html' 169 | }], 0, { 170 | mergeTitle: false, 171 | title: 'Layx v' + layx.v, 172 | width: 320, 173 | height: 568, 174 | minWidth: 320, 175 | minHeight: 568, 176 | position: [20, 20], 177 | closable: false, 178 | closeMenu: false, 179 | debugMenu: true, 180 | minable: false, 181 | minMenu: false, 182 | stickMenu: true, 183 | event: { 184 | onmax: { 185 | after: function (layxWindow, winform) { 186 | updateFloat(layxWindow.querySelector("#layx-layx-demo-html")); 187 | if (layx.checkVisual(layxWindow, layx.getButton(winform.id, 'log'), false)) { 188 | layx.visual("float-log"); 189 | layx.updateFloatWinPosition("float-log"); 190 | } 191 | else { 192 | layx.destroy("float-log"); 193 | } 194 | } 195 | }, 196 | onrestore: { 197 | after: function (layxWindow, winform) { 198 | updateFloat(layxWindow.querySelector("#layx-layx-demo-html")); 199 | if (layx.checkVisual(layxWindow, layx.getButton(winform.id, 'log'), false)) { 200 | layx.visual("float-log"); 201 | layx.updateFloatWinPosition("float-log"); 202 | } 203 | else { 204 | layx.destroy("float-log"); 205 | } 206 | } 207 | }, 208 | onmove: { 209 | progress: function (layxWindow, winform) { 210 | updateFloat(layxWindow.querySelector("#layx-layx-demo-html")); 211 | if (layx.checkVisual(layxWindow, layx.getButton(winform.id, 'log'), false)) { 212 | layx.visual("float-log"); 213 | layx.updateFloatWinPosition("float-log"); 214 | } 215 | else { 216 | layx.destroy("float-log"); 217 | } 218 | } 219 | }, 220 | onresize: { 221 | progress: function (layxWindow, winform) { 222 | updateFloat(layxWindow.querySelector("#layx-layx-demo-html")); 223 | if (layx.checkVisual(layxWindow, layx.getButton(winform.id, 'log'), false)) { 224 | layx.visual("float-log"); 225 | layx.updateFloatWinPosition("float-log"); 226 | } 227 | else { 228 | layx.destroy("float-log"); 229 | } 230 | } 231 | } 232 | }, 233 | statusBar: true, 234 | buttons: [ 235 | { 236 | id: 'donate', 237 | label: '捐赠', 238 | callback: function (id, button, event) { 239 | layx.html('donate', '请作者喝杯咖啡', '
', { width: 300, height: 385 }); 240 | }, 241 | }, 242 | { 243 | id: 'source', 244 | label: '鉴赏', 245 | callback: function (id, button, event) { 246 | event.stopPropagation(); 247 | layx.group('source', [ 248 | { 249 | id: 'layxss', 250 | title: 'layx.css', 251 | type: "url", 252 | url: "./layxcss.html" 253 | }, 254 | { 255 | id: 'layxjs', 256 | title: 'layx.js', 257 | type: "url", 258 | url: "./layxjs.html" 259 | } 260 | ], 0, { mergeTitle: false, title: 'Layx v' + layx.v + " 源代码鉴赏" }); 261 | }, 262 | }, 263 | { 264 | id: 'log', 265 | label: '日志', 266 | callback: function (id, button, event) { 267 | event.stopPropagation(); 268 | layx.destroyInlay("float-log"); 269 | layx.html('log', 'Layx 更新日志 v' + layx.v, layx.multiLine(function () {/* 270 |
271 |

# 2018.11.03 v2.5.4 发布

272 | 
273 | - [修复] 关闭窗口、最小化窗口不能恢复页面滚动动态bug，感谢 QQ：869943174
274 |
275 |

# 2018.10.09 v2.5.3 发布

276 | 
277 | - [修复] 储存窗口大小位置bug，感谢 QQ：315976369
278 |
279 |

# 2018.09.22 v2.5.2 发布

280 | 
281 | - [修复] useFrameTitle:true bug，感谢 #7
282 | - [修复] 窗口百分比居中bug，感谢 QQ：1034937343
283 |
284 |

# 2018.09.17 v2.5.0 发布

285 | 
286 | - [新增] layx.setSize(id,area) 方法，可以动态设置窗口宽度、高度
287 | - [新增] 【常见问题】栏目
288 |
289 |

# 2018.07.17 v2.4.9 发布

290 | 
291 | - [新增] options.existFlicker参数，可以配置是否开启窗口存在闪烁
292 | - [新增] options.enableDomainFocus参数，设置是否支持跨域点击，默认为true，建议设置为false
293 | - [新增] 强制关闭窗口方法：layx.destroy(id,params,force)，设置force为true表示强制关闭
294 | - [更新] 代码优化
295 | - [修复] alert窗口滚动条 bug
296 | - [修复] 自动获取iframe标题 bug
297 | - [修复] iframe窗口焦点事件 bug
298 | - [修复] 合并窗口组样式 bug
299 |
300 |

# 2018.06.21 v2.4.8 发布

301 | 
302 | - [新增] options.buttonKey 配置按钮快捷键，支持enter和ctrl+enter
303 | - [更新] 输入框prompt快捷键为：Ctrl+Enter，避免和多行文本textarea换行冲突
304 | - [修复] confirm，prompt 冒泡bug
305 | - [修复] 输入框prompt 回车值为null bug
306 |
307 |

# 2018.06.18 v2.4.6 发布

308 | 
309 | - [新增] 有操作按钮的窗口都能触发回车操作
310 | - [更新] 禁止操作按钮文本选中
311 | - [修复] 修复监听回车操作bug
312 |
313 |

# 2018.06.12 v2.4.5 发布

314 | 
315 | - [新增] options.focusToReveal 参数，设置是否获取焦点后前置
316 | - [新增] options.dialogType 内置参数，配置alert，prompt，confirm支持Enter回车键触发按钮
317 | - [更新] layx.max最大化机制，支持最大化后再次最大化，适应浏览器大小调整后自动自适应
318 | - [更新] 记录窗口位置采用localStorge存储，之前采用sessionStorge
319 | - [修复] layx窗口点击冒泡 bug
320 | - [修复] layx.setPosition不能记住当前位置 bug
321 | - [修复] 最大化还显示圆角bug
322 |
323 |

# 2018.06.07 v2.4.4 发布

324 | 
325 | - [更新] layx.css 去除无关代码，加强layx.css 样式内聚性
326 | - [更新] 窗口最大化时应该禁止圆角，确保最大化覆盖页面
327 | - [更新] 窗口组点击切换时有延迟
328 | - [更新] alert、msg、tip、confirm、prompt代码
329 | - [修复] css vh/vw 单位 转换bug
330 | - [修复] layx.setPosition之后刷新页面不能保存当前位置
331 |
332 |

# 2018.06.04 v2.4.1 发布

333 | 
334 | - [新增] 新增 tip 提示窗口
335 | - [新增] options.skin 内置皮肤设置，支持default、cloud、turquoise、river、asphalt
336 | - [新增] 自定义皮肤功能
337 | - [新增] options.borderRadius 圆角设置
338 | - [新增] 阻隔层禁止右键，避免恶意修改
339 | - [更新] 网页窗口加载代码
340 | - [更新] 浮动窗口气泡自适应主题功能
341 | - [修复] top.layx打开新窗口被遮盖 bug
342 | - [修复] 窗口焦点事件触发多次 bug
343 | - [修复] 同域网页窗口ESC快捷键无作用 bug
344 | - [修复] 窗口禁止冒泡触发焦点事件 bug
345 | - [修复] 只读窗口、阻隔层右键不兼容 bug
346 | - [修复] 只读窗口不能获取焦点 bug
347 | - [修复] 窗口禁止获取焦点后还能触发置顶和事件 bug
348 | - [修复] 窗口图标不对齐 bug
349 | - [修复] 加载动画 火狐、Safari旧浏览器样式 bug
350 | - [修复] bootstrap、Element UI等第三方UI样式冲突 bug
351 | - [修复] 文本窗口、页面窗口、窗口组窗口 onload事件 bug
352 |
353 |

# 2018.06.01 v2.3.5 发布

354 | 
355 | - [新增] options.readonly 参数，设置窗口为只读类型
356 | - [新增] options.shadeDestroy参数，用来设置点击阻隔空白区域关闭窗口
357 | - [新增] options.shadable 支持背景透明度设置，取值范围：0-1
358 | - [新增] css3 vh、vw单位支持，特用于width，height，minWidth，minHeight使用
359 | - [更新] layx.css 兼容处理
360 | - [修复] 网页窗口加载失败后加载提示不能隐藏 bug
361 | - [修复] 自定义loadingText bug
362 | - [修复] file:协议 bug
363 |
364 |

# 2018.05.31 v2.3.2 发布

365 | 
366 | - [新增] 窗口组 options.preload参数，可以设置窗口组预加载个数
367 | - [新增] 双击窗口图标关闭窗口
368 | - [新增] 浮动窗自适应功能
369 | - [新增] 窗口拖动方向为左、右、下边时最大拖动都必须留15px位置
370 | - [新增] options.dragInTopToMax 用来设置是否拖动到顶部自动最大化
371 | - [更新] 加载窗口代码、新增加载动画
372 | - [更新] layx.css 样式表
373 | - [更新] 加载内容特效
374 | - [修复] 窗口拖出可视窗口顶部 bug
375 | - [修复] IOS系统safari浏览器点击屏幕闪动 bug
376 | - [修复] 设置文本窗口内容、窗口组文本窗口内容 取用模式 bug
377 |
378 |

# 2018.05.29 v2.2.9 发布

379 | 
380 | - [新增] layx.getElementPos(el) 方法，获取元素绝对坐标 
381 | - [新增] layx.destroyInlay(id); 内部关闭窗口方法，相当于点击了 关闭按钮 关闭
382 | - [新增] layx.checkVisual(pEle, ele, isAllCheck); 方法，判断元素是否在某个元素内部并且可见！（也就是屏幕能够看到它）
383 | - [新增] layx.getButton(id,buttonId); 方法，用来获取状态栏按钮Element对象
384 | - [更新] layx.css 样式，支持Electron无边框窗口拖曳
385 | - [更新] 浮动窗窗口示例、支持浮动窗口屏幕不可见时隐藏，可见时显示
386 | - [修复] cloneElementContent:false bug
387 |

# 2018.05.28 v2.2.7 发布

388 | 
389 | - [新增] ESC关闭获取焦点的窗口
390 | - [新增] options.escKey 开关，设置是否启用esc关闭窗口功能
391 | - [新增] event.ondestroy.before参数 escKey，表示是否按下esc键
392 | - [新增] 自动判断拷贝DOM元素如果display:none自动设置为显示
393 | - [新增] 提示框图标设置
394 | - [新增] options.dialogIcon，设置提示框图标，支持alert,confirm,msg
395 | - [新增] 按钮title提示
396 | - [更新] 触摸代码、新增触摸电脑的支持（同时支持鼠标、触摸）
397 | - [修复] 文本窗口不触发焦点事件 bug
398 | - [修复] 点击状态栏按钮层不能置顶bug
399 | - [修复] IOS系统Safari不支持iFrame bug
400 | - [修复] 最小化样式超出 bug
401 |

# 2018.05.27 v2.2.4 发布

402 | 
403 | - [新增] 移动端拖动窗口、拖曳大小支持，划时代的更新！！！！
404 | - [更新] 样式表支持移动端处理
405 | - [更新] 取消拖曳窗口、拖动窗口屏蔽滚动条事件
406 | - [更新] 控制栏点击事件代码、新增移动端事件判断处理
407 |

# 2018.05.26 v2.2.3 发布

408 | 
409 | - [新增] 浮动窗口方向控制（上、下、左、右）
410 | - [新增] 窗口组切换前后事件 event.onswitch
411 | - [更新] 拖曳容器代码
412 | - [更新] layx.updateFloatTargetPosition(id) 为 layx.updateFloatWinPosition(id,direction);
413 | - [更新] 窗口组切换代码
414 | - [更新] 拖曳容器样式
415 | - [修复] layx.prompt 默认值 bug
416 | - [修复] layx.load 加载 bug
417 |

# 2018.05.25 v2.2.0 发布

418 | 
419 | - [新增] 浮动窗口类型
420 | - [新增] 浮动窗口options.floatTarget参数，floatTarget 用来设置吸附到那个元素上
421 | - [新增] options.mergeTitle 参数，表示窗口组标题是合并还是不合并
422 | - [新增] 窗口调试信息按钮，开发阶段非常方便调试工作
423 | - [新增] 窗口最小化状态下不显示置顶按钮、调试按钮
424 | - [新增] 更新浮动窗口位置方法 layx.updateFloatTargetPosition(id);
425 | - [新增] 设置窗口位置 layx.setPosition(id,position,isFloatTarget); isFloatTarget 参数，用来判断是否是浮动窗口
426 | - [新增] event.onvisual 事件，控制窗口显示隐藏，有区别于销毁
427 | - [新增] layx.visual(id, status, params) 方法，控制窗口显示隐藏
428 | - [更新] winform.windowId为winform.layxWindowId，winform.window为layxWindow
429 | - [更新] 恢复提示为：还原
430 | - [更新] 窗口组样式
431 | - [修复] 定时器 bug
432 | - [修复] 拖动、最大化滚动条 bug
433 | - [修复] IE10 bug
434 |

# 2018.05.24 v2.1.6 发布

435 | 
436 | - [新增] 窗口冒泡默认处理方法
437 | - [新增] 输入框prompt 默认值设置
438 | - [新增] 窗口存在事件event.onexist,常用于窗口已经打开刷新URL操作
439 | - [新增] 提示框、消息框、询问框、输入框、加载框 宽度高度自适应功能
440 | - [新增] buttons配置参数id、classes、style属性、提供按钮更多定制功能
441 | - [新增] buttons配置参数callback中提供按钮自身DOM对象
442 | - [新增] buttons配置参数callback中提供按钮event对象，用来处理冒泡事件和默认事件
443 | - [新增] ondestroy.before回调参数inside参数，用来判断是点击内置按钮关闭还是用户调用关闭
444 | - [新增] ondestroy.before回调参数params参数，记录用户关闭传递的参数
445 | - [新增] 操作按钮启用、禁用操作 setButtonStatus(id, buttonId, isEnable);
446 | - [更新] layx.destroy方法，新增params参数，可关闭之前传递参数，常用于event.ondestroy.before中判断
447 | - [更新] 提示框、消息框、询问框、输入框、加载框生成代码
448 | - [更新] 窗口最小宽度、最小高度为200
449 | - [修复] 手机IOS自带浏览器滚动条bug
450 | - [修复] 按钮冒泡事件 bug
451 |

# 2018.05.23 v2.1.3 发布

452 | 
453 | - [新增] storeStatus 配置参数，记录窗口位置信息，即使刷新页面还能保存（基于sessionStorage存储）
454 | - [新增] isOverToMax 配置参数、控制初始化窗口时 超出可视区域自动最大化
455 | - [新增] 支持跨域网站获取焦点事件
456 | - [新增] onfocus焦点事件监听
457 | - [更新] 拖动窗口、拖曳窗口流畅度
458 | - [更新] layx.css样式，添加各个浏览器兼容性处理
459 | - [更新] layx.js 代码
460 | - [修复] Firefox Developer Edition 版本关闭 bug
461 |

# 2018.05.20 v2.1.0 发布

462 | 
463 | - [新增] cloneElementContent 参数，可配置 HTMLElement 是拷贝模式还是取用模式
464 | - [新增] 多行字符串处理方法
465 | - [新增] 内容正在加载中动态提示
466 | - [新增] 重载页面窗口方法
467 | - [更新] 提示框、询问框 内容内容对齐方式
468 | - [修复] 禁用窗口最大化后拖曳到顶部再拖下来位置错误 bug
469 | - [修复] 禁用恢复操作后窗口最大化状态往下拖动窗口位置错误 bug
470 | - [修复] 内容窗口滚动条 bug
471 | - [修复] 内容窗口内容高度不自动高度 bug
472 | - [修复] 窗口组不传默认索引出错bug， 默认为0，也就是第一个
473 | - [修复] 禁用窗口调整大小后拖曳到顶部还能最大化 bug
474 | - [修复] 加载完成触发两次 bug
475 | - [修复] 提示框、消息框、询问框、加载框、输入框 事件不应用 bug
476 | - [修复] 页面窗口加载监听机制中遮罩对象获取错误 bug
477 | - [修复] 窗口处于最小化或最大化时还能最小化，最大化 bug
478 | - [修复] 设置窗口位置 bug
479 | - [修复] 设置页面窗口地址时不显示 加载遮罩层 bug
480 | - [修复] frames、buttons 不能深度复制对象 bug
481 | - [修复] 设置窗口组文本内容、URL内容 bug
482 |

# 2018.05.18 v2.0.5 发布

483 | 
484 | - [新增] 窗口组类型
485 | - [新增] frames,frameIndex 配置参数
486 | - [新增] setGroupContent，setGroupTitle，setGroupUrl，setGroupIndex，group方法
487 | - [更新] layx.css 样式表
488 | - [修复] 最小化样式
489 | - [修复] 窗口组加载完成bug
490 |

# 2018.05.17 v2.0.4 发布

491 | 
492 | - [新增] buttons 配置属性
493 | - [更新] 提示框、询问框、输入框代码
494 |

# 2018.05.16 v2.0.3 发布

495 | 
496 | - [新增] style 参数，可以嵌入css样式表
497 | - [新增] 打开新窗口时如果可视区域小于窗口初始化宽高度，默认最大化
498 | - [修复] 拖动层、拖曳层调整大小多窗口冲突bug
499 | - [修复] 部分浏览器页面窗口不能自适应 bug
500 | - [修复] 文本窗口样式被全局应用 bug
501 |

# 2018.05.15 v2.0.2 发布

502 | 
503 | - [新增] var winform = layx.html(id,title,content,options) 快捷打开文本窗口方法
504 | - [新增] var winform = layx.iframe(id,title,url,options) 快捷打开网页窗口方法
505 | - [新增] 窗口自动关闭文本可自定义功能：autodestroyText
506 | - [新增] 打开一个存在的窗口时窗口闪烁获取焦点
507 | - [更新] 调整最小化后显示宽度为：240px
508 | - [修复] 点击文本窗口内容无法置顶 bug
509 | - [修复] 置顶按钮点击切换 title 提示 bug
510 | - [修复] 置顶层带有阻隔层时没有阻隔的bug
511 | - [修复] 低版本Chrome 浏览器bug
512 |

# 2018.05.12 v2.0.0 发布

513 | 
514 | - [新增] v2.0.0 正式发布
515 |

# 2018.05.06 v1.0.0 发布

516 | 
517 | - [新增] v1.0.0 正式发布
518 |
519 | */ }), { width: 500, height: 500 }); 520 | }, 521 | }, 522 | { 523 | id: 'open-run', 524 | label: '调试', 525 | callback: function (id, button, event) { 526 | event.stopPropagation(); 527 | layx.html('eval', 'Layx 在线调试 支持Ctrl+Enter运行', layx.multiLine(function () { /* 528 | 529 | 538 | 539 |
540 | 543 |
544 | */}), { 545 | width: 450, height: 450, 546 | moveLimit: { 547 | leftOut: false, 548 | rightOut: false, 549 | topOut: false, 550 | bottomOut: false, 551 | }, 552 | stickMenu: true, 553 | statusBar: true, 554 | buttonKey: 'ctrl+enter', 555 | buttons: [ 556 | { 557 | id: 'run', 558 | label: '运行', 559 | callback: function (id, button, event) { 560 | try { 561 | var codeStr = document.querySelector("#eval-textarea"); 562 | if (!codeStr.value) { 563 | codeStr.focus(); 564 | } 565 | else { 566 | eval(codeStr.value); 567 | } 568 | } catch (e) { 569 | alert("请输入正确的代码再执行。"); 570 | } 571 | } 572 | } 573 | ] 574 | }); 575 | } 576 | } 577 | ] 578 | }); 579 | 580 | layx.tip('Layx 新一代Web弹窗组件.', document.getElementById('tip-top'), 'top'); 581 | layx.tip('Layx 新一代Web弹窗组件.', document.getElementById('tip-bottom'), 'bottom'); 582 | layx.tip('Layx 新一代Web弹窗组件.', document.getElementById('tip-left'), 'left'); 583 | layx.tip('Layx 新一代Web弹窗组件.', document.getElementById('tip-right'), 'right'); 584 | 585 | var logBtn = layx.getButton("layx", "log"); 586 | var winform = layx.html('float-log', 'Layx v' + layx.v + " 更新日志", layx.multiLine(function () {/* 587 |
588 | 
589 | - [修复] 关闭窗口、最小化窗口不能恢复页面滚动动态bug，感谢 QQ：869943174
590 |
591 | */ }), { 592 | floatTarget: logBtn, 593 | width: 320, 594 | height: 150, 595 | minHeight: 110, 596 | alwaysOnTop: true, 597 | floatDirection: 'top', 598 | autodestroy: 10000, 599 | event: { 600 | ondestroy: { 601 | before: function (layxWindow, winform, params, inside, escKey) { 602 | if (inside === false) { 603 | layx.visual(winform.id, false); 604 | layx.updateFloatWinPosition(winform.id); 605 | return false; 606 | } 607 | } 608 | }, 609 | onexist: function (layxWindow, winform) { 610 | layx.visual(winform.id, true); 611 | } 612 | } 613 | }); 614 | 615 | var demoHtml = document.getElementById("layx-layx-demo-html"); 616 | if (demoHtml) { 617 | demoHtml.onscroll = function () { 618 | updateFloat(this); 619 | } 620 | } 621 | 622 | window.onscroll = function () { 623 | layx.updateFloatWinPosition("float-log"); 624 | } 625 | } 626 | var runs = document.querySelectorAll(".run"); 627 | for (var i = 0; i < runs.length; i++) { 628 | runs[i].onclick = function (e) { 629 | e = e || window.event; 630 | var pre = this.parentNode.querySelector("pre"); 631 | eval(pre.innerText); 632 | e.stopPropagation(); 633 | }; 634 | } 635 | var toc = document.querySelector("#toc"); 636 | var code = document.querySelector("#layx-layx-demo-html"); 637 | code = code ? code : document.body; 638 | var hTitles = this.document.querySelectorAll("#code h1,#code h2,#code h3,#code h4,#code h5,#code h6"); 639 | for (var i = 0; i < hTitles.length; i++) { 640 | var a = document.createElement("a"); 641 | a.classList.add("toc-title"); 642 | a.setAttribute("data-type", hTitles[i].tagName.toLowerCase()); 643 | a.innerHTML = hTitles[i].innerHTML; 644 | a.onclick = function (e) { 645 | e = e || window.event; 646 | var scrollDiv = code.querySelector("*[name='" + this.innerHTML + "']"); 647 | if (self != top && self.frameElement && self.frameElement.tagName == "IFRAME") { 648 | if (navigator.userAgent.indexOf("Firefox") > 0 || window.navigator.userAgent.toLowerCase().indexOf('iphone') > -1 || !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { 649 | (document.documentElement || document.body).scrollTop = scrollDiv.offsetTop - window.innerHeight - 50; 650 | if (window.navigator.userAgent.toLowerCase().indexOf('iphone') > -1 || !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { 651 | code.style["-webkit-overflow-scrolling"] = "auto"; 652 | code.scrollTop = scrollDiv.offsetTop - window.innerHeight - 50; 653 | code.style["-webkit-overflow-scrolling"] = "none"; 654 | } 655 | } 656 | else { 657 | (document.documentElement || document.body).scrollTop = scrollDiv.offsetTop; 658 | code.scrollTop = scrollDiv.offsetTop; 659 | } 660 | } 661 | else { 662 | if (navigator.userAgent.indexOf("Firefox") > 0 || window.navigator.userAgent.toLowerCase().indexOf('iphone') > -1 || !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { 663 | code.scrollTop = scrollDiv.offsetTop - code.offsetHeight - 50; 664 | } 665 | else { 666 | code.scrollTop = scrollDiv.offsetTop; 667 | } 668 | } 669 | document.querySelector('#mulu').click(); 670 | e.stopPropagation(); 671 | }; 672 | toc.appendChild(a); 673 | } 674 | document.querySelector('#mulu').onclick = function (e) { 675 | if (window.getComputedStyle(toc).display === "none") { 676 | this.innerText = "关闭导航"; 677 | toc.style.display = "block"; 678 | } else { 679 | this.innerText = "目录导航"; 680 | toc.style.display = "none"; 681 | } 682 | }; 683 | }; -------------------------------------------------------------------------------- /doc/doc.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 文档 10 | 11 | 23 | 24 | 25 | 26 |
27 | 目录导航 28 |
29 |

简单入门

30 |

引入layx组件

31 | 
<link href="layx.min.css" rel="stylesheet" type="text/css" />
32 | 
<script src="layx.min.js" type="text/javascript"></script>
33 |

输出 Hello Layx!

34 |
35 | 
layx.html('str','字符串文本','Hello Layx!');
36 |
37 |

配置参数

38 |

主窗口参数 options

39 |
40 |

41 |
42 | 类型：String
43 | 必需：是
44 | 默认值：无
45 | 说明：无
46 |
47 |
48 |
49 |

50 |
51 | 类型：String/HTMLString/Boolean
52 | 必需：否
53 | 默认值：true，默认窗口图标
54 | 说明：设置 false 将不启用窗口标题
55 |
56 |
57 |
58 |

59 |
60 | 类型：String/HTMLString
61 | 必需：否
62 | 默认值：''
63 | 说明：无
64 |
65 |
66 |
67 |

68 |
69 | 类型：Number/百分比
70 | 必需：否
71 | 默认值：800
72 | 说明：支持传入百分比，百分比是相对于浏览器可视区域宽度
73 |
74 |
75 |
76 |

77 |
78 | 类型：Number/百分比
79 | 必需：否
80 | 默认值：600
81 | 说明：支持传入百分比，百分比是相对于浏览器可视区域高度
82 |
83 |
84 |
85 |

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

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

104 |
105 | 类型：Boolean
106 | 必需：否
107 | 默认值：true
108 | 说明：设置true时，将自动记录窗口位置、大小信息、下次打开时自动恢复、即使刷新页面也能保持。基于sessionStorage存储
109 |
110 |
111 |
112 |

113 |
114 | 类型：Boolean
115 | 必需：否
116 | 默认值：true
117 | 说明：默认窗口到顶部时自动最大化
118 |
119 |
120 |
121 |

122 |
123 | 类型：Boolean
124 | 必需：否
125 | 默认值：true
126 | 说明：默认超出可视区域窗口自动最大化，设置false不启用
127 |
128 |
129 |
130 |

131 |
132 | 类型：Enum/Array[top/Enum,left/Enum]
133 | 必需：否
134 | 默认值：'ct'
135 | 说明：内置Enum参数：
136 | 
ct：正中间
 137 | lt：左上角
 138 | rt：右上角
 139 | lb：左下角
 140 | rb：右下角
 141 | lc：左中间
 142 | rc：右中间
 143 | tc：上中间
 144 | bc：下中间
 145 | 也可以传入 [100,200] 数组类型，组合数组类型 ['tc',20]
146 |
147 |
148 |
149 |

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

159 |
160 | 类型：Boolean
161 | 必需：否
162 | 默认值：true
163 | 说明：设置false将禁用此功能
164 |
165 |
166 |
167 |

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

177 |
178 | 类型：String/CssString
179 | 必需：否
180 | 默认值：''
181 | 说明：修改控制标题栏样式，如：background-color:#f00;color:#fff;
182 |
183 |
184 |
185 |

186 |
187 | 类型：String
188 | 必需：否
189 | 默认值：#fff
190 | 说明：支持css颜色样式值，包括 transparent 透明背景。
191 |
192 |
193 |
194 |

195 |
196 | 类型：Boolean
197 | 必需：否
198 | 默认值：true
199 | 说明：设置是否显示窗口阴影。
200 |
201 |
202 |
203 |

204 |
205 | 类型：Boolean/String
206 | 必需：否
207 | 默认值：true
208 | 说明：设置false将不启用边框，支持css边框设置属性。
209 |
210 |
211 |
212 |

213 |
214 | 类型：String
215 | 必需：否
216 | 默认值：3px
217 | 说明：设置 0px将不启用圆角，圆角必须带 px单位
218 |
219 |
220 |
221 |

222 |
223 | 类型：String
224 | 必需：否
225 | 默认值：'default'
226 | 说明：内置皮肤：
227 | 
default
 228 | cloud
 229 | turquoise
 230 | river
 231 | asphalt
 232 |
233 |
234 |
235 |
236 |

237 |
238 | 类型：Enum
239 | 必需：否
240 | 默认值：true
241 | 说明：设置false后，窗口将不能前置 242 |
243 |
244 |
245 |

246 |
247 | 类型：Enum
248 | 必需：否
249 | 默认值：html
250 | 说明：内置 Enum参数有：
251 | 
html：文本类型
 252 | url：页面类型
 253 | group：窗口组类型
 254 | 
 255 | 目前所有的窗口都是通过设定 type实现的
256 |
257 |
258 |
259 |

260 |
261 | 类型：Boolean/Enum
262 | 必需：否
263 | 默认值：''
264 | 说明：支持alert，confirm，msg内置 Enum参数有：
265 | 
success：成功图标
 266 | warn：警告图标
 267 | error：错误图标
 268 | help: 帮助图标
269 |
270 |
271 |
272 |

273 |
274 | 类型：Boolean/HTMLElement
275 | 必需：否
276 | 默认值：false
277 | 说明：设置为DOM对象时，窗口将吸附到按钮上 278 |
279 |
280 |
281 |

282 |
283 | 类型：Enum
284 | 必需：否
285 | 默认值：'ct'
286 | 说明：内置Enum参数：
287 | 
top：上边
 288 | left：左边
 289 | right：右边
 290 | bottom：下边
 291 |
292 |
293 |
294 |
295 |

296 |
297 | 类型：Boolean
298 | 必需：否
299 | 默认值：true
300 | 说明：设置false后打开已存在的窗口将不会闪烁。
301 |
302 |
303 |
304 |

305 |
306 | 类型：Boolean
307 | 必需：否
308 | 默认值：true
309 | 说明：设置false后将不支持非同源网站点击切换窗口，设置true有少许性能问题，如果没有涉及到第三方网页，建议设置为false。
310 |
311 |
312 |
313 |

314 |
315 | 类型：Array
316 | 必需：否
317 | 默认值：[]
318 | 说明：设置 type:group 有效，配置见 子窗口参数 frames 说明 319 |
320 |
321 |
322 |

323 |
324 | 类型：Number
325 | 必需：否
326 | 默认值：0
327 | 说明：设置 type:group 有效，设置窗口组默认初始化显示索引 328 |
329 |
330 |
331 |

332 |
333 | 类型：Number/Boolean
334 | 必需：否
335 | 默认值：1
336 | 说明：设置 type:group 有效，设置窗口组默认加载个数。设置false将全部加载 337 |
338 |
339 |
340 |

341 |
342 | 类型：Boolean
343 | 必需：否
344 | 默认值：true
345 | 说明：默认合并，设置false不合并 346 |
347 |
348 |
349 |

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

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

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

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

386 |
387 | 类型：Number
388 | 必需：否
389 | 默认值：1
390 | 说明：设置主窗口透明度、取值0~1 浮点值 391 | 
0：完全透明
 392 | 1：不透明
 393 | 0.5：半透明
394 |
395 |
396 |
397 |

398 |
399 | 类型：Boolean/Float
400 | 必需：否
401 | 默认值：false
402 | 说明：设置true窗口以外的区域将不能操作，支持传入0-1浮点范围数值，用来设置阻隔透明度 403 |
404 |
405 |
406 |

407 |
408 | 类型：Boolean
409 | 必需：否
410 | 默认值：false
411 | 说明：设置true点击空白地方将关闭窗口 412 |
413 |
414 |
415 |

416 |
417 | 类型：Boolean
418 | 必需：否
419 | 默认值：false
420 | 说明：设置true窗口将为只读、窗口将禁止右键功能 421 |
422 |
423 |
424 |

425 |
426 | 类型：String/Boolean/HTMLString/HTMLElement/Array[Boolean,String/HTMLString/HTMLElement]
427 | 必需：否
428 | 默认值：内容正在加载中，请稍后
429 | 说明：设置false将不启用加载提示。如果设置为String/HtmlString类型，将自动追加 ... 加载效果，支持传入DOM对象，如果需要自定义需传入数组，数组格式：[true,自定义字符串/对象]，必须设置第一个参数为true 430 |
431 |
432 |
433 |

434 |
435 | 类型：Boolean
436 | 必需：否
437 | 默认值：false
438 | 说明：设置false不显示置顶按钮 439 |
440 |
441 |
442 |

443 |
444 | 类型：Boolean
445 | 必需：否
446 | 默认值：true
447 | 说明：设置false置顶功能将失效 448 |
449 |
450 |
451 |

452 |
453 | 类型：Boolean
454 | 必需：否
455 | 默认值：true
456 | 说明：设置false不显示最小化按钮 457 |
458 |
459 |
460 |

461 |
462 | 类型：Boolean
463 | 必需：否
464 | 默认值：true
465 | 说明：设置false最小化功能将失效 466 |
467 |
468 |
469 |

470 |
471 | 类型：Boolean
472 | 必需：否
473 | 默认值：true
474 | 说明：设置false不显示最大化按钮 475 |
476 |
477 |
478 |

479 |
480 | 类型：Boolean
481 | 必需：否
482 | 默认值：true
483 | 说明：设置false最大化功能将失效 484 |
485 |
486 |
487 |

488 |
489 | 类型：Boolean
490 | 必需：否
491 | 默认值：true
492 | 说明：设置false不显示调试按钮 493 |
494 |
495 |
496 |

497 |
498 | 类型：Boolean
499 | 必需：否
500 | 默认值：true
501 | 说明：设置false不显示关闭按钮 502 |
503 |
504 |
505 |

506 |
507 | 类型：Boolean
508 | 必需：否
509 | 默认值：true
510 | 说明：设置false关闭功能将失效 511 |
512 |
513 |
514 |

515 |
516 | 类型：Boolean
517 | 必需：否
518 | 默认值：true
519 | 说明：设置false恢复功能将失效 520 |
521 |
522 |
523 |

524 |
525 | 类型：Boolean/Number
526 | 必需：否
527 | 默认值：false
528 | 说明：设置窗口关闭等待秒数，如5000毫秒。设置false需手动关闭窗口。 529 |
530 |
531 |
532 |

533 |
534 | 类型：String/HTMLString/Boolean
535 | 必需：否
536 | 默认值：此窗口将在 <strong>{second}</strong> 秒内自动关闭.
537 | 说明：设置false启用倒计时提示。倒计时提示默认在右下角显示。{second} 表示 autodestroy 设置的秒数。 538 |
539 |
540 |
541 |

542 |
543 | 类型：Boolean
544 | 必需：否
545 | 默认值：true
546 | 说明：设置false拖曳调整大小功能失效 547 |
548 |
549 |
550 |

551 |
552 | 类型：Object
553 | 必需：否
554 | 默认值： 555 | 
{
 556 |     t: false, // 是否限制上边拖曳大小，false不限制
 557 |     r: false, // 是否限制右边拖曳大小，false不限制
 558 |     b: false, // 是否限制下边拖曳大小，false不限制
 559 |     l: false, // 是否限制左边拖曳大小，false不限制
 560 |     lt: false, // 是否限制左上边拖曳大小，false不限制
 561 |     rt: false, // 是否限制右上边拖曳大小，false不限制
 562 |     lb: false, // 是否限制左下边拖曳大小，false不限制
 563 |     rb: false // 是否限制右下边拖曳大小，false不限制
 564 | }
565 | 说明：支持 8 个方向拖曳改变窗口大小。 566 |
567 |
568 |
569 |

570 |
571 | 类型：String/Boolean
572 | 必需：否
573 | 默认值：enter
574 | 说明：设置false不启用快捷键触发按钮，支持：enter 和 ctrl+enter 575 |
576 |
577 |
578 |

579 |
580 | 类型：Array
581 | 必需：否
582 | 默认值：[]
583 | 说明：设置 statusBar:true 有效，配置见 按钮参数 buttons 584 |
585 |
586 |
587 |

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

597 |
598 | 类型：Boolean
599 | 必需：否
600 | 默认值：true
601 | 说明：设置false控制标题栏拖动功能失效 602 |
603 |
604 |
605 |

606 |
607 | 类型：Object
608 | 必需：否
609 | 默认值： 610 | 
{
 611 |     vertical: false, // 是否禁止垂直拖动，false不禁止
 612 |     horizontal: false, // 是否禁止水平拖动，false不禁止
 613 |     leftOut: true, // 是否允许左边拖出，true允许
 614 |     rightOut: true, // 是否允许右边拖出，true允许
 615 |     topOut: true, // 是否允许上边拖出，true允许，此设置不管是false还是true，窗口都不能拖出窗体
 616 |     bottomOut: true, // 是否允许下边拖出，true允许
 617 | }
618 | 说明：支持控制窗口拖动方向及拖出属性。 619 |
620 |
621 |
622 |

623 |
624 | 类型：Boolean
625 | 必需：否
626 | 默认值：true
627 | 说明：设置true将启用点击窗口内容将在所有层上面显示 628 |
629 |
630 |
631 |

632 |
633 | 类型：Boolean
634 | 必需：否
635 | 默认值：false
636 | 说明：设置true窗口将置顶显示，如果stickMenu:true，则置顶按钮处于选中状态。 637 |
638 |
639 |
640 |

641 |
642 | 类型：Boolean
643 | 必需：否
644 | 默认值：true
645 | 说明：设置true双击控制标题栏将最大化/恢复窗口，设置false不启用。 646 |
647 |
648 |
649 |

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

659 |
660 | 类型：String/CssString
661 | 必需：否
662 | 默认值：''
663 | 说明：修改状态栏样式，如：background-color:#f00;color:#fff;
664 |
665 |
666 |

事件监听 options.event

667 |
668 |

669 |
670 | 类型：Object
671 | 必需：否
672 | 默认值：
673 | 
{
 674 |     // 加载事件
 675 |     onload: {
 676 |         // 加载之前，return false 不执行
 677 |         before: function (layxWindow, winform) {
 678 |         },
 679 |         // 加载之后
 680 |         after: function (layxWindow, winform) {
 681 |         }
 682 |     },
 683 |     // 最小化事件
 684 |     onmin: {
 685 |         // 最小化之前，return false 不执行
 686 |         before: function (layxWindow, winform) {
 687 |         },
 688 |         // 最小化之后
 689 |         after: function (layxWindow, winform) {
 690 |         }
 691 |     },
 692 |     // 最大化事件
 693 |     onmax: {
 694 |         // 最大化之前，return false 不执行
 695 |         before: function (layxWindow, winform) {
 696 |         },
 697 |         // 最大化之后
 698 |         after: function (layxWindow, winform) {
 699 |         }
 700 |     },
 701 |     // 恢复事件
 702 |     onrestore: {
 703 |         // 恢复之前，return false 不执行
 704 |         before: function (layxWindow, winform) {
 705 |         },
 706 |         // 恢复之后
 707 |         after: function (layxWindow, winform) {
 708 |         }
 709 |     },
 710 |     // 关闭事件
 711 |     ondestroy: {
 712 |         // 关闭之前，return false 不执行，inside 区分用户点击内置关闭按钮还是自动调用，用户关闭之前传递的参数，escKey表示是否是按下esc触发
 713 |         before: function (layxWindow, winform,params,inside,escKey) {
 714 |         },
 715 |         // 关闭之后
 716 |         after: function () {
 717 |         }
 718 |     },
 719 |     // 隐藏/显示窗口时间，return false不执行
 720 |     onvisual: {
 721 |          before: function (layxWindow, winform, params, inside, status) { },
 722 |          after: function (layxWindow, winform, status) { }
 723 |      },
 724 |     // 移动事件
 725 |     onmove: {
 726 |         // 移动之前，return false 不执行
 727 |         before: function (layxWindow, winform) {
 728 |         },
 729 |         // 移动中
 730 |         progress: function (layxWindow, winform) {
 731 |         },
 732 |         // 移动之后
 733 |         after: function (layxWindow, winform) {
 734 |         }
 735 |     },
 736 |     // 拖曳事件
 737 |     onresize: {
 738 |         // 拖曳之前，return false 不执行
 739 |         before: function (layxWindow, winform) {
 740 |         },
 741 |         // 拖曳中
 742 |         progress: function (layxWindow, winform) {
 743 |         },
 744 |         // 拖曳之后
 745 |         after: function (layxWindow, winform) {
 746 |         }
 747 |     },
 748 |     // 获取焦点事件、return false 不置顶
 749 |     onfocus: function (layxWindow, winform) {
 750 |      },
 751 |     // 窗口存在事件
 752 |     onexist: function (layxWindow, winform) {
 753 |      },
 754 |     // 窗口组切换事件
 755 |     onswitch: {
 756 |         // 切换之前，return false 不执行操作
 757 |         before: function (layxWindow, winform, frameId) { 
 758 |         },
 759 |         // 切换之后
 760 |         after: function (layxWindow, winform, frameId) { 
 761 |         }
 762 |     },
 763 |     // 置顶事件
 764 |     onstick: {
 765 |          // 置顶之前，return false 不执行操作
 766 |         before: function (layxWindow, winform) { 
 767 |         },
 768 |         // 置顶之后
 769 |         after: function (layxWindow, winform) { 
 770 |         }
 771 |     }
 772 | }
773 | 说明：监听窗口事件 774 |
775 |
776 |

按钮参数 buttons

777 |
778 |

779 |
780 | 类型：String
781 | 必需：是
782 | 默认值：确定
783 | 说明：设置按钮显示名称
784 |
785 |
786 |
787 |

788 |
789 | 类型：String
790 | 必需：否
791 | 默认值：''
792 | 说明：设置按钮的id属性，最终生成的Id为：layx-窗口Id-button-按钮Id
793 |
794 |
795 |
796 |

797 |
798 | 类型：Array/String
799 | 必需：否
800 | 默认值：[]
801 | 说明：设置按钮的class属性，支持字符串和数组类型，字符串类型时只能添加一个；如需设置多个class，传递数组类型，如：["layx-button","red-button"]，默认会生成 class="layx-button red-button"
802 |
803 |
804 |
805 |

806 |
807 | 类型：String/CssString
808 | 必需：否
809 | 默认值：''
810 | 说明：控制按钮内联样式，如：background-color:#f00;color:#fff;
811 |
812 |
813 |
814 |

815 |
816 | 类型：Function(id, button, event)/Function(id,value,textarea, button, event)
817 | 必需：是
818 | 默认值：function(id, button){ }
819 | 说明：按钮点击回调函数，
820 | 
// 普通按钮回调函数
 821 | callback:function(id, button, event){
 822 | }
 823 | 
 824 | // 输入框按钮回调函数
 825 | callback:function(id,value,textarea, button, event){
 826 | }
 827 |
828 |
829 |
830 |

子窗口参数 frames

831 |
832 |

833 |
834 | 类型：String
835 | 必需：是
836 | 默认值：无
837 | 说明：无
838 |
839 |
840 |
841 |

842 |
843 | 类型：String/HTMLString
844 | 必需：否
845 | 默认值：''
846 | 说明：无
847 |
848 |
849 |
850 |

851 |
852 | 类型：Enum
853 | 必需：否
854 | 默认值：html
855 | 说明：内置 Enum参数有：
856 | 
html：文本类型
 857 | url：页面类型
858 |
859 |
860 |
861 |

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

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

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

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

898 |
899 | 类型：String
900 | 必需：否
901 | 默认值：#fff
902 | 说明：支持css颜色样式值，包括 transparent 透明背景。
903 |
904 |
905 |

内置对象

906 |

layxWindow 窗口DOM对象

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

winform 窗口对象

909 |
winform记录了窗口所有主要信息，Object 类型，包含属性有：
910 | 
winform.id // Id
 911 | winform.title // 标题
 912 | winform.layxWindowId // layxWindow对象id属性
 913 | winform.layxWindow // layxWindow 对象
 914 | winform.createDate // 创建时间
 915 | winform.status // 状态：min、max、normal
 916 | winform.type // 窗口类型
 917 | winform.frames // 窗口组窗口数组
 918 | winform.useFrameTitle // 标题应用模式
 919 | winform.cloneElementContent // 内容拷贝模式
 920 | winform.groupCurrentId // 当前窗口组索引
 921 | winform.area // 位置大小 { width , height , minWidth , minHeight , top , left}
 922 | winform.loadingText // 加载文本
 923 | winform.focusable // 焦点状态
 924 | winform.isFloatTarget // 是否浮动窗口
 925 | winform.floatTarget // 吸附的DOM对象
 926 | winform.url // 窗口url地址
 927 | winform.content // 窗口内容
 928 | winform.isStick // 置顶状态
 929 | winform.zIndex // 层级别
 930 | winform.movable // 拖动状态
 931 | winform.moveLimit // 拖动限制
 932 | winform.resizable // 拖曳状态
 933 | winform.resizeLimit  // 拖曳大小限制
 934 | winform.stickable // 置顶操作
 935 | winform.minable // 最小化操作
 936 | winform.maxable // 最大化操作
 937 | winform.restorable // 恢复操作
 938 | winform.closable // 关闭操作
 939 | winform.event // 窗口事件
 940 |
941 |

操作方法

942 |

获取版本号

943 | 
var version = layx.v;
944 |

打开新窗口

945 | 
var winform = layx.open(options);
946 |

打开文本窗口

947 | 
var winform = layx.html(id, title, content, options);
948 |

打开页面窗口

949 | 
var winform = layx.iframe(id, title, url, options);
950 |

打开窗口组

951 | 
var winform = layx.group(id, frames, frameIndex, options);
952 |

获取窗口列表

953 | 
var windows = layx.windows();
954 |

获取当前窗口对象

955 | 
var winform = layx.getWindow(id);
956 |

关闭窗口

957 | 
layx.destroy(id,params,force);   // 设置了params参数，可以在event.ondestroy.before中监听；force表示强制关闭窗口，也就是return false失效。
958 |

显示/隐藏窗口

959 | 
layx.visual(id, status, params);   // status:true显示，false隐藏。设置了params参数，可以在event.onvisual.before中监听
960 |

窗口最小化

961 | 
layx.min(id);
962 |

窗口最大化

963 | 
layx.max(id);
964 |

设置标题

965 | 
layx.setTitle(id, title, useFrameTitle);
966 |

闪烁窗口

967 | 
layx.flicker(id);
968 |

恢复窗口

969 | 
layx.restore(id);
970 |

更新层级别

971 | 
layx.updateMinLayout();
972 |

置顶切换

973 | 
layx.stickToggle(id);
974 |

设置窗口位置

975 | 
layx.setPosition(id, position,isFloatTarget); // ,isFloatTarget 是否是浮动窗口
976 |

设置窗口宽度高度

977 | 
layx.setSize(id, area); // ,area为json对象 {width:300,height:300}
978 |

更新浮动窗口位置

979 | 
layx.updateFloatWinPosition(id,direction); // direction，浮动方向
980 |

获取页面窗口window对象

981 | 
var contentWindow = layx.getFrameContext(id);
982 |

获取窗口组页面窗口window对象

983 | 
var contentWindow = layx.getGroupFrameContext(id, frameId); // frameId：窗口组窗口id
984 |

获取页面窗口parent对象

985 | 
var parentContentWindow = layx.getParentContext(id);
986 |

设置文本窗口内容

987 | 
layx.setContent(id,content, cloneElementContent);
988 |

设置页面窗口地址

989 | 
layx.setUrl(id,url);
990 |

设置窗口组文本窗口内容

991 | 
layx.setGroupContent(id,frameId,content, cloneElementContent); // frameId：窗口组窗口id
992 |

设置窗口组标题

993 | 
layx.setGroupTitle(id, frameId, title, useFrameTitle); // frameId：窗口组窗口id
994 |

设置窗口组页面窗口地址

995 | 
layx.setGroupUrl(id, frameId, url); // frameId：窗口组窗口id
996 |

设置窗口组索引

997 | 
layx.setGroupIndex(id, frameId); // frameId：窗口组窗口id
998 |

关闭所有窗口

999 | 
layx.destroyAll(); // closable:false 不可关闭
1000 |

Tip提示框

1001 | 
layx.tip(msg, target, direction, options);
1002 |

消息框

1003 | 
layx.msg(msg, options);
1004 |

提示框

1005 | 
layx.msg(title, msg, yes, options);    // yes 默认确定按钮回调函数
1006 |

询问框

1007 | 
layx.confirm(title, msg, yes, options);    // yes 默认确定按钮回调函数
1008 |

获取输入框textarea对象

1009 | 
var textarea = layx.getPromptTextArea(id);
1010 |

输入框

1011 | 
layx.prompt(title, msg, yes,defaultValue, options);    // yes 默认确定按钮回调函数   defaultValue 默认值
1012 |

加载框

1013 | 
layx.load(id,msg, options);
1014 |

多行字符串

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

重载页面窗口

1017 | 
layx.reloadFrame(id);
1018 |

重载窗口组页面窗口

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

设置按钮状态

1021 | 
layx.setButtonStatus(id, buttonId, isEnable) // buttonId：按钮Id
1022 |

获取元素的绝对坐标

1023 | 
var pos = layx.getElementPos(el);   // { x:'',y:''}
1024 |

调用关闭按钮关闭窗口

1025 | 
layx.destroyInlay(id);
1026 |

检查元素是否在某个元素区域内，并且屏幕可见

1027 | 
layx.checkVisual(pEle, ele, allContain);   // pEle：区域；ele：元素；allContain 表示是否完全包含，设置false时，只要元素在区域有任何可见都返回true
1028 |

获取状态栏按钮对象

1029 | 
var btn = layx.getButton(id,buttonId); // 按钮Id
1030 |

窗口冒泡

1031 |

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

1032 | 由于默认窗口带有点击事件，如果窗口内部包含其他事件打开新窗口，该事件需要取消向上冒泡： 1033 | 
document.getElementById('btn').onclick=function(e){
1034 |     e=e||window.event;
1035 |     
1036 |     // 打开新窗口代码
1037 |     
1038 |     // 停止冒泡
1039 |     e.stopPropagation();
1040 | }
1041 |

外观定制

1042 |

自定义皮肤

1043 | 自定义皮肤建议写到一个单独的css文件中，且必须在layx.css后面引入，自定义皮肤规范： 1044 | 
/* 窗口 */
1045 | .layx-window.layx-皮肤名称-river {
1046 | }
1047 | /* 标题栏 */
1048 | .layx-window.layx-skin-皮肤名称 .layx-control-bar {
1049 | }
1050 | /* 内部按钮激活 */
1051 | .layx-window.layx-skin-皮肤名称 .layx-inlay-menus .layx-icon:hover {
1052 | }
1053 | /* 底部工具栏按钮 */
1054 | .layx-window.layx-skin-皮肤名称 .layx-button-item {
1055 | }
1056 | /* 底部工具栏按钮激活 */
1057 | .layx-window.layx-skin-皮肤名称 .layx-button-item:hover {
1058 | }
1059 |

尽情写您的外观css样式吧

1060 | 通过窗口的 options. style 属性可以定义窗口的外观，可以定制成任何您需要的样子，如： 1061 | 
layx.iframe('radiu-style','自定义外观，比如圆角','./iframe.html',{
1062 |     style:layx.multiLine(function(){/*
1063 | 
1064 |         #layx-radiu-style{
1065 |             border-radius:4px;
1066 |             -webkit-border-radius:4px;
1067 |             -moz-border-radius:4px;
1068 |             -ms-border-radius:4px;
1069 |         }
1070 | 
1071 |         #layx-radiu-style .layx-window-icon{
1072 |             color:#f00;
1073 |         }
1074 | 
1075 | */})
1076 | });
1077 | 1078 |
1079 | 1080 | 1081 | -------------------------------------------------------------------------------- /doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Layx 新一代Web弹窗组件 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 目录导航 20 |
21 |

窗口类型

22 |

文本窗口

23 |
24 |

打开一个字符串文本

25 | 
layx.html('str','字符串文本','Hello Layx!');
26 | 27 |
28 |
29 |

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

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

Layx 新一代Web弹窗组件。

32 | 33 |
34 |
35 |

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

36 | 
layx.html('dom-get','HTMLElement 窗口',document.getElementById('dom-get'),{cloneElementContent:false});
37 |
38 | Layx 新一代Web弹窗组件。 39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |

HTML字符串窗口

47 | 
layx.html('htmlstr','HTML字符串窗口',layx.multiLine(function () {/*
  48 |              
  49 |              <style type="text/css">
  50 |              #about-layx{
  51 |                     padding:10px;
  52 |                     line-height:1.5;
  53 |             }
  54 | 
  55 |             #about-layx h2{
  56 |                 border-bottom:1px solid #ccc;
  57 |             }
  58 | 
  59 |             #about-layx label {
  60 |                 margin: 0 2px;
  61 |                 padding: 0 5px;
  62 |                 white-space: nowrap;
  63 |                 border: 0;
  64 |                 background-color: #f8f8f8;
  65 |                 border-radius: 3px;
  66 |                 display:inline-block;
  67 |             }
  68 |              </style>
  69 | 
  70 |              <div id="about-layx">
  71 |                 <h2>序言</h2>
  72 |                 <p>Layx 诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初，我们想在B/S架构上实现类C/S架构窗口功能，但百度、谷歌过后依然没能找到合适的Javascript插件。于是乎在2018年05月01日五一劳动节期间连夜赶工创造出了 Layx 。</p>
  73 |                 <p>目前 Layx 拥有和C/S架构一样灵活的操作方式，支持网页多窗口、多任务协同操作，支持窗口各种事件。</p>
  74 |                 <h2>信息</h2>
  75 |                 <ul>
  76 |                     <li><label>原创作者</label>：百小僧</li>
  77 |                     <li><label>开源协议</label>：MIT</li>
  78 |                     <li><label>当前版本</label>：v2.5.0</li>
  79 |                     <li><label>发布日期</label>：2018.09.17</li>
  80 |                     <li><label>交流Q群</label>：18863883</li>
  81 |                     <li><label>版权所有</label>：百签软件（中山）有限公司</li>
  82 |                 </ul>
  83 |                 <h2>特性</h2>
  84 |                 <ul>
  85 |                     <li>纯原生Javascript实现，不依赖任何第三方框架</li>
  86 |                     <li>支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge等主流浏览器</li>
  87 |                     <li>支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口</li>
  88 |                     <li>支持窗口最大化、最小化、恢复、置顶、关闭控制及事件监听</li>
  89 |                     <li>支持窗口阻隔、窗口闪烁功能</li>
  90 |                     <li>支持窗口点击标题获取焦点、点击内容/页面获取焦点</li>
  91 |                     <li>支持窗口图标定制、操作按钮定制</li>
  92 |                     <li>支持窗口四个方向拖动及方向控制</li>
  93 |                     <li>支持窗口八个方向拖曳大小及拖曳方向控制</li>
  94 |                     <li>支持窗口自动获取页面标题</li>
  95 |                     <li>支持窗口位置记录及恢复</li>
  96 |                     <li>支持窗口相互通讯</li>
  97 |                     <li>支持窗口设定自动关闭</li>
  98 |                     <li>支持窗口外观控制、状态栏、透明度控制</li>
  99 |                     <li>支持窗口操作拦截器、可以拦截任何不正常操作</li>
 100 |                     <li>支持窗口初始化位置、宽高度、最小化宽高度控制</li>
 101 |                     <li>支持窗口加载文字控制</li>
 102 |                     <li>支持窗口滚动条自能判断</li>
 103 |                     <li>支持窗口最小化统一管理</li>
 104 |                     <li>支持滚动条智能判断</li>
 105 |                 </ul>
 106 |                 <h2>项目</h2>
 107 |                 <ul>
 108 |                     <li>Gitee：<a href="https://gitee.com/monksoul/LayX" target="_blank">https://gitee.com/monksoul/LayX</a></li>
 109 |                     <li>Github：<a href="https://github.com/MonkSoul/Layx"  target="_blank">https://github.com/MonkSoul/Layx</a></li>
 110 |                 </ul>
 111 |                 <h2>捐赠</h2>
 112 |                 <p>如果 Layx 对您有帮助，可以请 作者 喝杯咖啡</p>
 113 |                 <img src="./code.jpg" style="width:100%;display:block;" />
 114 |              </div>
 115 | 
 116 |             */}));
117 | 118 |
119 |

网页窗口

120 |
121 |

打开一个本地网页

122 | 
layx.iframe('localsite','本地网页','./iframe.html');
123 | 124 |
125 |
126 |

打开百度官网

127 | 
layx.iframe('taobaosite','百度官网','https://www.baidu.com');
128 | 129 |
130 |

Tip吸附消息

131 |
132 |

上边 Tip 吸附

133 | 134 | 
layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-top'),'top');
135 |
136 |
137 |

下边 Tip 吸附

138 | 139 | 
layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-bottom'),'bottom');
140 |
141 |
142 |

左边 Tip 吸附

143 | 144 | 
layx.tip('Layx 新一代Web弹窗组件.',document.getElementById('tip-left'),'left');
145 |
146 |
147 |

右边 Tip 吸附

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

消息窗口

152 |
153 |

打开一个消息窗口

154 | 
layx.msg('Layx 新一代Web弹窗组件.');
155 | 156 |
157 |
158 |

带成功图标消息窗口

159 | 
layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'success'});
160 | 161 |
162 |
163 |

带警告图标消息窗口

164 | 
layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'warn'});
165 | 166 |
167 |
168 |

带错误图标消息窗口

169 | 
layx.msg('Layx 新一代Web弹窗组件.',{dialogIcon:'error'});
170 | 171 |
172 |
173 |

带帮助图标消息窗口

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

提示窗口

178 |
179 |

打开一个提示窗口

180 | 
layx.alert('版本更新','Layx v'+layx.v+' 版本发布啦！');
181 | 182 |
183 |
184 |

带成功图标提示窗口

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

带警告图标提示窗口

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

带错误图标提示窗口

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

带帮助图标提示窗口

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

询问窗口

204 |
205 |

打开一个询问窗口

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

带成功图标询问窗口

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

带警告图标询问窗口

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

带错误图标询问窗口

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

带帮助图标询问窗口

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

询问框按钮更多控制

246 | 
layx.confirm('默认提示','Layx 会做为你下一个项目弹窗的首选吗？',null,{
 247 |     buttons:[
 248 |         {
 249 |             label:'确定',
 250 |             callback:function(id, button, event){
 251 |                 alert("你点击了确定操作");
 252 |                 layx.destroy(id);
 253 |             }
 254 |         },
 255 |         {
 256 |             label:'取消',
 257 |             callback:function(id, button, event){
 258 |                 alert("你点击了取消操作");
 259 |                 layx.destroy(id);
 260 |             }
 261 |         }
 262 |     ]
 263 | });
264 | 265 |
266 |
267 |

用户点击了取消或关闭

268 | 
layx.confirm('监听操作','你关闭了窗口我都知道呢！',function(id,button){
 269 |     alert('你点击了确定');
 270 |     layx.destroy(id,{noTip:true});  // destroy可以设置参数，设置后可以在ondestroy.before中判断
 271 | },{
 272 |     event:{
 273 |         ondestroy:{
 274 |             before:function(layxWindow,winform,params,inside,escKey){
 275 |                 if(params.noTip===true){
 276 |                         // 不需要提示
 277 |                 }
 278 |                 else{
 279 |                         alert("我被关闭了");
 280 |                 }
 281 |             }
 282 |         }
 283 |     }
 284 | });
285 | 286 |
287 |

输入窗口

288 |
289 |

打开一个输入窗口

290 | 
layx.prompt('Layx 体验报告','写下您对 Layx 的建议：',function(id,value,textarea, button, event){
 291 |     alert(value);
 292 | });
293 | 294 |
295 |
296 |

输入窗口带默认值

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

加载窗口

303 |
304 |

打开一个加载窗口

305 | 
layx.load('loadId','数据正在加载中，请稍后');
 306 | 
 307 | // 5 秒后自动关闭
 308 | setTimeout(function(){
 309 |     layx.destroy('loadId');
 310 | },5000);
 311 |
312 | 313 |
314 |

操作窗口

315 |
316 |

打开一个操作窗口

317 | 
layx.iframe('operator','带操作按钮窗口','./iframe.html',{
 318 |     statusBar:true,
 319 |     buttons:[
 320 |         {
 321 |             label:'保存',
 322 |             callback:function(id, button, event){
 323 |                 // 获取 iframe 页面 window对象
 324 |                 var contentWindow=layx.getFrameContext(id);
 325 |                 alert(contentWindow.document.body.innerHTML);
 326 | 
 327 |                 layx.destroy(id);    
 328 |             }
 329 |         },
 330 |         {
 331 |             label:'取消',
 332 |             callback:function(id, button, event){
 333 |                 layx.destroy(id);
 334 |             }
 335 |         }
 336 |     ]
 337 | });
338 | 339 |
340 |

窗口组

341 |
342 |

打开一个窗口组窗口

343 | 
layx.group('group',[
 344 |     {
 345 |         id:'group1',
 346 |         title:'文本窗口',
 347 |         content:'Layx 新一代Web弹窗组件.'
 348 |     },
 349 |     {
 350 |         id:'group2',
 351 |         title:'网页窗口',
 352 |         type:'url',
 353 |         url:'./iframe.html'
 354 |     },
 355 |     {
 356 |         id:'taobao',
 357 |         title:'百度官网',
 358 |         type:'url',
 359 |         url:'https://www.baidu.com'
 360 |     }
 361 | ],1);
362 | 363 |
364 |
365 |

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

366 | 
layx.group('group-nomerge',[
 367 |     {
 368 |         id:'group1',
 369 |         title:'文本窗口',
 370 |         content:'Layx 新一代Web弹窗组件.'
 371 |     },
 372 |     {
 373 |         id:'group2',
 374 |         title:'网页窗口',
 375 |         type:'url',
 376 |         url:'./iframe.html'
 377 |     },
 378 |     {
 379 |         id:'taobao',
 380 |         title:'百度官网',
 381 |         type:'url',
 382 |         url:'https://www.baidu.com'
 383 |     }
 384 | ],1,{
 385 |     mergeTitle:false,
 386 |     title:'我是不合并的标题'
 387 | });
388 | 389 |
390 |

倒计时窗口

391 |
392 |

打开一个倒计时关闭窗口

393 | 
layx.iframe('settimeout','打开一个倒计时关闭窗口','./iframe.html',{
 394 |     autodestroy:5000
 395 | });
396 | 397 |
398 |

遮罩、阻隔窗口

399 |
400 |

打开一个遮罩、阻隔窗口

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

设置阻隔背景透明度

408 | 
layx.iframe('shadow-color','设置阻隔背景透明度','./iframe.html',{
 409 |     shadable:0.8
 410 | });
411 | 412 |
413 |
414 |

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

415 | 
layx.iframe('shadow-click','点击阻隔空白地方关闭窗口','./iframe.html',{
 416 |     shadable:0.8,
 417 |     control:false,
 418 |     border:false,
 419 |     shadow:false,
 420 |     shadeDestroy:true   // 点击空白地方关闭
 421 | });
422 | 423 |
424 |

置顶窗口

425 |
426 |

打开一个置顶窗口

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

带调试窗口

435 |
436 |

打开一个带调试的窗口

437 | 
layx.iframe('debugwin','打开一个带调试的窗口','./iframe.html',{
 438 |     debugMenu:true
 439 | });
440 | 441 |
442 |

只读窗口

443 |
444 |

打开一个只读窗口

445 | 
layx.iframe('readonly','打开一个只读窗口','./iframe.html',{
 446 |     readonly:true
 447 | });
448 | 449 |
450 |

浮动窗口

451 |
452 |

打开一个下边浮动窗口

453 | 
var btnTarget= document.getElementById('floatThat-bottom');
 454 | var winform = layx.iframe('float-bottom','打开一个下边浮动窗口','./iframe.html',{
 455 |     floatTarget:btnTarget,  // 被吸附的DOM对象
 456 |     width:357,
 457 |     height:200,
 458 |     alwaysOnTop:true,
 459 |     floatDirection: 'bottom',   // 设置方向
 460 |      event:{
 461 |         ondestroy: {
 462 |              before: function (layxWindow, winform, params, inside,escKey) { 
 463 |                     if(inside===false){
 464 |                         layx.visual(winform.id,false);  // 隐藏窗口
 465 |                          layx.updateFloatWinPosition(winform.id);
 466 |                          return false;
 467 |                     }
 468 |              }
 469 |         },
 470 |         onexist: function (layxWindow, winform) { 
 471 |             layx.visual(winform.id,true);   // 显示窗口
 472 |         }
 473 |     }
 474 | });
 475 |
476 | 477 |
478 |
479 |

打开一个上边浮动窗口

480 | 
var btnTarget= document.getElementById('floatThat-top');
 481 | var winform = layx.iframe('float-top','打开一个上边浮动窗口','./iframe.html',{
 482 |     floatTarget:btnTarget,  // 被吸附的DOM对象
 483 |     width:357,
 484 |     height:200,
 485 |     alwaysOnTop:true,
 486 |     floatDirection: 'top',   // 设置方向
 487 |      event:{
 488 |         ondestroy: {
 489 |              before: function (layxWindow, winform, params, inside,escKey) { 
 490 |                    if(inside===false){
 491 |                         layx.visual(winform.id,false);  // 隐藏窗口
 492 |                          layx.updateFloatWinPosition(winform.id);
 493 |                          return false;
 494 |                     }
 495 |              }
 496 |         },
 497 |         onexist: function (layxWindow, winform) { 
 498 |             layx.visual(winform.id,true);   // 显示窗口
 499 |         }
 500 |     }
 501 | });
 502 |
503 | 504 |
505 |
506 |

打开一个右边浮动窗口

507 | 
var btnTarget= document.getElementById('floatThat-right');
 508 | var winform = layx.iframe('float-right','打开一个右边浮动窗口','./iframe.html',{
 509 |     floatTarget:btnTarget,  // 被吸附的DOM对象
 510 |     width:357,
 511 |     height:200,
 512 |     alwaysOnTop:true,
 513 |     floatDirection: 'right',   // 设置方向
 514 |      event:{
 515 |         ondestroy: {
 516 |              before: function (layxWindow, winform, params, inside,escKey) { 
 517 |                    if(inside===false){
 518 |                         layx.visual(winform.id,false);  // 隐藏窗口
 519 |                          layx.updateFloatWinPosition(winform.id);
 520 |                          return false;
 521 |                     }
 522 |              }
 523 |         },
 524 |         onexist: function (layxWindow, winform) { 
 525 |             layx.visual(winform.id,true);   // 显示窗口
 526 |         }
 527 |     }
 528 | });
 529 |
530 | 531 |
532 |
533 |

打开一个左边浮动窗口

534 | 
var btnTarget= document.getElementById('floatThat-left');
 535 | var winform = layx.iframe('float-left','打开一个左边浮动窗口','./iframe.html',{
 536 |     floatTarget:btnTarget,  // 被吸附的DOM对象
 537 |     width:357,
 538 |     height:200,
 539 |     alwaysOnTop:true,
 540 |     floatDirection: 'left',   // 设置方向
 541 |      event:{
 542 |         ondestroy: {
 543 |              before: function (layxWindow, winform, params, inside,escKey) { 
 544 |                     if(inside===false){
 545 |                         layx.visual(winform.id,false);  // 隐藏窗口
 546 |                          layx.updateFloatWinPosition(winform.id);
 547 |                          return false;
 548 |                     }
 549 |              }
 550 |         },
 551 |         onexist: function (layxWindow, winform) { 
 552 |             layx.visual(winform.id,true);   // 显示窗口
 553 |         }
 554 |     }
 555 | });
 556 |
557 | 558 |
559 |
560 |

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

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

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

563 | 564 |
565 |

窗口外观

566 |

皮肤设置

567 |
568 |

default

569 | 
layx.iframe('default-skin','皮肤：default','./iframe.html',{skin:'default'});
570 | 571 |
572 |
573 |

cloud

574 | 
layx.iframe('cloud-skin','皮肤：cloud','./iframe.html',{skin:'cloud'});
575 | 576 |
577 |
578 |

turquoise

579 | 
layx.iframe('turquoise-skin','皮肤：turquoise','./iframe.html',{skin:'turquoise'});
580 | 581 |
582 |
583 |

river

584 | 
layx.iframe('river-skin','皮肤：river','./iframe.html',{skin:'river'});
585 | 586 |
587 |
588 |

asphalt

589 | 
layx.iframe('asphalt-skin','皮肤：asphalt','./iframe.html',{skin:'asphalt'});
590 | 591 |
592 |
593 |

自定义皮肤

594 | 
/* 窗口 */
 595 | .layx-window.layx-皮肤名称-river {
 596 | }
 597 | /* 标题栏 */
 598 | .layx-window.layx-skin-皮肤名称 .layx-control-bar {
 599 | }
 600 | /* 内部按钮激活 */
 601 | .layx-window.layx-skin-皮肤名称 .layx-inlay-menus .layx-icon:hover {
 602 | }
 603 | /* 底部工具栏按钮 */
 604 | .layx-window.layx-skin-皮肤名称 .layx-button-item {
 605 | }
 606 | /* 底部工具栏按钮激活 */
 607 | .layx-window.layx-skin-皮肤名称 .layx-button-item:hover {
 608 | }
609 |
610 |

主窗口外观

611 |
612 |

默认外观

613 | 
layx.iframe('default-style','默认外观','./iframe.html');
614 | 615 |
616 |
617 |

灰色背景

618 | 
layx.iframe('gray-style','灰色背景','./iframe.html',{
 619 |     bgColor:'#ccc'
 620 | });
621 | 622 |
623 |
624 |

透明窗口

625 | 
layx.iframe('opacity-style','透明窗口','./iframe.html',{
 626 |     opacity:0.5
 627 | });
628 | 629 |
630 |
631 |

无边框

632 | 
layx.iframe('noborder-style','无边框','./iframe.html',{
 633 |     border:false
 634 | });
635 | 636 |
637 |
638 |

无阴影

639 | 
layx.iframe('noshadow-style','无阴影','./iframe.html',{
 640 |     shadow:false
 641 | });
642 | 643 |
644 |
645 |

红色边框

646 | 
layx.iframe('redborder-style','红色边框','./iframe.html',{
 647 |     border:'1px solid #f00'
 648 | });
649 | 650 |
651 |
652 |

无标题栏

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

带状态栏

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

自定义外观，比如圆角

667 | 
layx.iframe('radiu-style','自定义外观，比如圆角','./iframe.html',{
 668 |     style:layx.multiLine(function(){/*
 669 | 
 670 |         #layx-radiu-style{
 671 |             border-radius:4px;
 672 |             -webkit-border-radius:4px;
 673 |             -moz-border-radius:4px;
 674 |             -ms-border-radius:4px;
 675 |         }
 676 | 
 677 |         #layx-radiu-style .layx-window-icon{
 678 |             color:#f00;
 679 |         }
 680 | 
 681 | */})
 682 | });
683 |

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

684 | 685 |
686 |

标题栏外观

687 |
688 |

紫色标题栏

689 | 
layx.iframe('purple-control-style','紫色标题栏','./iframe.html',{
 690 |     controlStyle:'background-color: #7719aa; color:#fff;',
 691 |     border:false,
 692 |     style:layx.multiLine(function(){/*
 693 |     #layx-purple-control-style .layx-inlay-menus .layx-icon:hover {
 694 |         background-color: #9953c0;
 695 |     }   
 696 |      
 697 | */})
 698 | });
699 | 700 |
701 |
702 |

没有窗口图标

703 | 
layx.iframe('no-icon','没有窗口图标','./iframe.html',{
 704 |     icon:false
 705 | });
706 | 707 |
708 |
709 |

自定义图标

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

不显示标题、图标

717 | 
layx.iframe('no-title',null,'./iframe.html',{
 718 |     icon:false
 719 | });
720 | 721 |
722 |
723 |

显示置顶按钮

724 | 
layx.iframe('stick-show','显示置顶按钮','./iframe.html',{
 725 |     stickMenu:true
 726 | });
727 | 728 |
729 |
730 |

不显示最小化按钮

731 | 
layx.iframe('minhide','不显示最小化按钮','./iframe.html',{
 732 |     minMenu:false
 733 | });
734 | 735 |
736 |
737 |

不显示最大化按钮

738 | 
layx.iframe('maxhide','不显示最大化按钮','./iframe.html',{
 739 |     maxMenu:false
 740 | });
741 | 742 |
743 |
744 |

不显示关闭按钮

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

只显示关闭按钮

752 | 
layx.iframe('onlyclose','只显示关闭按钮','./iframe.html',{
 753 |     minMenu:false,
 754 |     maxMenu:false
 755 | });
756 | 757 |
758 |
759 |

自定义标题栏左边区域

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

自动获取iframe标题

767 | 
layx.iframe('autotitle',null,'./iframe.html',{
 768 |    useFrameTitle:true
 769 | });
770 | 771 |
772 |

操作按钮外观

773 |
774 |

自定义按钮style样式

775 | 
layx.html('custom-button-style','自定义按钮style样式','设置按钮字体大小和颜色',{
 776 |     width:300,
 777 |     height:300,
 778 |     statusBar:true,
 779 |     buttons:[
 780 |         {
 781 |             label:'确定',
 782 |             callback:function(id,button, event){
 783 |                 layx.destroy(id);
 784 |             },
 785 |             style:'color:#f00;font-size:16px;'
 786 |         }
 787 |     ]
 788 | });
789 | 790 |
791 |
792 |

添加class样式

793 | 
layx.html('custom-button-classes','添加class样式','为按钮添加custom-button 类',{
 794 |     width:300,
 795 |     height:300,
 796 |     statusBar:true,
 797 |     buttons:[
 798 |         {
 799 |             label:'确定',
 800 |             callback:function(id,button, event){
 801 |                 layx.destroy(id);
 802 |             },
 803 |             classes:'custom-button'
 804 |         }
 805 |     ]
 806 | });
807 | 808 |
809 |

行为控制

810 |

拖动控制

811 |
812 |

默认拖动

813 | 
layx.iframe('defaultmove','鼠标拖动标题栏看看','./iframe.html');
814 | 815 |
816 |
817 |

只允许垂直拖动

818 | 
layx.iframe('onlyvertical','只允许垂直拖动','./iframe.html',{
 819 |     moveLimit:{
 820 |         horizontal:true
 821 |     }
 822 | });
823 | 824 |
825 |
826 |

只允许水平拖动

827 | 
layx.iframe('onlyhorizontal','只允许水平拖动','./iframe.html',{
 828 |     moveLimit:{
 829 |         vertical:true
 830 |     }
 831 | });
832 | 833 |
834 |
835 |

不允许拖出可视窗口

836 | 
layx.iframe('noallowout','不允许拖出可视窗口','./iframe.html',{
 837 |     moveLimit:{
 838 |         leftOut: false, 
 839 |         rightOut: false,
 840 |         topOut: false,
 841 |         bottomOut: false, 
 842 |     }
 843 | });
844 | 845 |
846 |
847 |

不允许拖动

848 | 
layx.iframe('nomove','不允许拖动','./iframe.html',{
 849 |     movable:false
 850 | });
851 | 852 |
853 |
854 |

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

855 | 
layx.iframe('nomovebottom','四个方向限制，比如不允许拖出底部','./iframe.html',{
 856 |     moveLimit:{
 857 |         leftOut: true, 
 858 |         rightOut: true,
 859 |         topOut: true,
 860 |         bottomOut: false, 
 861 |     }
 862 | });
863 | 864 |
865 |

拖曳大小控制

866 |
867 |

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

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

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

873 | 
layx.iframe('notopbottomresize','8个方向拖曳大小控制，比如不允许顶部和底部拖曳改变','./iframe.html',{
 874 |     resizeLimit: {
 875 |         t: true, 
 876 |         r: false,
 877 |         b: true, 
 878 |         l: false, 
 879 |         lt: false,
 880 |         rt: false,
 881 |         lb: false, 
 882 |         rb: false 
 883 |     }
 884 | });
885 | 886 |
887 |
888 |

不允许改变大小

889 | 
layx.iframe('noresize','不允许改变大小','./iframe.html',{
 890 |     resizable:false
 891 | });
892 | 893 |
894 |

窗口大小、位置

895 |

窗口大小

896 |
897 |

默认大小

898 | 
layx.iframe('defaultsize','默认大小（宽800px，高600px）','./iframe.html');
899 | 900 |
901 |
902 |

自定义宽度、高度

903 | 
layx.iframe('customsize','自定义宽度、高度（宽300px，高300px）','./iframe.html',{
 904 |     width:300,
 905 |     height:300
 906 | });
907 | 908 |
909 |
910 |

最小高度、宽度

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

窗口位置

918 |
919 |

中间打开

920 | 
layx.iframe('resize-ct','中间打开','./iframe.html');
921 | 922 |
923 |
924 |

左上角打开

925 | 
layx.iframe('resize-lt','左上角打开','./iframe.html',{
 926 |     position:'lt'
 927 | });
928 | 929 |
930 |
931 |

右上角打开

932 | 
layx.iframe('resize-rt','右上角打开','./iframe.html',{
 933 |     position:'rt'
 934 | });
935 | 936 |
937 |
938 |

左下角打开

939 | 
layx.iframe('resize-lb','左下角打开','./iframe.html',{
 940 |     position:'lb'
 941 | });
942 | 943 |
944 |
945 |

右下角打开

946 | 
layx.iframe('resize-rb','右下角打开','./iframe.html',{
 947 |     position:'rb'
 948 | });
949 | 950 |
951 |
952 |

上边中间打开

953 | 
layx.iframe('resize-tc','上边中间打开','./iframe.html',{
 954 |     position:'tc'
 955 | });
956 | 957 |
958 |
959 |

左边中间打开

960 | 
layx.iframe('resize-lc','左边中间打开','./iframe.html',{
 961 |     position:'lc'
 962 | });
963 | 964 |
965 |
966 |

右边中间打开

967 | 
layx.iframe('resize-rc','右边中间打开','./iframe.html',{
 968 |     position:'rc'
 969 | });
970 | 971 |
972 |
973 |

下边中间打开

974 | 
layx.iframe('resize-bc','下边中间打开','./iframe.html',{
 975 |     position:'bc'
 976 | });
977 | 978 |
979 |
980 |

自定义位置

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

自定义位置（组合模式）

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

存储窗口位置、大小

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

窗口事件

1001 |

加载事件

1002 |
1003 |

加载前后控制

1004 | 
layx.iframe('event-onload','加载前后控制','./iframe.html',{
1005 |     event:{
1006 |         onload:{
1007 |             before:function(layxWindow,winform){
1008 |                 alert("加载之前");
1009 |                 console.log(new Date()+"加载之前~")
1010 |                 console.log(winform);
1011 |                 console.log("=============分割线===============");
1012 |             },
1013 |             after: function (layxWindow, winform) {
1014 |                 alert("加载之后");
1015 |                 console.log(new Date()+"加载之后~")
1016 |                 console.log(winform);
1017 |                 console.log("=============分割线===============");
1018 |             }
1019 |         }
1020 |     }
1021 | });
1022 |

请打开控制台查看

1023 | 1024 |
1025 |

最小化事件

1026 |
1027 |

最小化事件

1028 | 
layx.iframe('event-onmin','最小化前后控制','./iframe.html',{
1029 |     event:{
1030 |         onmin:{
1031 |             before:function(layxWindow,winform){
1032 |                 alert("最小化之前");
1033 |                 console.log(new Date()+"最小化之前~")
1034 |                 console.log(winform);
1035 |                 console.log("=============分割线===============");
1036 |             },
1037 |             after: function (layxWindow, winform) {
1038 |                 alert("最小化之后");
1039 |                 console.log(new Date()+"最小化之后~")
1040 |                 console.log(winform);
1041 |                 console.log("=============分割线===============");
1042 |             }
1043 |         }
1044 |     }
1045 | });
1046 |

请打开控制台查看

1047 | 1048 |
1049 |

最大化事件

1050 |
1051 |

最大化事件

1052 | 
layx.iframe('event-onmax','最大化前后控制','./iframe.html',{
1053 |     event:{
1054 |         onmax:{
1055 |             before:function(layxWindow,winform){
1056 |                 alert("最大化之前");
1057 |                 console.log(new Date()+"最大化之前~")
1058 |                 console.log(winform);
1059 |                 console.log("=============分割线===============");
1060 |             },
1061 |             after: function (layxWindow, winform) {
1062 |                 alert("最大化之后");
1063 |                 console.log(new Date()+"最大化之后~")
1064 |                 console.log(winform);
1065 |                 console.log("=============分割线===============");
1066 |             }
1067 |         }
1068 |     }
1069 | });
1070 |

请打开控制台查看

1071 | 1072 |
1073 |

恢复事件

1074 |
1075 |

恢复事件

1076 | 
layx.iframe('event-onrestore','恢复前后控制','./iframe.html',{
1077 |     event:{
1078 |         onrestore:{
1079 |             before:function(layxWindow,winform){
1080 |                 alert("恢复之前");
1081 |                 console.log(new Date()+"恢复之前~")
1082 |                 console.log(winform);
1083 |                 console.log("=============分割线===============");
1084 |             },
1085 |             after: function (layxWindow, winform) {
1086 |                 alert("恢复之后");
1087 |                 console.log(new Date()+"恢复之后~")
1088 |                 console.log(winform);
1089 |                 console.log("=============分割线===============");
1090 |             }
1091 |         }
1092 |     }
1093 | });
1094 |

请打开控制台查看

1095 | 1096 |
1097 |

关闭事件

1098 |
1099 |

关闭事件

1100 | 
layx.iframe('event-ondestroy','关闭前后控制','./iframe.html',{
1101 |     event:{
1102 |         ondestroy:{
1103 |             before:function(layxWindow,winform,inside,escKey){
1104 |                 alert("关闭之前");
1105 |                 console.log(new Date()+"关闭之前~")
1106 |                 console.log(winform);
1107 |                 console.log("=============分割线===============");
1108 |             },
1109 |             after: function () {
1110 |                 alert("关闭之后");
1111 |                 console.log(new Date()+"关闭之后~")
1112 |                 console.log("=============分割线===============");
1113 |             }
1114 |         }
1115 |     }
1116 | });
1117 |

请打开控制台查看

1118 | 1119 |
1120 |

显示/隐藏事件

1121 |
1122 |

显示/隐藏事件

1123 | 
layx.iframe('event-onvisual','显示/隐藏前后控制','./iframe.html',{
1124 |     event:{
1125 |         ondestroy: {
1126 |              before: function (layxWindow, winform, params, inside,escKey) { 
1127 |                     if(params.ok===true){
1128 |                         // 彻底销毁
1129 |                     }
1130 |                     else{
1131 |                          layx.visual(winform.id,false);  // 隐藏窗口
1132 |                          return false;
1133 |                     }
1134 |              }
1135 |         },
1136 |         onexist: function (layxWindow, winform) { 
1137 |             layx.visual(winform.id,true);   // 显示窗口
1138 |         },
1139 |         onvisual:{
1140 |             before:function(layxWindow, winform, params, inside, status){
1141 |                 if(status===true){
1142 |                      alert("显示之前");
1143 |                     console.log(new Date()+"显示之前~");
1144 |                 }
1145 |                 else{
1146 |                      alert("隐藏之前");
1147 |                      console.log(new Date()+"隐藏之前~");
1148 |                 }
1149 |                 console.log(winform);
1150 |                 console.log("=============分割线===============");
1151 |             },
1152 |             after: function (layxWindow, winform,status) {
1153 |                 if(status===true){
1154 |                      alert("显示之后");
1155 |                     console.log(new Date()+"显示之后~");
1156 |                 }
1157 |                 else{
1158 |                      alert("隐藏之后");
1159 |                      console.log(new Date()+"隐藏之后~");
1160 |                 }
1161 |                 console.log(winform);
1162 |                 console.log("=============分割线===============");
1163 |             }
1164 |         }
1165 |     }
1166 | });
1167 |

请打开控制台查看

1168 | 1169 | 1170 |
1171 |

拖动事件

1172 |
1173 |

拖动窗口试试

1174 | 
layx.iframe('event-onmove','拖动前中后控制','./iframe.html',{
1175 |     event:{
1176 |         onmove:{
1177 |             before:function(layxWindow,winform){
1178 |                 console.log(new Date()+"拖动之前~")
1179 |                 console.log(winform);
1180 |                 console.log("=============分割线===============");
1181 |             },
1182 |             progress:function(layxWindow,winform){
1183 |                 console.log(new Date()+"拖动之中~")
1184 |                 console.log(winform);
1185 |                 console.log("=============分割线===============");
1186 |             },
1187 |             after: function (layxWindow, winform) {
1188 |                 console.log(new Date()+"拖动之后~")
1189 |                 console.log(winform);
1190 |                 console.log("=============分割线===============");
1191 |             }
1192 |         }
1193 |     }
1194 | });
1195 |

请打开控制台查看

1196 | 1197 |
1198 |

拖曳事件

1199 |
1200 |

改变窗口大小试试

1201 | 
layx.iframe('event-onresize','拖曳大小前中后控制','./iframe.html',{
1202 |     event:{
1203 |         onresize:{
1204 |             before:function(layxWindow,winform){
1205 |                 console.log(new Date()+"拖曳大小之前~")
1206 |                 console.log(winform);
1207 |                 console.log("=============分割线===============");
1208 |             },
1209 |             progress:function(layxWindow,winform){
1210 |                 console.log(new Date()+"拖动大小之中~")
1211 |                 console.log(winform);
1212 |                 console.log("=============分割线===============");
1213 |             },
1214 |             after: function (layxWindow, winform) {
1215 |                 console.log(new Date()+"拖曳大小之后~")
1216 |                 console.log(winform);
1217 |                 console.log("=============分割线===============");
1218 |             }
1219 |         }
1220 |     }
1221 | });
1222 |

请打开控制台查看

1223 | 1224 |
1225 |

焦点事件

1226 |
1227 |

点击窗口看看

1228 | 
layx.iframe('event-onfocus','点击窗口看看','./iframe.html',{
1229 |     event:{
1230 |         onfocus:function(layxWindow,winform){
1231 |     alert("我获取焦点啦，我的窗口Id是："+winform.id);
1232 | }
1233 |     }
1234 | });
1235 | 1236 |
1237 |

存在事件

1238 |
1239 |

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

1240 | 
layx.iframe('event-onexist','再点击创建相同的窗口看看','./iframe.html',{
1241 |     event:{
1242 |         onexist:function(layxWindow,winform){
1243 |     alert("我已经打开啦");
1244 | }
1245 |     }
1246 | });
1247 | 1248 |
1249 |

切换事件

1250 |
1251 |

切换窗口时触发切换事件

1252 | 
layx.group('group-switch',[
1253 |     {
1254 |         id:'group1',
1255 |         title:'文本窗口',
1256 |         content:'Layx 新一代Web弹窗组件.'
1257 |     },
1258 |     {
1259 |         id:'group2',
1260 |         title:'网页窗口',
1261 |         type:'url',
1262 |         url:'./iframe.html'
1263 |     },
1264 |     {
1265 |         id:'taobao',
1266 |         title:'百度官网',
1267 |         type:'url',
1268 |         url:'https://www.baidu.com'
1269 |     }
1270 | ],1,{
1271 |     event:{
1272 |                 onswitch: {
1273 |                     before: function (layxWindow, winform, frameId) {
1274 |                         alert("切换之前");
1275 |                      },
1276 |                     after: function (layxWindow, winform, frameId) { 
1277 |                         alert("切换之后");
1278 |                     }
1279 |                 }
1280 |     }
1281 | });
1282 | 1283 |
1284 |

置顶事件

1285 |
1286 |

点击置顶按钮触发事件

1287 | 
layx.iframe('stick-event','打开一个置顶窗口，再打开另外的窗口试试','./iframe.html',{
1288 |     alwaysOnTop:true,
1289 |     stickMenu:true,
1290 |     event:{
1291 |                 onstick: {
1292 |                     before: function (layxWindow, winform, frameId) {
1293 |                         alert("置顶之前");
1294 |                      },
1295 |                     after: function (layxWindow, winform, frameId) { 
1296 |                         alert("置顶之后");
1297 |                     }
1298 |                 }
1299 |     }
1300 | });
1301 | 1302 |
1303 |

更多示例

1304 |

事件组合

1305 |
1306 |

自动最大化窗口

1307 | 
layx.iframe('maxauto','自动最大化窗口','./iframe.html',{
1308 |     event:{
1309 |         onload:{
1310 |             after:function(layxWindow,winform){
1311 |                 layx.max(winform.id);
1312 |             }
1313 |         }
1314 |     }
1315 | });
1316 | 1317 |
1318 |
1319 |

只有输入Layx才能关闭窗口

1320 | 
layx.prompt('请输入当前框架的名称','请输入Layx名字：',function(id,value,textarea, button, event){
1321 |     layx.destroy(id);
1322 | },'Layx',{
1323 |     event:{
1324 |         ondestroy: {
1325 |              before: function (layxWindow, winform, params, inside,escKey) {
1326 |                 var textarea=layx.getPromptTextArea(winform.id);
1327 |                 if(textarea.value==="Layx"){
1328 |                     alert("你正确输入了 Layx");
1329 |                 }
1330 |                 else{
1331 |                     alert("您输入的是："+textarea.value+"，您必须输入 Layx 才能关闭 ");
1332 |                     return false;
1333 |                 }
1334 |             }
1335 |         }
1336 |     }
1337 | });
1338 | 1339 |
1340 |

其他示例

1341 |
1342 |

定制加载提示文本

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

定制倒计时文本

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

定制询问框按钮

1358 | 
layx.confirm('温馨提示','你还为保存文本内容，请选择操作。',null,{
1359 |     buttons:[
1360 |         {
1361 |             label:'保存文本',
1362 |             callback:function(id, button, event){
1363 |                 alert("你点击了保存文本");
1364 |             }
1365 |         },
1366 |         {
1367 |             label:'确定',
1368 |             callback:function(id, button, event){
1369 |                 alert("你点击了确定");
1370 |             }
1371 |         },
1372 |         {
1373 |             label:'关闭',
1374 |             callback:function(id, button, event){
1375 |                 alert("你点击了关闭");
1376 |                 layx.destroy(id);
1377 |             }
1378 |         }
1379 |     ]
1380 | });
1381 | 1382 |
1383 |

常用方法及窗口通讯

1384 |

常用方法

1385 |
1386 |

获取Layx版本

1387 | 
alert(layx.v);
1388 | 1389 |
1390 |
1391 |

通用打开窗口方法

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

获取所有打开窗口列表

1401 | 
var windows=layx.windows();
1402 | 
1403 | var jsonStr=JSON.stringify(windows, null, 4);
1404 | console.log(jsonStr);
1405 | alert(jsonStr);
1406 |
1407 |

请打开控制台查看

1408 | 1409 |
1410 |
1411 |

获取单个窗口winform对象

1412 | 
// 第一种方法，直接接收返回值
1413 | var winform = layx.iframe('single','测试操作方法、通讯窗口','./iframe.html');
1414 | alert(JSON.stringify(winform, null, 4));
1415 | 
1416 | // 第二种方法，通过 layx.getWindow(id) 获取窗口的winform对象
1417 | var winform2 = layx.getWindow('single');
1418 | alert(JSON.stringify(winform2, null, 4));
1419 |
1420 |

请打开控制台查看

1421 | 1422 |
1423 |
1424 |

设置窗口标题

1425 |

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

1426 | 1427 |

第二步：设置窗口标题

1428 | 
layx.setTitle('iframe-demo','我是新的标题');
1429 | 1430 |
1431 |
1432 |

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

1433 |

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

1434 | 1435 |

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

1436 | 
layx.setTitle('iframe-demo',null,true);
1437 | 1438 |
1439 |
1440 |

设置文本窗口内容

1441 |

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

1442 | 1443 |

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

1444 | 
layx.setContent('text-demo',new Date()+' 我是新设置的内容 ');
1445 | 1446 |
1447 |
1448 |

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

1449 |

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

1450 | 1451 |

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

1452 | 
layx.setContent('text-demo',document.getElementById('dom-get'),false);
1453 | 1454 |
1455 |
1456 |

设置网页窗口地址

1457 |

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

1458 | 1459 |

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

1460 | 
layx.setUrl('iframe-demo','https://www.baidu.com/');
1461 | 1462 |
1463 |
1464 |

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

1465 |

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

1466 | 1467 |

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

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

测试窗口必须设置 useFrameTitle:true

1470 | 1471 |
1472 |
1473 |

闪烁一下窗口

1474 | 
layx.flicker('layx');
1475 | 1476 |
1477 |
1478 |

最大化窗口

1479 | 
layx.max('layx');
1480 | 1481 |
1482 |
1483 |

恢复窗口

1484 | 
layx.restore('layx');
1485 | 1486 |
1487 |
1488 |

最小化窗口

1489 |

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

1490 | 1491 |

第二步：设置最小化

1492 | 
layx.min('iframe-demo');
1493 | 1494 |
1495 |
1496 |

置顶/取消置顶

1497 | 
layx.stickToggle('layx');
1498 |

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

1499 | 1500 |
1501 |
1502 |

设置窗口位置

1503 | 
layx.setPosition('layx','ct');
1504 | 1505 |
1506 |
1507 |

设置窗口宽度、高度

1508 | 
layx.setSize('layx',{width:300,height:300});
1509 | 1510 |
1511 |
1512 |

关闭窗口

1513 |

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

1514 | 1515 |

第二步：关闭窗口

1516 | 
layx.destroy('iframe-demo');
1517 | 1518 |
1519 |
1520 |

重载页面窗口

1521 |

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

1522 | 1523 |

第二步：重载页面窗口

1524 | 
layx.reloadFrame('iframe-demo');
1525 | 1526 |
1527 |
1528 |

关闭所有窗口

1529 |

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

1530 | 1531 |

第二步：关闭所有窗口

1532 | 
layx.destroyAll();
1533 |

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

1534 | 1535 |
1536 |
1537 |

设置窗口组标题

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

注意看 当前文档的标题哦

1540 | 1541 |
1542 |
1543 |

设置窗口组文本内容

1544 |

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

1545 | 1546 |

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

1547 | 
layx.setGroupContent('group-demo','group1','我是新设置的内容');
1548 | 1549 |
1550 |
1551 |

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

1552 |

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

1553 | 1554 |

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

1555 | 
layx.setGroupContent('group-demo','group1',document.getElementById('dom-get'),false);
1556 | 1557 |
1558 |
1559 |

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

1560 |

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

1561 | 1562 |

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

1563 | 
layx.setGroupUrl('group-demo','group2','https://www.baidu.com');
1564 | 1565 |
1566 |
1567 |

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

1568 |

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

1569 | 1570 |

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

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

窗口组二必须设置 useFrameTitle:true

1573 | 1574 |
1575 |
1576 |

设置窗口组索引

1577 | 
layx.setGroupIndex('layx','info');
1578 | 1579 |
1580 |
1581 |

重载窗口组页面窗口

1582 |

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

1583 | 1584 |

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

1585 | 
layx.reloadGroupFrame('group-demo','group2');
1586 | 1587 |
1588 |

窗口通讯（页面窗口）

1589 |
1590 |

在顶层打开窗口

1591 | 
layx.iframe('topiframe','在topopen.html内部打开调用 top.layx 打开新窗口','./topopen.html');
1592 | 1593 |
1594 |
1595 |

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

1596 |

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

1597 | 1598 |

第二步：获取页面HTML

1599 | 
var win = layx.getFrameContext('iframe-demo');
1600 | alert(win.document.body.innerHTML);
1601 | 1602 |
1603 |
1604 |

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

1605 |

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

1606 | 1607 |

第二步：设置页面HTML

1608 | 
var win = layx.getFrameContext('iframe-demo');
1609 | win.document.body.innerHTML='<label>Hello Layx!</label>';
1610 | 1611 |
1612 |
1613 |

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

1614 |

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

1615 | 1616 |

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

1617 | 
var win = layx.getFrameContext('iframe-demo');
1618 | win.iframeFunc();
1619 | 1620 |
1621 |
1622 |

获取窗口组页面窗口HTML

1623 |

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

1624 | 1625 |

第二步：获取窗口组二HTML

1626 | 
var win = layx.getGroupFrameContext('group-demo','group2');
1627 | alert(win.document.body.innerHTML);
1628 | 1629 |
1630 |
1631 |

设置窗口组页面窗口HTML

1632 |

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

1633 | 1634 |

第二步：设置窗口组二HTML

1635 | 
var win = layx.getGroupFrameContext('group-demo','group2');
1636 | win.document.querySelector("label").innerHTML="Hello Layx!";
1637 | 1638 |
1639 |
1640 |

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

1641 |

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

1642 | 1643 |

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

1644 | 
var win = layx.getGroupFrameContext('group-demo','group2');
1645 | win.iframeFunc();
1646 | 1647 |
1648 |
1649 |
1650 | 1651 | 1652 | 1653 | 1654 | --------------------------------------------------------------------------------