Skip to content

Commit

Permalink
v2.0.1
Browse files Browse the repository at this point in the history
  • Loading branch information
百小僧 committed May 14, 2018
1 parent 7501340 commit 49145f0
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 22 deletions.
46 changes: 43 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ Layx 诞生于一次C/S架构系统往B/S架构系统迁移项目中。起初,

- `原创作者`:百小僧
- `开源协议`:MIT
- `当前版本`:v2.0.0
- `发布日期`:2018.05.12
- `当前版本`:v2.0.1
- `发布日期`:2018.05.15
- `交流Q群`:18863883

# 特性
Expand Down Expand Up @@ -118,7 +118,7 @@ layx.open({
- `topOut`:是否允许窗口拖出浏览器上边可视区域,Boolean类型。默认值:true,**不管这个值设置为true或false,窗口总时不能拖出浏览器可视区域顶部**
- `bottomOut`:是否允许窗口拖出浏览器下边可视区域,Boolean类型。默认值:true,**下边拖出时至少露出 15px 的窗口可视区域**
- `autodestroy`:窗口自动关闭时间,Boolean 或 Number 类型。false:不自动关闭,Number 类型时表示 **多少毫秒后关闭**,如:5000,表示5秒后自动关闭窗口,默认值:false
- `autodestroyText`:窗口自动关闭提示文字,Boolean类型。**设置 true 将会在窗口右下脚有倒计时提示**,默认值:true
- `autodestroyText`:窗口自动关闭提示文字(在窗口右下角显示),Boolean 或 String 类型。false:不显示,默认值:`'<div style="padding: 0 8px; ">此窗口将在 <strong>{second}</strong> 秒内自动关闭.</div>'``{second}` 占位符代表 `autodestroy`的秒数
- `focusable`:窗口是否允许获取焦点,Boolean 类型。窗口获取焦点后会自动显示在顶层,默认值:true,**只支持同域页面获取焦点**
- `alwaysOnTop`:是否总是置顶,Boolean 类型。默认值 true,置顶之后将位于所有窗口之上(同级别除外)
- `allowControlDbclick`:是否允许控制栏双击切换窗口大小,Boolean 类型。默认值:true
Expand Down Expand Up @@ -227,6 +227,8 @@ winform 是窗口信息对象,包含属性:

- `var version = layx.v`:获取 layx 版本号,返回值:字符串
- `var winform = layx.open(options)`:打开一个窗口,options:配置参数,返回值:winform 对象
- `var winform = layx.html(id,title,content,options)`:打开一个文本窗口,id:窗口Id;title:窗口标题;content:窗口内容;options:配置参数,返回值:winform 对象
- `var winform = layx.iframe(id,title,url,options)`:打开一个网页窗口,id:窗口Id;title:窗口标题;url:窗口地址;options:配置参数,返回值:winform 对象
- `var windows = layx.windows()`:获取所有打开的窗口,返回值:{ 窗口Id:winform对象,窗口Id2:winform对象,...}
- `var winform = layx.getWindow(id)`:获取当前窗口 winform 对象,id:窗口Id
- `layx.destroy(id)`:关闭窗口,id:窗口Id
Expand All @@ -250,6 +252,44 @@ winform 是窗口信息对象,包含属性:
- `var promptTextare = layx.getPromptTextArea(id)`:获取输入框 `textarea` 对象 ,id:窗口Id,通常在 prompt 输入框点击按钮回调函数中使用
- `var winform = layx.load(id,msg,options)`: 打开一个加载框,id:窗口Id;msg,消息,String类型;options:配置参数

# 注意

默认窗口带有点击事件,如果窗口内部包含其他事件打开新窗口,该事件需要取消向上冒泡,如:

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

# 日志

```
# 2018.05.14 v2.0.1 发布
- [新增] var winform = layx.html(id,title,content,options) 快捷打开文本窗口方法
- [新增] var winform = layx.iframe(id,title,url,options) 快捷打开网页窗口方法
- [新增] 窗口自动关闭文本可自定义功能:autodestroyText
- [新增] 打开一个存在的窗口时窗口闪烁获取焦点
- [更新] 调整最小化后显示宽度为:240px
- [修复] 点击文本窗口内容无法置顶 bug
- [修复] 置顶按钮点击切换 title 提示 bug
- [修复] 置顶层带有阻隔层时没有阻隔的bug
# 2018.05.12 v2.0.0 发布
- [新增] v2.0.0 正式发布
# 2018.05.06 v1.0.0 发布
- [新增] v1.0.0 正式发布
```

# 开源

- `Gitee`[https://gitee.com/monksoul/LayX](https://gitee.com/monksoul/LayX)
Expand Down
88 changes: 88 additions & 0 deletions doc/demo.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layx 官方示例大全 v2.0.1</title>
<style type="text/css">
button {
margin: 5px;
}
</style>
</head>

<body>
<h3>窗口类型</h3>
<button id="wbck">文本窗口</button>
<button id="wyck">网页窗口</button>
<button id="xxck">消息窗口</button>
<button id="tsck">提示窗口</button>
<button id="xwck">询问窗口</button>
<button id="srck">输入窗口</button>
<button id="jzck">加载窗口</button>
<h3>窗口外观</h3>
整理中...
<script type="text/javascript">
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
function $(selector) {
return document.querySelector(selector);
}

//===================== 下面才是demo 代码 ==================
window.onload = function () {
$("#wbck").onclick = function (e) {
top.layx.html('wbck', '文本窗口', '<div style="padding:10px">我是一个文本窗口,支持 <strong>HTML</strong> 和 HTMLElment 对象</div>', { position: [randomNum(0, 200), randomNum(0, 500)] })
e.stopPropagation();
}
$("#wyck").onclick = function (e) {
top.layx.iframe('wyck', '网页窗口', './iframe.html', { position: [randomNum(0, 500), randomNum(0, 500)] });
e.stopPropagation();
}
$("#xxck").onclick = function (e) {
top.layx.msg("我是消息窗口,5秒后关闭");
e.stopPropagation();
}
$("#tsck").onclick = function (e) {
top.layx.alert(null, "我是提示窗口");
e.stopPropagation();
}
$("#xwck").onclick = function (e) {
top.layx.confirm(null, "我是询问窗口", function (id) {
alert('你点击了确定');
top.layx.destroy(id);
});
e.stopPropagation();
}
$("#srck").onclick = function (e) {
top.layx.prompt(null, "请输入一个值试试", function (id, value, textarea) {
alert('你输入的值为:' + value);
top.layx.destroy(id);
});
e.stopPropagation();
}
$("#jzck").onclick = function (e) {
top.layx.load('loadid', '数据正在加载中(5秒后关闭)...');
setTimeout(function () {
top.layx.destroy('loadid');
}, 5000);
e.stopPropagation();
}
}
</script>
</body>
</html>
6 changes: 3 additions & 3 deletions doc/iframe.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Layx 网页弹窗最佳选择.</title>
<title>Layx 网页弹窗最佳选择 v2.0.1</title>
<style>
html,
body {
Expand All @@ -15,7 +15,7 @@
padding: 0;
line-height: 1.5;
}

body {
display: -webkit-flex;
display: flex;
Expand All @@ -30,7 +30,7 @@
-moz-justify-content: center;
-o-justify-content: center;
}

label {
font-size: 90px;
font-family: Arial, Helvetica, sans-serif;
Expand Down
23 changes: 21 additions & 2 deletions doc/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
<script type="text/javascript" src="rainbow.min.js"></script>
</head>
<body>
<h1>示例整理中...</h1>
<script type="text/javascript" src="../layx.min.js"></script>
<script type="text/javascript">
window.onload = function (e) {
Expand All @@ -21,7 +20,27 @@ <h1>示例整理中...</h1>
url: 'iframe.html',
useFrameTitle: true,
shadable: true,
stickMenu: true,
autodestroy: 5000,
stickMenu: true,
event: {
ondestroy: {
before: function (layxWindow, winform) {
},
after: function () {
layx.open({
id: 'doc',
type: 'url',
url: 'demo.html',
useFrameTitle: true,
alwaysOnTop: true,
stickMenu: true,
width: 320,
height: 568,
position: ['lc', 20]
});
}
}
}
});
};
</script>
Expand Down
4 changes: 2 additions & 2 deletions layx.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
* file : layx.css
* gitee : https://gitee.com/monksoul/LayX
* author : 百小僧/MonkSoul
* version : v2.0.0
* version : v2.0.1
* create time : 2018.05.11
* update time : 2018.05.12
* update time : 2018.05.15
*/

.layx-shade,
Expand Down
59 changes: 48 additions & 11 deletions layx.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
* file : layx.js
* gitee : https://gitee.com/monksoul/LayX
* author : 百小僧/MonkSoul
* version : v2.0.0
* version : v2.0.1
* create time : 2018.05.11
* update time : 2018.05.12
* update time : 2018.05.15
*/

;
!(function (over, win, slf) {
var Layx = {
// 版本号
version: '2.0.0',
version: '2.0.1',
// 默认配置
defaults: {
id: '',// 窗口唯一id
Expand Down Expand Up @@ -45,7 +45,7 @@
restorable: true, // 是否允许恢复操作
resizable: true, // 是否显示拖曳操作
autodestroy: false, // 自动关闭,支持数值类型毫秒
autodestroyText: true, // 是否显示关闭倒计时文本
autodestroyText: '<div style="padding: 0 8px; ">此窗口将在 <strong>{second}</strong> 秒内自动关闭.</div>', // 是否显示关闭倒计时文本
// 拖曳方向控制
resizeLimit: {
t: false, // 是否限制上边拖曳大小,false不限制
Expand Down Expand Up @@ -161,6 +161,8 @@
if (_winform.status === "min") {
that.restore(_winform.id);
}

that.flicker(config.id);
return _winform;
}

Expand Down Expand Up @@ -272,6 +274,14 @@
controlBar.classList.add("layx-control-bar");
controlBar.classList.add("layx-flexbox");
config.controlStyle && controlBar.setAttribute("style", config.controlStyle);
// 为 html 类型添加更新层事件
if (config.type === "html") {
layxWindow.onclick = function (e) {
e = e || window.event;
that.updateZIndex(config.id);
e.stopPropagation();
};
}
layxWindow.appendChild(controlBar);

// 创建窗口默认图标
Expand Down Expand Up @@ -671,14 +681,16 @@
// 自动关闭提示
if (/(^[1-9]\d*$)/.test(config.autodestroy)) {
var second = config.autodestroy / 1000;
var autodestroyTip = document.createElement("div");
autodestroyTip.classList.add("layx-auto-destroy-tip");
config.autodestroyText && (autodestroyTip.innerHTML = "<div style='padding:0 8px;'>此窗口 <strong>" + second + " </strong>秒后自动关闭...</div>");
layxWindow.appendChild(autodestroyTip);
if (config.autodestroyText !== false) {
var autodestroyTip = document.createElement("div");
autodestroyTip.classList.add("layx-auto-destroy-tip");
autodestroyTip.innerHTML = config.autodestroyText.replace("{second}", second);
layxWindow.appendChild(autodestroyTip);
}
var destroyTimer = setInterval(function () {
--second;
if (config.autodestroyText === true) {
config.autodestroyText && (autodestroyTip.innerHTML = "<div style='padding:0 8px;'>此窗口 <strong>" + second + " </strong>秒后自动关闭...</div>");
if (config.autodestroyText !== false) {
autodestroyTip.innerHTML = config.autodestroyText.replace("{second}", second);
}
if (second <= 0) {
clearInterval(destroyTimer);
Expand Down Expand Up @@ -765,6 +777,7 @@
var stickMenu = layxWindow.querySelector(".layx-stick-menu");
if (stickMenu) {
stickMenu.setAttribute("data-enable", winform.isStick ? "1" : "0");
winform.isStick ? stickMenu.setAttribute("title", "取消置顶") : stickMenu.setAttribute("title", "置顶");
}
that.updateZIndex(id);
}
Expand Down Expand Up @@ -926,6 +939,10 @@
layxWindow = document.getElementById(windowId),
winform = that.windows[id];
if (layxWindow && winform) {
var layxShade = document.getElementById("layx-" + id + "-shade");
if (layxShade) {
layxShade.style.zIndex = (winform.isStick === true ? (++that.stickZIndex) : (++that.zIndex));
}
if (winform.isStick === true) {
winform.zIndex = ++that.stickZIndex;
}
Expand All @@ -942,7 +959,7 @@
innertArea = Utils.innerArea(),
paddingLeft = 10,
paddingBottom = 10,
widthByMinStatu = 220,
widthByMinStatu = 240,
stepIndex = 0,
lineMaxCount = Math.floor(innertArea.width / (widthByMinStatu + paddingLeft));
for (var id in windows) {
Expand Down Expand Up @@ -1904,6 +1921,26 @@
var winform = Layx.create(options);
return winform;
},
// 打开文本窗口快捷方法
html: function (id, title, content, options) {
var winform = Layx.create(layxDeepClone({}, {
id: id,
title: title,
type: 'html',
content: content
}, options || {}));
return winform;
},
// 打开网页窗口快捷方法
iframe: function (id, title, url, options) {
var winform = Layx.create(layxDeepClone({}, {
id: id,
title: title,
type: 'url',
url: url
}, options || {}));
return winform;
},
// 获取窗口列表
windows: function () {
return Layx.windows;
Expand Down
2 changes: 1 addition & 1 deletion layx.min.js

Large diffs are not rendered by default.

0 comments on commit 49145f0

Please sign in to comment.