Browse Source

update

master
dailer 6 years ago
parent
commit
2271a97096
  1. 0
      API/tabPane.md
  2. 2
      README.md
  3. 99
      dom/全屏状态下左右切换按钮.md
  4. 15
      dom/按鼠标中键关闭标签.md
  5. BIN
      screenshorts/5.png

0
API/tabPane.md

2
README.md

@ -8,3 +8,5 @@
4. [隐藏侧边栏](./dom/隐藏侧边栏.md) 4. [隐藏侧边栏](./dom/隐藏侧边栏.md)
5. [侧栏移动到右侧](./dom/侧栏移动到右侧.md) 5. [侧栏移动到右侧](./dom/侧栏移动到右侧.md)
6. [贴底隐藏的侧边栏](./dom/贴底隐藏的侧边栏.md) 6. [贴底隐藏的侧边栏](./dom/贴底隐藏的侧边栏.md)
7. [按鼠标中键关闭标签](./dom/按鼠标中键关闭标签.md)
8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md)

99
dom/全屏状态下左右切换按钮.md

@ -0,0 +1,99 @@
# 全屏状态下左右切换按钮
## js
```
var time = 30;
var timer;
// 创建两个箭头
var left = $("<span class=\"plugin-triangle-left\"></span>");
var right = $("<span class=\"plugin-triangle-right\"></span>");
// 切换tab的方法,详见 Dec.globleModel 的定义
var slideTab = function (v) {
var currValue = Dec.globleModel.selectedTab;
var nextValue;
$.each(Dec.globleModel.openedTabs, function (index, tab) {
if (tab.value === currValue) {
nextValue = Dec.globleModel.openedTabs[index + v].value;
}
});
Dec.globleModel.selectedTab = nextValue;
};
// 全屏后绑定事件
var onFullscreen = function () {
$(document.fullscreenElement).append(right);
$(document.fullscreenElement).append(left);
left.hide("slow");
right.hide("slow");
left.click(function () {
slideTab(-1);
});
right.click(function () {
slideTab(1);
});
$(document).mousemove(function (e) {
left.show("slow");
right.show("slow");
time = 30;
if (!timer) {
timer = setInterval(function () {
time--;
if (time < 0) {
left.hide("slow");
right.hide("slow");
}
}, 100);
}
});
};
// 退出全屏后去掉两个箭头
var onExitFullscreen = function () {
left.remove();
right.remove();
clearInterval(timer);
};
// 全屏事件
document.onfullscreenchange = function (ev) {
if (document.fullscreenElement) {
// 如果处于非全屏模式,fullscreenElement 为null
onFullscreen();
return;
}
onExitFullscreen();
};
```
## css
```
.plugin-triangle-left {
cursor: pointer;
display: inline-block;
border-top: 2px solid;
border-right: 2px solid;
width: 100px;
height: 100px;
border-color: #EA6000;
transform: rotate(-135deg);
margin: 50px auto auto 100px;
position: fixed;
left: -4%;
top: 50%;
}
.plugin-triangle-right {
cursor: pointer;
display: inline-block;
border-top: 2px solid;
border-right: 2px solid;
width: 100px;
height: 100px;
border-color: #EA6000;
transform: rotate(45deg);
margin: 50px auto auto 100px;
position: fixed;
right: 3%;
top: 50%;
}
```
## 效果预览
![](../screenshorts/5.png)

15
dom/按鼠标中键关闭标签.md

@ -0,0 +1,15 @@
# 按鼠标中键关闭标签
这一个demo使用了一些内置api,你需要查阅[](dddl)
## js
```
// 提供鼠标中键关闭标签页,类似浏览器交互
BI.Plugin.registerObject("dec.workbench.tabs.button", function (widget) {
// 绑定鼠标中键事件
widget.element.mousedown(function (event) {
if (event.button === 1) {
// 调用tabPane api 关闭tab
BI.Services.getService("dec.service.tabs").closeTab(widget.getValue());
}
});
});
```

BIN
screenshorts/5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Loading…
Cancel
Save