You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.3 KiB
54 lines
1.3 KiB
6 years ago
|
# 贴底隐藏的侧边栏
|
||
|
|
## js
|
||
|
|
```
|
||
|
|
// 贴底隐藏的侧边栏
|
||
|
|
BI.Plugin.registerObject("dec.body", function (widget) {
|
||
|
|
// 首先去掉主内容区的left值
|
||
|
|
widget.element.css({
|
||
|
|
left: 0
|
||
|
|
});
|
||
|
|
});
|
||
|
|
BI.Plugin.registerObject("dec.menu", function (widget) {
|
||
|
|
// 去掉menu的top值,bottom设置为0
|
||
|
|
widget.element.css({
|
||
|
|
top: "",
|
||
|
|
left: "30%",
|
||
|
|
right: "30%",
|
||
|
|
bottom: 0,
|
||
|
|
height: "10px",
|
||
|
|
width: "auto",
|
||
|
|
position: "fixed",
|
||
|
|
zIndex: 1000000
|
||
|
|
});
|
||
|
|
// 绑定hover事件
|
||
|
|
widget.element.hover(function () {
|
||
|
|
widget.element.animate({height: "70px"});
|
||
|
|
}, function () {
|
||
|
|
widget.element.animate({height: "10px"});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 讲容纳menu的容器变为flex盒子
|
||
|
|
var wrapper = widget.element.children();
|
||
|
|
wrapper.css({
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "space-around"
|
||
|
|
});
|
||
|
|
|
||
|
|
// 调整一下位置
|
||
|
|
var children = widget.element.find(".dec-menu-button");
|
||
|
|
children.each(function (index, button) {
|
||
|
|
$(button).css({
|
||
|
|
marginTop: -10
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
BI.Plugin.registerObject("dec.menu.button", function (widget) {
|
||
|
|
// 移除menu状态线
|
||
|
|
var line = widget.element.children(".menu-button-line");
|
||
|
|
line.remove();
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
## 效果预览
|
||
|
|
|