dailer
6 years ago
3 changed files with 56 additions and 1 deletions
@ -0,0 +1,54 @@ |
|||||||
|
# 贴底隐藏的侧边栏 |
||||||
|
## 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(); |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
## 效果预览 |
||||||
|
![](../screenshorts/4.gif) |
After Width: | Height: | Size: 245 KiB |
Loading…
Reference in new issue