Skip to content

Commit

Permalink
v2.2.3
Browse files Browse the repository at this point in the history
  • Loading branch information
百小僧 committed May 26, 2018
1 parent 2027614 commit d08d7b1
Show file tree
Hide file tree
Showing 9 changed files with 468 additions and 115 deletions.
8 changes: 6 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,14 @@ layx.html('str','字符串文本','Hello Layx!');
# 日志

```
# 2018.05.26 v2.2.2 发布
# 2018.05.26 v2.2.3 发布
- [新增] 浮动窗口方向控制（上、下、左、右）
- [新增] 窗口组切换前后事件 event.onswitch
- [优化] 窗口组切换代码
- [更新] 拖曳容器代码
- [更新] layx.updateFloatTargetPosition(id) 为 layx.updateFloatWinPosition(id,direction);
- [更新] 窗口组切换代码
- [更新] 拖曳容器样式
- [修复] layx.prompt 默认值 bug
# 2018.05.25 v2.2.0 发布
Expand Down
2 changes: 1 addition & 1 deletion doc/doc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ ul {
}

#demo {
display: none;
display: none;
}

#mulu {
Expand Down
16 changes: 15 additions & 1 deletion doc/doc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,20 @@ <h3 name="主窗口参数 options">主窗口参数 options</h3>
<span>说明</span>：设置为DOM对象时，窗口将吸附到按钮上
</div>
</div>
<div class="doc-item">
<p><label>floatDirection：浮动方向</label></p>
<div class="doc-des">
<span>类型</span>：Enum<br />
<span>必需</span>：否<br />
<span>默认值</span>：'ct'<br />
<span>说明</span>：内置Enum参数：<br />
<pre>top：上边
left：左边
right：游标
bottom：下边
</pre>
</div>
</div>
<div class="doc-item">
<p><label>frames：窗口组子窗口数组</label></p>
<div class="doc-des">
Expand Down Expand Up @@ -819,7 +833,7 @@ <h3 name="置顶切换">置顶切换</h3>
<h3 name="设置窗口位置">设置窗口位置</h3>
<pre>layx.setPosition(id, position,isFloatTarget); // ,isFloatTarget 是否是浮动窗口</pre>
<h3 name="更新浮动窗口位置">更新浮动窗口位置</h3>
<pre>layx.updateFloatTargetPosition(id);</pre>
<pre>layx.updateFloatWinPosition(id,direction); // direction，浮动方向</pre>
<h3 name="获取页面窗口window对象">获取页面窗口window对象</h3>
<pre>var contentWindow = layx.getFrameContext(id);</pre>
<h3 name="获取窗口组页面窗口window对象">获取窗口组页面窗口window对象</h3>
Expand Down
24 changes: 20 additions & 4 deletions doc/doc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ window.onload = function () {
<ul>
<li><label>原创作者</label>：百小僧</li>
<li><label>开源协议</label>：MIT</li>
<li><label>当前版本</label>：v2.2.2</li>
<li><label>当前版本</label>：v2.2.3</li>
<li><label>发布日期</label>：2018.05.26</li>
<li><label>交流Q群</label>：18863883</li>
</ul>
<h2>特性</h2>
<ul>
<li>纯原生Javascript实现，不依赖任何第三方框架</li>
<li>纯原生Javascript实现，不依赖任何第三方框架</li>
<li>支持IE10+（含IE10）、Chrome、Firefox、Opera、Edge等主流浏览器</li>
<li>支持多种窗口类型：文本窗口，页面窗口，窗口组，提示窗口，消息窗口，询问窗口，输入窗口，加载窗口、浮动窗口、置顶窗口、倒计时窗口</li>
<li>支持窗口最大化、最小化、恢复、置顶、关闭控制及事件监听</li>
Expand All @@ -115,10 +115,14 @@ window.onload = function () {
</ul>
<h2>日志</h2>
<pre>
# 2018.05.26 v2.2.2 发布
# 2018.05.26 v2.2.3 发布
- [新增] 浮动窗口方向控制（上、下、左、右）
- [新增] 窗口组切换前后事件 event.onswitch
- [优化] 窗口组切换代码
- [更新] 拖曳容器代码
- [更新] layx.updateFloatTargetPosition(id) 为 layx.updateFloatWinPosition(id,direction);
- [更新] 窗口组切换代码
- [更新] 拖曳容器样式
- [修复] layx.prompt 默认值 bug
# 2018.05.25 v2.2.0 发布
Expand Down Expand Up @@ -272,6 +276,18 @@ window.onload = function () {
topOut: false,
bottomOut: false
},
event: {
onmove: {
progress: function (layxWindow, winform) {
layx.updateFloatWinPosition("float-right");
layx.updateFloatWinPosition("float-left");
layx.updateFloatWinPosition("float-top");
layx.updateFloatWinPosition("float-bottom");
var directions = ['top', 'bottom', 'left', 'right'];
layx.updateFloatWinPosition("float-auto", directions[Math.floor(Math.random() * 4)]);
}
}
},
statusBar: true,
buttons: [
{
Expand Down
133 changes: 126 additions & 7 deletions doc/index.html
View file
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 演示示例 v2.2.2</title>
<title>Layx 演示示例 v2.2.3</title>
<link href="../layx.min.css" rel="stylesheet" />
<link href="doc.css" rel="stylesheet" />
</head>
Expand Down Expand Up @@ -60,7 +60,7 @@ <h4 class="tip" name="HTML字符串窗口">HTML字符串窗口</h4>
&lt;ul&gt;
&lt;li&gt;&lt;label&gt;原创作者&lt;/label&gt;：百小僧&lt;/li&gt;
&lt;li&gt;&lt;label&gt;开源协议&lt;/label&gt;：MIT&lt;/li&gt;
&lt;li&gt;&lt;label&gt;当前版本&lt;/label&gt;：v2.2.2&lt;/li&gt;
&lt;li&gt;&lt;label&gt;当前版本&lt;/label&gt;：v2.2.3&lt;/li&gt;
&lt;li&gt;&lt;label&gt;发布日期&lt;/label&gt;：2018.05.26&lt;/li&gt;
&lt;li&gt;&lt;label&gt;交流Q群&lt;/label&gt;：18863883&lt;/li&gt;
&lt;/ul&gt;
Expand Down Expand Up @@ -316,17 +316,19 @@ <h4 class="tip" name="打开一个带调试的窗口">打开一个带调试的
</div>
<h3 name="浮动窗口">浮动窗口</h3>
<div class="demo">
<h4 class="tip" name="打开一个吸附浮动窗口">打开一个吸附浮动窗口</h4>
<pre>var btnTarget= document.getElementById('floatThat');
var winform = layx.iframe('float-target','打开一个吸附浮动窗口','./iframe.html',{
<h4 class="tip" name="打开一个下边浮动窗口">打开一个下边浮动窗口</h4>
<pre>var btnTarget= document.getElementById('floatThat-bottom');
var winform = layx.iframe('float-bottom','打开一个下边浮动窗口','./iframe.html',{
floatTarget:btnTarget, // 被吸附的DOM对象
width:357,
height:200,
alwaysOnTop:true,
floatDirection: 'bottom', // 设置方向
event:{
ondestroy: {
before: function (layxWindow, winform, params, inside) {
layx.visual(winform.id,false); // 隐藏窗口
layx.updateFloatWinPosition(winform.id);
return false;
}
},
Expand All @@ -337,10 +339,127 @@ <h4 class="tip" name="打开一个吸附浮动窗口">打开一个吸附浮动
});
// 监听滚动条事件、更新浮动窗口位置
document.getElementById("layx-layx-demo-html").onscroll=function(){
layx.updateFloatTargetPosition(winform.id);
layx.updateFloatWinPosition(winform.id);
}
</pre>
<button class="run">运行</button> <button id="floatThat">打开的窗口会吸附到这里</button>
<button class="run">运行</button> <button id="floatThat-bottom">打开的窗口会吸附到这里</button>
</div>
<div class="demo">
<h4 class="tip" name="打开一个上边浮动窗口">打开一个上边浮动窗口</h4>
<pre>var btnTarget= document.getElementById('floatThat-top');
var winform = layx.iframe('float-top','打开一个上边浮动窗口','./iframe.html',{
floatTarget:btnTarget, // 被吸附的DOM对象
width:357,
height:200,
alwaysOnTop:true,
floatDirection: 'top', // 设置方向
event:{
ondestroy: {
before: function (layxWindow, winform, params, inside) {
layx.visual(winform.id,false); // 隐藏窗口
layx.updateFloatWinPosition(winform.id);
return false;
}
},
onexist: function (layxWindow, winform) {
layx.visual(winform.id,true); // 显示窗口
}
}
});
// 监听滚动条事件、更新浮动窗口位置
document.getElementById("layx-layx-demo-html").onscroll=function(){
layx.updateFloatWinPosition(winform.id);
}
</pre>
<button class="run">运行</button> <button id="floatThat-top">打开的窗口会吸附到这里</button>
</div>
<div class="demo">
<h4 class="tip" name="打开一个右边浮动窗口">打开一个右边浮动窗口</h4>
<pre>var btnTarget= document.getElementById('floatThat-right');
var winform = layx.iframe('float-right','打开一个右边浮动窗口','./iframe.html',{
floatTarget:btnTarget, // 被吸附的DOM对象
width:357,
height:200,
alwaysOnTop:true,
floatDirection: 'right', // 设置方向
event:{
ondestroy: {
before: function (layxWindow, winform, params, inside) {
layx.visual(winform.id,false); // 隐藏窗口
layx.updateFloatWinPosition(winform.id);
return false;
}
},
onexist: function (layxWindow, winform) {
layx.visual(winform.id,true); // 显示窗口
}
}
});
// 监听滚动条事件、更新浮动窗口位置
document.getElementById("layx-layx-demo-html").onscroll=function(){
layx.updateFloatWinPosition(winform.id);
}
</pre>
<button class="run">运行</button> <button id="floatThat-right">打开的窗口会吸附到这里</button>
</div>
<div class="demo">
<h4 class="tip" name="打开一个左边浮动窗口">打开一个左边浮动窗口</h4>
<pre>var btnTarget= document.getElementById('floatThat-left');
var winform = layx.iframe('float-left','打开一个左边浮动窗口','./iframe.html',{
floatTarget:btnTarget, // 被吸附的DOM对象
width:357,
height:200,
alwaysOnTop:true,
floatDirection: 'left', // 设置方向
event:{
ondestroy: {
before: function (layxWindow, winform, params, inside) {
layx.visual(winform.id,false); // 隐藏窗口
layx.updateFloatWinPosition(winform.id);
return false;
}
},
onexist: function (layxWindow, winform) {
layx.visual(winform.id,true); // 显示窗口
}
}
});
// 监听滚动条事件、更新浮动窗口位置
document.getElementById("layx-layx-demo-html").onscroll=function(){
layx.updateFloatWinPosition(winform.id);
}
</pre>
<button class="run">运行</button> <button id="floatThat-left">打开的窗口会吸附到这里</button>
</div>
<div class="demo">
<h4 class="tip" name="玩个游戏，滚动页面或拖动当前窗口组试试">玩个游戏，滚动页面或拖动当前窗口组试试</h4>
<pre>var btnTarget= document.getElementById('floatThat-auto');
var directions = ['top', 'bottom', 'left', 'right'];
var winform = layx.iframe('float-auto','我位置实时变化哦~~~','./iframe.html',{
floatTarget:btnTarget, // 被吸附的DOM对象
width:357,
height:200,
alwaysOnTop:true,
floatDirection: directions[Math.floor(Math.random()*4)], // 设置方向
event:{
ondestroy: {
before: function (layxWindow, winform, params, inside) {
layx.visual(winform.id,false); // 隐藏窗口
layx.updateFloatWinPosition(winform.id,directions[Math.floor(Math.random()*4)]);
return false;
}
},
onexist: function (layxWindow, winform) {
layx.visual(winform.id,true); // 显示窗口
}
}
});
// 监听滚动条事件、更新浮动窗口位置
document.getElementById("layx-layx-demo-html").onscroll=function(){
layx.updateFloatWinPosition(winform.id,directions[Math.floor(Math.random()*4)]);
}
</pre>
<button class="run">运行</button> <button id="floatThat-auto">打开的窗口会吸附到这里</button>
</div>
<h2 name="窗口外观">窗口外观</h2>
<h3 name="主窗口外观">主窗口外观</h3>
Expand Down
72 changes: 62 additions & 10 deletions layx.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* file : layx.css
* gitee : https://gitee.com/monksoul/LayX
* author : °ÙСɮ/MonkSoul
* version : v2.2.2
* version : v2.2.3
* create time : 2018.05.11
* update time : 2018.05.26
*/
Expand Down Expand Up @@ -510,6 +510,10 @@ body.ilayx-body {
cursor: se-resize;
}

.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;
Expand All @@ -536,26 +540,74 @@ body.ilayx-body {
background: #f5f5f5;
}

.layx-bubble {
.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;
position: absolute;
top: -11px;
left: 5px;
}

.layx-bubble-inlay {
position: absolute;
width: 0;
height: 0;
.layx-bubble-inlay-bottom {
top: 2px;
left: -9px;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid transparent;
top: 2px;
}

.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 {
Expand Down
Loading

0 comments on commit d08d7b1

Please sign in to comment.